对风速做出反应的旋转功能答案

【问题标题】：rotation function that reacts to wind speed对风速做出反应的旋转功能
【发布时间】：2012-03-14 20:29:54
【问题描述】：

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

【问题讨论】：

这很有趣。你有什么问题？
我的问题是我可以使用什么格式，有没有办法可以将风速和旋转的速度变量链接到另一个应用程序，例如谷歌天气？

标签： javascript android google-weather-api autorotate

【解决方案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

【讨论】：

这似乎是我需要的，谢谢。我仍然想知道这是否可以链接到另一个应用程序，例如谷歌天气？我想让风车响应观众给定区域内的风速。我是网页设计和编码新手。