0

さまざまな角度からのオブジェクトの画像を含むシーケンスがあります。ユーザーがマウスをドラッグしたときにオブジェクトを回転させたいので、これを実装しました。

しかし、私が望むのは、マウスが画像領域を離れたときに、画像シーケンスをアニメーション化してデフォルトの位置に戻すことです。

たとえば、30 個の JPEG があり、1.jpg は -180°、30.jpg は 180° です。当然、15.jpg は 0° で中央に配置された既定の画像です。

したがって、ユーザーが (-)180° まで完全に回転すると、たとえば 3 秒後に 0° に戻ります。しかし、私はアニメーションをできるだけ滑らかにしたいと思っています。どうすればこれを行うことができますか？

4

1 に答える 1

2

アニメーションをできるだけスムーズにするには、他のすべての画像を含む画像である CSS スプライトを使用する必要があります。これにより、アニメーションの開始時にすべてのフレームが読み込まれます。

次に、アニメーションをどれだけスムーズにしたいかに基づいて、指定された時間内に関数を呼び出し、画像の背景プロパティを変更するだけです。または、スプライトを使用していない場合は、別の src を割り当てます。

25 以上のフレーム/秒の値を選択する必要があると思います。フレーム レートが高いほど、アニメーションはよりスムーズになりますが、より多くの CPU が使用されます。

これが基本的なアプローチです

function next_frame() {

  frame += 1;

  // start animation again from the start if last frame reached (optional)
  if ( frame == max_frames ) {
    frame = 0;
  }

  /* change either the class of your image (if you use sprites
     and specified a class for each background position) or the
     background position property directly. If not using sprites,
     assign a different image src based on current frame.
  */

  // call the function again
  setTimeout( next_frame, 1000 / 25 ); // change 25 with your desired FPS value.

}

画像のアニメーションを戻したい場合は、同じアプローチを適用する必要がありますが、フレーム番号は逆になります。

于 2011-09-12T08:30:01.270 に答える