javascript - 对风速使用react的旋转函数

Question

需要在 javascript flash 或 css 中找到一个函数。这将使我能够以几种不同的速度旋转风车的图像。这些速度需要随着现实世界的风速而变化。

Answer 1

您可以通过 CSS 转换轻松实现此目的。我将为您提供一些入门提示。

阅读this文章。和here is a quick demo为您提供(仅限 webkit)。

首先定义动画，将其称为旋转，从 0 度到 360 度:

@-webkit-keyframes spin {  
  from {  -webkit-transform: rotate(0deg); }  
  to {  -webkit-transform: rotate(360deg); }  
}  

然后，在风车图像上应用动画、迭代和计时功能:

.windmill{
    -webkit-animation-name: spin;     
    -webkit-animation-iteration-count: infinite;  
    -webkit-animation-timing-function: linear;    
} 

然后定义您的速度(您需要根据图像大小和风速公式来计算这些速度):

.windmill.mph-0  { -webkit-animation-duration: 0s; }
.windmill.mph-10 { -webkit-animation-duration: 10s; }
.windmill.mph-20 { -webkit-animation-duration: 5s; }

现在您使用 javascript 来应用风速变化:

$('.windmill').addClass('mph-10'); // stats spinning at 10 mph