функция вращения, которая реагирует на скорость ветра - PullRequest
Новая
       20

функция вращения, которая реагирует на скорость ветра

0 голосов
/ 15 марта 2012

Нужно найти функцию в javascript flash или css. это позволит мне вращать изображение мельницы на нескольких разных скоростях. Эти скорости должны изменяться с реальной скоростью ветра.

1 Ответ

2 голосов
/ 15 марта 2012

Вы можете легко сделать это с помощью CSS-переходов. Я дам вам несколько советов, с чего можно начать.

Читать эту статью. И вот краткое демо для вас (только веб-набор).

Начните с определения анимации, назовите ее spin, идет от 0 до 360 град .::1010* 

@-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
...