1

hmtl5 で画像シーケンスで構成される短いアニメーションを再生する際に、どのアプローチを取るべきかについて誰か提案があるかどうかを聞きたいだけです。ブラウザのサポート範囲が広いほど、iOS で動作する必要があります。キャンバスを想定できます。

要件：

  1. ユーザーの操作なしでアニメーションを開始できる
  2. どのフレームを表示するかを正確に制御します (たとえば、特定のフレームに移動するか、最初のフレームから開始して n: 番目のフレームまで再生します)。
  3. アニメーションを拡大縮小できる (ブラウザ ウィンドウに合わせて)
  4. ~30fps (90 フレーム) で 3 秒以上再生できること
  5. 1280x720 以上の解像度をサポート

ファイル サイズ/パフォーマンスの観点からは、アニメーションをビデオ ファイルとしてエンコードするのが最適ですが、iOS では 1) を満たすことができず、2) を満たすことができない可能性が高くなります。

私が過去に使用した解決策は、フレームを一連の jpeg として個別にロードし、DOM で画像要素を使用するか、フレームをキャンバスに描画してフレームを表示することでした。これはほとんどすべての要件を満たし、読み込みが非常に遅いことを除けば、かなりうまく機能します。そして、私はこの方法を約 20 ～ 30 フレームのアニメーションにしか使用していません。大量の http リクエストと大量のデータが発生します。

一部のアニメーションでは、多くのモーション ブラーを含むフレームが低解像度で保存され、フル解像度のフレームと一致するように表示されるときに引き伸ばされます。これにより、ファイル サイズがいくらか節約され、実際にはそれほど目立ちません。

http リクエストの量を減らす 1 つの方法は、いくつかの画像をスプライト シートに結合することですが、個々のフレームが 1280x720 の場合、すぐに非常に高解像度のスプライト シート画像になってしまい、再生されないと思います。 iOSでいいです。

ここで見逃している他のアプローチはありますか?

4

1 に答える 1

-1

CSS3 キーフレーム アニメーションを使用して、いつでもアニメーションを制御できます。

@keyframes sunrise {
   0% {
      bottom: 0;
      left: 340px;
      background: #f00;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
   }

   66% {
      bottom: 340px;
      left: 40px;
      background: #ffd630;
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
   }
}


#sun.animate {
    animation-name: sunrise;
    animation-duration: 10s;
    animation-timing-function: ease;
}

ベンダー プレフィックスも追加する必要がありますが、フォールバック サポートには modernizr を使用します。

http://www.impressivewebs.com/demo-files/css3-animated-scene/

于 2012-10-03T07:55:29.850 に答える