CSSを使用して、画像シーケンスのスムーズな再生効果を実現する方法は？

スムーズな画像シーケンス再生効果を作成する方法は？

多くのアプリケーションシナリオには、シミュレートされたビデオ再生が必要ですが、素材はビデオではなく、複数の写真です。画像の読み込み時間の違いにより、画像パスを直接交換すると、黒い画面や遅れが簡単に発生する可能性があります。この記事は、効率的でスムーズなソリューションを提供します。

写真の単純なロードは、1つずつ遅延する傾向があるため、より良いソリューションを採用します。すべての写真を1つの大きな画像にスプライスします。画像が同じサイズであると仮定すると、それらを水平に長い絵にスプライスします。次に、CSSと@keyframesアニメーションのbackground-position属性を使用して、背景画像のオフセットを制御して画像スイッチングを実現します。

たとえば、3つの500x300ピクセルの写真があり、ステッチ後に1500x300ピクセルの長い写真が撮影されます。次のCSSコードを実装します画像ループ再生：

 。容器 {
  幅：500px;
  高さ：300px;
  背景：url（ "split image"）左 /自動100％繰り返し。
  アニメーション：再生タイムステップ（3、start）0S Infiniteを再生します。 / *ステップ（写真の数、開始） */
}

@KeyFrames Play {
  0％{background-position：0 0; } /*写真1* /
  33.3％{background -position：-500px 0; } /*写真2* /
  66.7％{background -position：-1000px 0; } /*写真3* /
  100％{background-position：0 0; } /*最初の写真に戻る* /
}

コードでは、 .containerコンテナサイズを定義し、 backgroundプロパティはステッチされた画像を背景として設定し、 animationプロパティは再生アニメーションを定義します。 steps(3, start)により、画像が段階的に切り替えられ、 infinite無限ループを意味します。 background-positionディスプレイ領域を制御します。重要なのは、各画像のオフセットを正確に計算し、 @keyframesに書き込むことです。再生時間は、写真の数と必要な速度に従って調整されます。この方法はシンプルで効率的であり、1つずつロードし、スムーズな画像シーケンスの再生を実現する遅延問題を回避します。

以上がCSSを使用して、画像シーケンスのスムーズな再生効果を実現する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。