CSS3 タイミング関数:steps()_html/css_WEB-ITnose

steps() 関数を見つけました。それが何なのかわかりませんが、Baidu で検索したところ、次の結果が得られました:

1. 耐え難い過去

CSS3 グラデーション/アニメーションを適用する場合、時間を制御する 。一般的に使用される 3 次ベジェ曲線に加えて、その値には紛らわしい Steps() 関数もあります。多くの関連記事では、この関数の説明は次のように比較的曖昧です:

steps() 最初のパラメータ番号は指定された間隔数です。つまり、アニメーションは段階的な表示のために n ステップに分割され、2 番目のパラメータ番号は指定された間隔数です。パラメータ デフォルトは end で、最後のステップのステータスを設定します。start は終了時のステータス、end は開始時のステータスです。

別の例:

steps には 2 つのパラメータがあります

1. 最初のパラメータは複数のステップで実行する必要があります
2. 2 番目のパラメータは 2 つの値があります
   1. start 最初のフレームは最初のステップのアニメーションの終わりです
   2. end 1 つのフレームはアニメーションの最初のステップです

私は若くて無知なので、steps() 関数を使用するたびに、最初に考えなければなりません。 state、end は初期状態に対応し、最終状態は OOOO、初期状態は XXXX です。走るのはダメだよ！

2. 調べる

騙された後は、組織に助けを求めるしかありませんでした。そこで私は次の規定を見つけました:

steps: 2 つのパラメータを取るステップ関数を指定します。最初のパラメータは正の整数 (0 より大きい) でなければなりません。これはオプションで、値「start」または「end」のいずれかであり、間隔内で値の変更が発生するポイントを指定します。2 番目のパラメータが省略された場合は、値「end」が与えられます。

大まかな翻訳は次のとおりです: ステップ関数は、時間関数の間隔の数を指定します (正の整数である必要があります)。2 番目のパラメーターは、start と end の 2 つの値を受け入れます。それぞれに指定された間隔の開始点または終了点は段階的に変化し、デフォルトは終了です。

この理解はまだ少し抽象的かもしれません:

#demo { animation-iteration-count: 2; animation-duration: 3s; } 

これは、steps(3, start) とsteps(3, end) を適用する関数です。カーブは次のとおりです:

1.steps(3, start)

steps() 最初のパラメータはアニメーションを 3 つのセグメントに分割します。ジャンプポイントを指定すると、アニメーションは各タイミングサイクルの開始点（図の白丸→黒丸）でジャンプします。最初のステップは最初のタイミング サイクルの開始点 (0 秒) で発生するため、表示されるアニメーションの最初のステップ (初期状態) は状態の 1/3 であるため、視覚的なアニメーション プロセスは 1 /3 → 2/3 になります。 →1.

JavaScript に翻訳すると、おおよそ次のようになります:

var animateAtStart = function (steps, duration) { var current = 0; var interval = duration / steps; var timer = function () { current++; applyStylesAtStep(current); if (current < steps) { setTimeout(timer, interval); } }; timer(); }; 

2. ステップ(3, end)

指定されたホップが終了すると、アニメーションは各タイミング サイクルの最後にステップを実行します (つまり、中空写真の丸→黒丸）。最初のステップは最初のタイミング期間 (1 秒) の終わりに発生するため、初期状態は 0% であり、アニメーション期間全体 (3 秒) の完了時にはステップは 100 % 状態にジャンプします。アニメーションも同時に終了するため、100% の状態は表示されません。したがって、視覚的なアニメーション プロセスは 0 → 1/3 → 2/3 になります (デジタル電子機器の非同期クリアを思い出してください。すべての出力端子がハイ レベルになるとクリアがトリガーされるため、すべてがハイ レベルになります)。

同じ内容を JavaScript に翻訳すると次のようになります:

var animateAtEnd = function (steps, duration) { var current = 0; var interval = duration / steps; var timer = function () { applyStylesAtStep(current); current++; if (current < steps) { setTimeout(timer, interval); } }; timer(); }; 

この説明でも混乱する場合は、インタラクティブなデモを参照してください

3. 実践的なアプリケーション

ここまで書きましたが、まだ言いたいことがあります。タイミングに関するもの - 関数:steps() は実際の設計ではほとんど応用できませんが、いくつかの奇妙なテクニックを使用すると、依然としていくつかの良い効果を生み出すことができます:

1. タイミング マスク

CSS3 の円形プログレス バーに関するこの記事では、以下を使用しました。半円を定期的に表示/非表示にするタイミング関数:

$precent: 5; // 进度百分比 $duration: 2s; // 动画时长 @keyframes toggle { 0% { opacity: 0; } 100% { opacity: 1; } } .progress-right { // 初态为 opacity: 0; 动画周期结束后为 opacity: 1; opacity: 1; animation: toggle ($duration * 50 / $precent) step-end; // step-end = steps(1, end) } .progress-cover { // 初态为 opacity: 1; 动画周期结束后为 opacity: 0; opacity: 0; animation: toggle ($duration * 50 / $precent) step-start; // step-start = steps(1, start) } 

ここで重要なのは、アニメーションには 2 つのキー フレームしかないため、step-start と step-end を使用することです。上記を参照してください。 step-start: アニメーションはサイクルの開始時から終了まで 100% にジャンプします

step-end: サイクルの終了まで 0% スタイルを維持します

タイミング関数はすべてのタイミングで動作することに注意してくださいアニメーション全体ではなく、キーフレーム間に 2 つのキー フレームが適用されます (「アニメーション タイミング関数」はアニメーション全体ではなく、キーフレーム間で適用されます)。したがって、これが Zhang Xinxu 先生が記事で思いついたものです。CSS3 アニメーションは徐々に少しずつ待つプロンプト効果。 結論:

ステップスタートは、名前が示すように、フレームごとに、食事ごとに再生することでアニメーションに反映されます

2.

CSS3 で実行アニメーションを実装する この記事では、CSS3 アニメーションを使用してゲーム開発でスプライト アニメーションを実装します。

$spriteWidth: 140px; // 精灵宽度 @keyframes run { 0% { background-position: 0 0; } 100% { background-position: -($spriteWidth * 12) 0; // 12帧 } } #sprite { width: $spriteWidth; height: 144px; background: url("../images/sprite.png") 0 0 no-repeat; animation: run 0.6s steps(12) infinite; } 

其原理是：使用一张含有多帧静态画面的图片，通过切换 background-position 使其变为连续的动画。

四、结语

最近开始注意平常很少注意到的一些属性，虽说是不常用但一翻开也是别有一番洞天的感觉。马上就是新的一年了，这篇文章也算是对这一整年学习的一个交代吧~

诸君，新年快乐，武运昌盛！

（全文完）

原文地址https://idiotwu.me/understanding-css3-timing-function-steps/