CSSアニメーション属性キーフレームの詳細な説明

コラムを更新してからどれくらい経ったでしょうか?半年ですか？今年の後半は、まさに離陸、つまり文字通りの立ち上げを迎えるほど忙しい時期です。前半は、私に残されたわずかな時間を Python に費やしましたが、今ではそのほとんどを忘れてしまいました (「Liangliang」という曲を自分に捧げました)。後半は JavaScript に費やし、ついに勇気を出して JS を体系的に学び始めました (チャンネルを変えて、Fish Leong の「Courage」を歌い始めました)。当初は、WebAPI の学習が終わるまで待ってから究極の一手を使うつもりでした。JavaScript と組み合わせた SVG+CSS アニメーションは、急速に前進する翼を持った虎のようなものです。しかし、Nuggets の著者グループでの活発な議論を見て、私は突然、自分が全くの他人のように感じました (Tanya Chua をここに入れるべきでしょうか?)。そこで、自分の存在をアピールするために別の記事を書くことにしました。

この記事はもともと、小冊子「SVG+CSS アニメーション」から抜粋したものです。さまざまな不可解な理由により、小冊子は行き詰まって、行き詰まって... 出発の時期はどこにも見えません。ただし、キーフレームはさまざまな時点でのアニメーションの状態を制御し、72 の変形の最終的な形を決定する重要な要素であるため、この更新コラムはキーフレームから始まります。冊子については、配布できれば他のケースに置き換えるだけで済みますが、それはまた後の話です。

キーフレームの基本的な概念はここでは省略しますが、以下は退屈な内容ばかりです。

事例：止まることなく前進し続ける輪

キーフレームについてのみ説明しているため、単純な水平方向の変位アニメーションのみを作成しました。したがって、この記事は SVG とは独立して存在し、CSS3 アニメーション プロパティにのみ関連します。

始点から終点まで転がろうとしている円です。全体の行程は 800 ピクセルですが、途中の 3 か所に 3 つの駅を設定しました。ここで、円が駅に入り、途中でしばらく停止するようにキー フレームを定義する必要があります。

1. 最も基本的なことから始めましょう

CSS 部分は、4 秒で完了する最も基本的な変位アニメーションを定義します (線形速度の場合 - キーフレーム デモンストレーション 1 - 基本)。

@keyframes 移動{
0%{transform:translateX(0)}
100%{transform:translateX(800px)}
}
.c_move{animation:move 4s linear both} /*both: 移動後、終点に留まる*/

これは主に、無限ループアニメーションが定義されている場合に有効になります。

基本設定では、当然ながら、特徴のない平凡な基本的なアニメーションが生成されます。

2. 遅れたスタート

次に、円が動き始める前に 2 秒間開始点に留まるようにします。私の最初の反応は、アニメーション プロパティで遅延アニメーション -遅延を使用して、時間を 2 秒に定義することです。これでよろしいでしょうか?わかりました。しかし、ここではより高度なアプローチを紹介します。キーフレームを定義するときは、多くのパーセンテージを使用します。ここでのパーセンテージ値は時間ノードを表します。つまり、キーフレームはさまざまな時間ノードの状態属性を定義します。別の画像を見てみましょう。この画像を上記のパスのデモンストレーションと混同しないでください。これはアニメーションのタイムラインの画像です。

円を開始点に 2 秒間とどめるというのは、単なる表現上の表現です。アニメーション定義言語に翻訳すると、4 秒のアニメーション サイクルの最初の 2 秒間はアニメーション効果がないことを意味します。そこで、アニメーションのルールを次のように定義します。

@keyframes 移動{
0%{transform:translateX(0)}
50%{transform:translateX(0px)}
100%{transform:translateX(800px)}
}

上のタイムラインの分割と比較すると分かりやすいですが、このようにして、開始点に2秒間留まり、次の2秒間でアニメーション全体を完了させるという効果が得られます。ここでは0%, 50%{transform:translateX(0)}のように記述するより簡単な方法も使用できます。同じ属性をコンマで区切って組み合わせることができます。ケース-キーフレームデモンストレーション-遅延開始

3. 早めに終わらせる

開始が遅れたことを根拠に、早期終了を推測することができます。区別するために、アニメーションを 3 秒早く終了させます。いつものように、まずタイムラインの分析を描きます。

対応するキーフレームは次のように定義されます。

@keyframes 移動{
0%{transform:translateX(0)}
25%、100%{transform:translateX(800px)}
}

最終的な結果サークルは、4 倍の速度で旅を完了し (結局、元の 4 秒の時間を 1 秒に圧縮する必要があります)、最後にアニメーション時間全体が終了するまでゆっくりと待機する必要があります。ケース-キーフレームデモンストレーション-早期終了

4. 途中降機

準備されたステーションは、これで役割を果たすことができます。円が次のように移動することを期待しています。全体の行程で、円は最初のステーションに 1 秒間だけ留まり (200 ピクセル移動した後)、わずかな調整を行います。これをタイムラインにマッピングするとどのように見えるでしょうか?

ここで、説明が必要な奇妙に見える数字がいくつか表示されます。まず 1 つ明確にしておきましょう。タイムラインを分析する場合、最終的に取得したいのはタイム ノードです。私たちの設計によると、動きが1秒間続く場合、滞在に必要な時間は3秒です。3秒間の時間は2つの部分に分かれています。最初の部分は最初の200pxで、2番目の部分は最後の600pxです。線形均一速度であるため、タイムラインをA + B + Cの3つの部分に分割すると、期間Aで200pxが実行され、期間Cで600pxが実行されます。Aに対応する時間は0.75秒と計算され、Cに対応する時間は2.25秒、Bの時間は1秒の滞在時間です。次に、対応するパーセンテージに変換します。これは、真ん中の最後の2つの時間ノードの計算方法です。タイムラインを解析すると、CSS 部分の定義が簡単に把握できるようになります。

@keyframes 移動{
0%{transform:translateX(0)}
18.75%、43.75%{transform:translateX(200px)} /*1秒滞在に相当*/
100%{transform:translateX(800px)}
}

ケース-キーフレームのデモンストレーション-最初のステーションに1秒間滞在する

5. ワームホールのように前進する

難易度を上げるために、途中のどの地点でも停止することはもはや問題ではありません。 1つの地点で停止することも、複数の地点で停止することも同じです。 今、私は円をジャンプするように前進させます。 最初の駅に入った後、1秒間滞在し、2番目の駅を横切り、直接3番目の駅に入り、1秒間滞在して、旅を完了します。空間折り畳みの原理によれば、遷移は 200 と 600 で発生しました。分析タイムライン:

赤い部分に特に注意してください。これは、時間の変更なしに 200 ピクセルシフトするトランジションの時点です。タイムライン分析によると、CSS 部分は理論的には次のようになります。

@keyframes 移動{
0%{transform:translateX(0)}
25%,50%{transform:translateX(200px)}
50%,75%{transform:translateX(600px)}
100%{transform:translateX(800px)}
}

効果は何ですか？

想像していたのと全然違う。何が問題なの？ブラウザは 50% の時点でのあなたの本当の考えを知りません。あなたがそれを間違って定義したとだけ考えます。異なるプロパティ値を持つ 2 つの同一の 50% キーフレームがある場合、ブラウザは最初のキーフレームを自動的に無視し、最後の有効な値を参照として使用します。したがって、上記の定義は、ブラウザに次のメッセージを伝えることと同じです。

@keyframes 移動{
0%{transform:translateX(0)}
25%{transform:translateX(200px)}
50%,75%{transform:translateX(600px)} /*600px移動した後1秒間留まる*/
100%{transform:translateX(800px)}
}

このため、最初の駅に到着した後、列車は 3 番目の駅に向かって加速し、その後停止して残りの行程を完了するように見えます。ゲームはどんどん面白くなってきたので、ブラウザを騙してみるのもいいかもしれません。同じ時点に定義できる属性値は 1 つだけなので、その属性値の隣に時点を追加して定義するとどうなりますか?

@keyframes 移動{
0%{transform:translateX(0)}
25%,50%{transform:translateX(200px)}
50.0001%,75%{transform:translateX(600px)} 
100%{transform:translateX(800px)}
}

上に表示される **50.0001%** の時点を見て、何が起こったと思いますか?これは、前述のいわゆる「ブラウザを騙す」方法です。 50%→50.0001%の範囲で、400px（200→600）の変位変化が発生しました。すると、次の効果が得られます: case-keyframe Demonstration-transition

原理的には、これは視覚的な錯覚であり、非常に短い時間内に 2 つの位置の間で変位が発生します。時間が非常に短いため無視できるため、ジャンプの錯覚が生じます。

要約する

上記の代表的な例を読んで、キーフレームの定義について新たな理解が得られましたか? 「遅延開始」と「早期終了」という 2 つの要件は、遅延時間とアニメーション サイクル時間を定義して同じ効果を実現することで実現できると思われるかもしれません。ただし、無限ループ アニメーションの場合、遅延開始は 1 回しか機能しません。アニメーションが繰り返しサイクルに入り始めると、このプロパティ設定はサポートされなくなります。したがって、可能であれば、キーフレーム定義を使用して実行してみてください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。