CSS3 アニメーションのフレームごとのアニメーション_html/css_WEB-ITnose

CSS3 のフレーム単位のアニメーションを理解するには、まずフレーム単位のアニメーションとは何かを明確にする必要があります。

Wikipedia で定義を見てください:

フレームごとのアニメーションとしても知られるストップモーション アニメーションは、さまざまな画像を使用して各フレームを継続的に再生してアニメーション効果を生み出すアニメーション テクノロジです。

つまり、フレームごとのアニメーションを実現するには 2 つの条件が必要です: (1) 関連付けられた異なる画像、つまりアニメーション フレーム。 (2) 連続再生。

私たちの子供時代の思い出、本をめくる、彼が達成したのはフレーム単位のアニメーションです:

(画像提供: Zhihu)

フロントエンドのフレーム単位のアニメーション実装計画

CSS3 フレームについて議論する前に- フレームごとのアニメーションの詳細については、まずフレームごとのアニメーションを実装するためのフロントエンド ソリューションについて一般的に理解しましょう。

実際には、GIF、JavaScript、CSS3 アニメーションの 3 つのテクノロジーしかありません (ビデオはあらゆるタイプのアニメーションを実現できますが、まだ含まれていません)。

前述したように、フレーム単位のアニメーションを実現するには、(1) アニメーション フレーム、(2) 連続再生の 2 つの条件が必要です。

これら 3 つのテクノロジーがどのようにして上記の条件を達成するのかを注意深く分析してみましょう:

(1) gif

タッチ スクリーン ページでは、アニメーションの読み込みに gif がよく使用されます。たとえば、「Momo Not Alone Dinner」のローディング アニメーション:

gif は複数のアニメーション フレームを持つことができ、連続再生はそれ自身の属性であり、ループするかどうかもそれ自体で決定されます。低コストで使いやすい、細部のアニメーションを実現するためによく使用されます。

しかし、その欠点も非常に明白です:

• 画質の点では、GIF はサポートしている色が少なく (最大 256 色)、アルファ透明度のサポートが不十分で、画像のエッジには深刻なギザギザがあります
• インタラクションの観点からは、再生や一時停止などを直接制御することはできません。再生回数、柔軟性が低いです。
• パフォーマンスの点では、GIF はページ上で周期的なペイントを引き起こすため、パフォーマンスが低下します。

(2) JavaScript

JS と CSS3 では、背景画像にアニメーション フレームを挿入するのが一般的です。

違いは、JS がスクリプトを使用してアニメーションの連続再生を制御することです :

• 要素の背景画像を直接変更できます
• 背景を変更することで、アニメーション フレームをスプライト画像にマージすることもできます-位置

または、「モモだけじゃないディナー」の例:

お弁当を取りに手を伸ばすアニメーションがあり、合計 19 フレームあり、11 フレーム目にインタラクションがあります。スプライト画像を背景に配置し、さまざまなスタイルを介してさまざまな背景位置を実装し、JS を使用してスタイル名を変更します。柔軟なインタラクション。

(3) CSS3 アニメーション

CSS3 は実際に、アニメーション タイミング関数のステップ関数 step(number_of_steps, Direction) を使用して、フレームごとのアニメーションの連続再生を実現します。

モバイル側では、CSS3 アニメーションは JS と比べて互換性が高く、多くの最適化がブラウザーの下部で完了するため、使いやすく効率的です。

そのため、CSS3 のフレームごとのアニメーションはタッチ スクリーン ページで広く使用されており、以下で詳しく紹介します。

CSS3 フレーム単位アニメーションの実装

(1) アニメーション フレームをスプライト画像に結合する

タッチ スクリーン ページでは、アニメーションがページ スタイルの実装の役割を引き受けることが多い (つまり、置き換える必要がない)。画像を要素の背景 (background-image) に配置します。

フレームごとのアニメーションにはさまざまなアニメーション フレームがありますが、background-image の値を変更することでフレームを切り替えることができますが、複数の画像があると複数の HTTP リクエストが発生するため、ファイル管理には役立ちません。

より適切なアプローチは、すべてのアニメーション フレームをスプライトにマージし、background-position の値を変更してアニメーション フレームを切り替えることです。したがって、コマ送りアニメーションは「スプライトアニメーション」とも呼ばれます。

JD Daojia のタッチ スクリーン ページ「家に届く新年の商品」を例に挙げます。

このアニメーションには 3 つのフレームがあり、それらを .p8 .page_key の背景に配置します。

.sprite-rice-1,.sprite-rice-2,….sprite-rice-19{	background-image:url(http://7xnvb2.com2.z0.glb.qiniucdn.com/img/rice.jpg);	background-repeat:no-repeat}

(2) ステップを使用してアニメーション再生を実装します

steps は、2 つのパラメーターを含むステップ関数を指定します。

最初のパラメーターは、関数内の間隔の数を指定します (正の整数である必要があります)。 2 番目のパラメータはオプションで、各間隔の開始時または終了時にステップ変更が発生することを指定します。開始と終了の 2 つの値を受け入れます。デフォルトは終了です。

(W3C から参照)

W3C のこの図を使用して、ステップの動作メカニズムを理解します:

上の例に戻って、キーフレームで各アニメーション フレームを定義します:

.sprite-rice-1{background-position:-1800px 0}.sprite-rice-2{background-position:-900px -489px}….sprite-rice-19{background-position:-1200px 0}

次に、アニメーションを追加します:

.p8 .page_key {    position: absolute;    width: 572px;    height: 586px;    background-image: url("../img/p8.png");}

最初のパラメータが 1 なのはなぜですか?

前述したように、steps はanimation-timing-functionの属性値であり、W3Cでは次のように説明されます。

For a keyframed animation, the ‘animation-timing-function’ applies between keyframes, not over the entire animation.

也就是说， animation-timing-function 应该于两个 keyframes 之间，而非整个动画。在上面的 keyframes 中，我们已经把每个帧都写出来了，所以两个 keyframes 之间的间隔是1。

更加简便的写法？

既然说 steps 第一个参数是指函数的间隔数量，那么我们就可以把 keyframes 的计算直接交给 steps 来完成。

.p8 .page_key{	-webkit-animation: p8 steps(3,end) 1.5s infinite;}@-webkit-keyframes p8 {    100% {background-position: 0 -1758px;}}

以上两种写法效果是等同的。

CSS3 逐帧动画使用技巧

（1）step-start 与 step-end

除了 steps 函数， animation-timing-function 还有两个与逐帧动画相关的属性值 step-start 与 step-end ：

• step-start 等同于 steps(1,start) ：动画执行时以开始端点为开始；
• step-end 等同于 steps(1,end) ：动画执行时以结尾端点为开始。

（2）动画帧的计算：

$spriteWidth: 140px; // 精灵宽度 @keyframes ani {  100% {    background-position: -($spriteWidth * 12) 0; // 12帧  }}

（3）适配方案：rem+scale

我们知道，rem 的计算会存在误差，因此使用雪碧图时我们并不推荐用 rem。如果是逐帧动画的话，由于计算的误差，会出现抖动的情况。

那么在触屏页中，如何实现页面的适配？

这里小编提供一个思路：

• 非逐帧动画部分，使用 rem 做单位；
• 逐帧动画部分，使用 px 做单位，再结合 js 对动画部分使用 scale 进行缩放。