0

javascript フラッシュまたは css で関数を見つける必要があります。これにより、風車の画像をさまざまな速度で回転させることができます。これらの速度は、実際の風速に合わせて変更する必要があります。

4

1 に答える 1

2

これは、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
于 2012-03-14T20:59:53.143 に答える