javascript - 对风速做出反应的旋转功能

Question

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

Answer 1

您可以使用 CSS 过渡轻松完成此操作。我会给你一些提示，让你开始。

阅读这篇文章。这是一个快速演示（仅限 webkit）。

首先定义你的动画，称之为spin，从 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