カスタムイージング関数を利用したWAAPIアニメーションです。鳥が羽ばたくアニメーションはCSS Animationsで作成し、左右と上下に移動するアニメーションをWAAPIで作成しています。アニメーションの切り替えには […]
続きを読む日: 2018年6月25日
11_2 手作りイージング関数を使ったキャンバスアニメーション
Web Animations APIとは直接は関係しませんが、イージング関数に渡す変数t, b, c, dを手作りし、得た結果を反映させるキャンバスアニメーションを作成します。1秒かけて、青い円が20から400まで移動し […]
続きを読む11-1 そもそもイージング関数は一体何を…
イージング関数とは、アニメーションに指定されたキーフレーム間のプロパティ値を補間するときに使用される関数で、次のようなグラフで表されます。一般的なイージング関数は、0秒の始まりから1秒の終わりまでの間に、0から1までの数 […]
続きを読む11 カスタムイージング
CSS Animationsでは、animation-timing-functionプロパティに cubic-bezier()関数が返す値を指定することで、独自のタイミング関数(以降、イージング関数)が使用できます。We […]
続きを読む