CSSを使用して画像フレームアニメーションと曲線の動きを実装する

すべてのアニメーションの基本原理は、対応する画像を短時間で次々に表示し、視覚的に動いているように見せることです。

この記事では主に4と5について説明します。

額縁アニメーション

実現したいアニメーション効果がより複雑で、開発スケジュールが厳しい場合は、GIF を使用してアニメーションを実現するのが最も低コストで最も効果的なソリューションです。たとえば、次のアニメーション効果:

しかし、アニメーションを特定の時間に一時停止し、一定時間後にブレークポイントからアニメーションの再生を続行したい場合、GIF 画像を使用してこれを実現することはできません。 GIF画像のアニメーションを一時停止する方法はありません。このとき、額縁アニメーションの使用を検討できます。

ピクチャーフレームアニメーションは、フロントエンドのコードを使用して GIF 画像の原理を実装するものと見ることができます。

上記のアニメーションは、（仮に）100 フレーム、つまり 100 枚の画像に分割することができ、その後、コードを使用して 100 枚の画像を順番に表示するように制御します。また、いつでも一時停止できます。

http リクエストを節約するために、100 枚の画像を Sprite 画像に結合し、background-position を使用してどの画像を表示するかを制御します。非常に優れた画像生成ツールを推奨します: GKA

100 枚の画像から縦型のスプライトを作成しました。

コードでは、アニメーションを実現するために、DOM 要素の背景位置を更新するだけで済みます。

最初に注意すべき点は、background-position が DOM 要素に対する背景画像の開始位置を設定することです。

DOM要素と画像の幅と高さはどちらも100 * 200であると仮定します。

---css

#ラッパー{
    幅: 100ピクセル;
    高さ: 200px;
    背景画像: url('Sprite.png');
    background-size: 100% 10000%; // 写真は100枚あり、100*100
    背景繰り返し: 繰り返しなし;
}

---js

var domEl = document.querySelector('#wrapper');
var n; // n: スプライトチャートに表示する画像の数、n >= 0 && n<100
domEl.style.backgroundPosition = `0px ${-n*200}px`; // これは負の値であることに注意してください

n の値を制御するには js を使用するだけでよく、いつでも簡単にアニメーションを実行したり一時停止したりできます。

上記の例では、DOM 要素の幅と高さは固定されています。固定されておらず、適応的にしたい場合は、画像のアスペクト比に応じて、padding-top を通じて DOM 要素のアスペクト比を設定する必要があります。現時点では、background-position では特定の値は使用できなくなり、パーセンテージを使用する必要があります。ここで注意すべき点が 1 つあります。

background-position のパーセンテージ値を取る場合、背景画像の幅と高さにパーセンテージを掛け合わせるだけで最終的なオフセットが得られると考えるのが自然ですが、そうではありません。計算式は以下のとおりです。

x オフセット = (要素の幅 - 背景画像の幅) * x パーセンテージ
yオフセット = (要素の高さ - 背景画像の高さ) * yパーセンテージ変換:

x パーセンテージ = x オフセット / (要素の幅 - 背景画像の幅)
y パーセンテージ = y オフセット / (要素の高さ - 背景画像の高さ)

上記の例では具体的には次のようになります。

// 各小さな画像の幅が w、高さが h で、n 番目の画像を表示する必要があり、合計で 100 枚の画像があると仮定すると、var xPercent = 0;
var yPercent = -hn / (h - 100h) * 100 = n / 99 * 100;
domEl.style.backgroundPosition = `${xPercent}% ${yPercent}%`;

ついに額縁アニメーションを実現できました。もちろん、アニメーション効果を完全に制御する必要がない場合は、JS を使用せずに CSS を直接使用することもできます。または、GIF アニメーションを使用することもできます。

CSS 曲線の動き

曲線的な動きの場合は、SVG またはキャンバスを使用するのが適しています。ただし、曲線パスがそれほど厳密でない場合は、SVG とキャンバスの使用は少し面倒になる場合があります。 CSS を直接使用して、曲線のような動きを実現できます。放物線のような動きを例にとると、その効果は次のようになります。

変位曲線上の点における接線が速度であり、速度は x 軸上の速度と y 軸上の速度に分解できます。つまり、上記の動きは、水平方向の x 軸の動きと垂直方向の y 軸の動きに分解できます。感覚的な観点から見ると、x 軸の動きがほぼ均一であるのに対し、y 軸の動きがどんどん速くなっていることは容易にわかります。

さらに、動きが 2 方向に分解されるため、最終的な効果を実現するには、アニメーションを個別に記述するための 2 つの DOM が必要になります。

---html

<div クラス = 'x-コンテナ'>
    <div class='y-container'></div>
</div>

---css

.x-コンテナ{
    幅: 50px;
    高さ: 50px;
    アニメーション: xMove 2s linear;
}
.yコンテナ{
    幅: 50px;
    高さ: 50px;
    境界線の半径: 50%;
    背景色: #000;
    アニメーション: yMove 2s cubic-bezier(.98,.03,.91,.77);
}
@keyframes x移動{
    0% {
    }
    100% {
      変換: translateX(400px);
    }
}
@keyframes y移動{
    0% {
    }
    100% {
      変換: translateY(400px);
    }
}

2 つの方向の動きを組み合わせると、上記の効果が得られます。アニメーション属性のモーションカーブについては、次の Web サイトを参照してください。

https://cubic-bezier.com/

それほど厳密でない曲線の動きを実現したい場合は、CSS アニメーションを直接使用することもよい選択です。