Question

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

Answer 1

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

阅读this文章。而且here is a quick demo适合你（仅限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

对风速作出反应的旋转功能

1 个答案: