CSS3を深く理解する アニメーションフレームアニメーション（ステップ）_html/css_WEB-ITnose

著者: Aaron のブログ

ウェブサイト: http://www.cnblogs.com/aaronjs/p/4642015.html

--------------------- ----- -------------------------------------- ----- -------------------------------------- ----- --------

私は 5 年前から CSS3 を使用していますが、会社のプロジェクトを含め常に最先端のテクノロジーでした。

最近、MOOC.com の Qixi Festival テーマについて書いていて、たくさんの CSS3 アニメーションを使用しましたが、実際に落ち着いて CSS3 アニメーションのさまざまな属性を注意深く検討してみると、それはまだ非常に不十分であることがわかりました。ここで、フレームアニメーションのsteps属性についての私の理解を書き留めておきます

CSS3アニメーションには8つのプロパティがあることがわかっています

animation-name

animation-duration
animation-detailed
animation-iteration-count
animation-direction。
animation-play-state
animation-fill-mode
animation-timing-function

1～7のほとんどを紹介しましたが、animation-timing-functionは時間を制御する属性です

よく使われるcubicに加えて値の選択にはベジェ曲線、紛らわしいステップ()関数もあります

デフォルトではイーズモードでアニメーショントランジションが行われ、各キーフレームの間にトゥイーンアニメーションが挿入されるため、アニメーション効果は一貫しています

イーズに加えて。 、線形や三次ベジェなどの遷移関数はトゥイーンを挿入します。ただし、一部のエフェクトはトゥイーンを必要とせず、キーフレーム間をジャンプするだけで済みます。この場合、ステップトランジションメソッドを使用する必要があります

animation-timing-function はアニメーションのスピードカーブを指定します

上記の使用方法が示されています。 w3school の Web サイトにありますが、抜けています 非常に重要なステップです

簡単に言うと、基本的に線形グラデーションアニメーションを実装するためにアニメーションを使用しています

たとえば

位置は、次の位置で開始点から終了点まで直線的に変化します一定時間

サイズは一定時間で線形に変化します
色の変化の直線性など

線形アニメーションの効果を参照してください: http://sandbox.runjs.cn/show/5u3ovsfb

CSS を次のようにインターセプトします

.test1 {    width: 90px;    height: 60px;    -webkit-animation-name: skyset;    -webkit-animation-duration: 2000ms;    -webkit-animation-iteration-count: infinite; /*无限循环*/    -webkit-animation-timing-function: linear;}@-webkit-keyframes skyset {    0% { background: red;}    50%{ background: blue}    100% {background: yellow;}}

timing-function: 線形は、2 秒以内に均一に変化するアニメーションを定義します。赤から青、黄色への移行は非常に線形な色の変化です

代わりにフレーム アニメーション効果を実現したい場合は、線形変化の場合は、ステップ値を導入する必要があります。つまり、トランジション効果はなく、1 フレームの変化です

テスト フレーム アニメーションも見ることができます: http://sandbox.runjs。 cn/show/t5xqz6i4

steps を理解する

steps 関数はステップ関数を指定します

最初のパラメーターは時間関数の間隔の数を指定します (正の整数である必要があります)

2 番目のパラメーターはオプションであり、2 つの値を受け入れます: start と end、各間隔の開始または終了でのステップ変化を指定します。デフォルトは end です。

step-start は、steps(1,start) と同等で、アニメーションは 1 つのステップに分割され、start の左端の部分がアニメーション実行時の開始となります。ステップ(1,end): アニメーションは 1 つのステップに分割されます。アニメーションの実行は終了エンドポイントから開始され、デフォルト値は end です。

W3C 仕様のtransition-timing-function を見てください

steps の最初のパラメータの誤った理解:

steps(5, start)

steps() 最初のパラメータ番号は、指定された間隔番号です。アニメーションは段階的に表示するために n ステップに分割されており、ほとんどの人はキーフレームに書かれた変更の数として理解していると推定されます

例:

@-webkit-keyframes circle {    0% {}    25%{}    50%{}    75%{}    100%{}}

私はずっと 5 のステップ (5、開始) だと思っていました。 ) はキーフレームの 0 を指します % 25% 50% 75% 100% 5 つの等間隔に分割します

例を見てみましょう

キーフレームのキーフレームにルールが 2 つしかない場合、長さ 400 ピクセルのスプライト画像があります

@-webkit-keyframes circle {    0% {background-position-x:0;}    100%{background-position-x: -400px;}}    

この時点でステップ (5、開始) を設定すると、0% の 5 つのステップが 100% であるため、5 つの画像にフレーム アニメーションの効果があることがわかります。ルールは 5 つの等しい部分に分割されます

実際、このようなキーフレーム効果は内部で実行されます

@-webkit-keyframes circle {    0% {background-position-x: 0;}    25% {background-position-x: -100px;}    50% {background-position-x:-200px;}    75%{background-position-x: -300px;}    100%{background-position-x: -400px;}}　　

このルールを少し変更して 50% の状態を追加します

@-webkit-keyframes circle {    0% {background-position-x: 0;}    50% {background-position-x: -200px;}    100%{background-position-x: -400px;}}

次に、steps(5, start) を使用して同じ効果を実行します) はめちゃくちゃになります

この時点では、非常にわかりにくいので、最初のパラメータのターゲット ポイントを理解することが重要です。まず核心点を紹介します。

timing-function は、2 つのキー フレームごとに機能します。アニメーション全体

それでは、最初のパラメータは理解しやすいです はい、ステップの設定はキーフレーム全体ではなく 2 つのキーフレームの間のものであるため、最初のパラメータは毎回のステップの変更に対応します

つまり、それはまた0 ～ 25 の間を 5 回変更します、? 25 ～ 50 の間で 5 回変更します、50 ～ 75 の間で 5 回変更します、など各区間の開始点または終了点です。終了点でのステップ変更です。デフォルトは終了です

ケースを通してステップスタートとステップエンドの違いを見てみましょう

@-webkit-keyframes circle {    0% {background: red}    50%{background: yellow}    100% {background: blue}}

ステップスタート: 黄色と青が相互に切り替わります

step-end: 赤と黄色が相互に切り替わります 切り替えると

両方のパラメータは前部と後部を選択的にスキップし、開始は 0% スキップし、終了は 100% スキップします

step-start は、変更処理中の次フレームの表示効果を伴うインターバルアニメーションなので、0%から50%をそのまま黄色で表示します

step-endは上記とは逆で、インターバルアニメーションを前フレームの表示効果で埋めていくので、0%～50%がそのまま赤表示になります

w3cよりstepの動作機構図を引用

まとめ:

steps 関数。2 つのパラメーターを渡すことができます。最初のパラメーターは 0 より大きい整数です。インターバル アニメーションを指定された数の小さなインターバル アニメーションに分割し、2 番目のパラメーターに基づいて表示効果を決定します。

2番目のパラメータを設定した後は、実際にはステップ開始とステップ終了と同義であり、分割された小区間アニメーションで表示効果が判断されます。以下のことがわかります:steps(1, start) は step-start に等しく、steps(1, end) は step-end に等しい

重要な点は、タイミング関数は 2 つのキー フレームごとに動作し、キー フレームごとに動作するということです。アニメーション全体。

デモ: http://designmodo.com/steps-css-animations/