animation-timing-function
animation-timing-function
animation-timing-functionサンプル
animation-timing-function
[animation-timing-function] はアニメーション全体ではなくキーフレーム間に適用されるアニメの仕方となっています。
webでこの説明を記事にしているページで、比較サンプルを掲載してたりするのを見かけますが、1つのアニメだけでタイミングだけの比較をしている場合が多いので、
案外重要ポイントだと思われる「キーフレーム間」の意味がわかりやすくなるように、同じアニメだけどキーフレーム数が違うサンプルを並べて比較できるようにしてみました。
例1 例2の内容【timing-function記事のお約束の、見比べる実験】
timing-function記事ではお約束の比較サンプルです。他ではみかけないので、キーフレームが異なる場合を実験してみました。
タイミングが【linear】なら同じアニメですが、[-timing-function] の値で、異なる動作になるのが直感できるかと思われます。
【例1】が2sでwidth:0px(0%) → width:240px(100%)に変化を反転繰り返し。
【例2】は2sでwidth:0px(0%) → width:120px(50%) → width:240px(100%)に変化を反転繰り返し。
※ウインドウサイズが小さい時は240pxを180px、120pxを90pxにしています。
例2は間に50%の値があるので、2段階にtiming-functionしてます。
また、例1では0% - 100%で反転繰り返しアニメなので、 step-start や step-end は[終了]が次の[開始]になり、アニメしない印象になってますが、例2の方では50%があるのでちゃんと変化しているのが確認できます。
0% - 100% アニメだけ(例1)で確認すると step-start や step-end がよくわからないかもしれない、などと思ったので、例2の 0%-50%-100% を並べて比較しました。
例1のアニメ設定、キーフレーム設定を表示
例2のアニメ設定、キーフレーム設定を表示
例1へ
例3の内容【コマ漫画風の画像表示】
縦や横に長い画像を作り、マウスホバーで画像の表示位置を変更する手法は、主にボタン画像やメニューの背景画像などによくつかわれるテクニックになっていますが、アニメの「timing-function」に「step」という仕様があるのはまさにこのテクニックでアニメをコマ送り表示するために用意されたものかもしれない、などと思ったりします。
とりあえず、アニメ（キーフレーム）の作り方により、「step-start」や「steps(数値,start)」を指定することでサンプルのようにコマ漫画的に表示するアニメが作れたりします。
企業サイトなら、広告バナーアニメに演出として使う、などが考えられるかと思います。
同じ表示秒数で、計算させて楽に作りたい時は、「steps(数値,start)」（※表示される画像サイズを同じにしてつなげる調整が必要）、各コマの表示秒数を変えて演出したい時は「step-start」を使う、などが考えられるかと思います。
ちなみに、例3のアニメしている画像
※ガンプラ等でCG作って掲載してた趣味のブログ用に作ったものを加工しています。
※作ったのはかなり昔ですが、富野監督の作劇の本を参考に、MSの位置が入れ替わるようなカメラワークを演出してみたり…。
アニメ設定、キーフレーム設定を表示
1つ目、2つ目は同じアニメに見えますが、アニメの指定方法が異なっています。
[1つ目] はキーフレームの方で 0% 25% 50% 75% 100% のtopの位置を指定し、アニメ設定は 8s step-start で、8sの 0% 25% 50% 75% 100% の秒数時点で step-start (★%になった時点で表示) しているアニメです。
[2つ目] はキーフレームの方は 0% 100% のtopの位置を指定しているだけで、アニメ設定の方で、8s steps(4,start) を設定し、8sを5分割したstart位置で自動的にtopの位置が計算されて表示しているアニメになっています。
※自動的に高さを分割するタイプなので、画像のコマの高さを同じサイズにする必要があります。
例3へ
サンプルの内容【例4 雨の水滴っぽい感じ】
特に意味はないですが「雨の水滴」っぽい演出です。
アニメ設定、キーフレーム設定を表示
例4へ
サンプルの内容【例5 カウントダウンイメージ】
次のページの遅延の項目で一旦作りかけたカウントダウンですが、コマ漫画アニメの方が簡単で、最後だけ少し長めに表示したりの調節がいろいろできるので、コマ漫画アニメの方法でカウントダウンイメージを作ってみました。
例5の画像
アニメ設定、キーフレーム設定を表示
例5へ
ネタコラム
キーフレームが違うアニメで比較しているweb記事をあまり見かけないので、作ってみた、というのが animation-timing-function のメインの実験ネタとなります。
webでの説明ではアニメの動作指定で @keyframes ta_1{ 0%{}…100%{} } と記述するものをキーフレーム、例の ta_1 をキーフレーム名と呼びますが、このwebではわざとアニメ名などと書いたりしてます。(わかりづらいので)
animation-timing-functionの説明でキーフレームに対して適用されます、の「キーフレーム」は0%{…}や10%{…}などの部分を意図しているかと思いますが、全体もキーフレームなどと呼ぶのでわかりづらいのではないかと思ったりします。（なのでアニメ名とか勝手に呼んでます）
0% と 100%しかない場合は全体を意味してて、変化のタイミングは1回ですが、0% 50% 100% 等の場合は 0% → 50% と 50% → 100% の2回、変化のタイミングが表現されるということになります。
animationのプロパティ
- animation-name CLICK
- animation-duration CLICK
- animation-timing-function CLICK
- キーフレームの始まりから終わりまでの間のアニメの仕方を指定
キーフレームのブロック内で定義されたアニメーションタイミング関数は、そのキーフレームに対して適用されます。一方、キーフレームでタイミング関数が指定されていない場合は、アニメーション全体に対して指定されたタイミング関数が使用されます。(引用：[MDN] animation-timing-function )
3次ベジェ曲線で変化を設定。開始点Aと終了点Dは決まってるので、Aからの接線ポイントBやDからの接線ポイントCを指定。
「 A,B,C,D は それぞれA(xa,ya)=A(0,0), D(xd,yd)=D(1.0,1.0)は省略で、
BとCの座標をcubic-bezier(xb,yb,xc,yc)で指定する。
変化量は文字でも可能。
ease = cubic-bezier(0.25, 0.1, 0.25, 1.0) (初期値)
linear = cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in = cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out = cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out = cubic-bezier(0.42, 0, 0.58, 1.0)
- animation-delay CLICK
- animation-iteration-count CLICK
- animation-direction CLICK
- animation-fill-mode CLICK
- animation-play-state CLICK
ページトップへ