日: 2018年6月25日

カスタムイージング関数を利用したWAAPIアニメーションです。鳥が羽ばたくアニメーションはCSS Animationsで作成し、左右と上下に移動するアニメーションをWAAPIで作成しています。アニメーションの切り替えには […]

続きを読む

Web Animations APIとは直接は関係しませんが、イージング関数に渡す変数t, b, c, dを手作りし、得た結果を反映させるキャンバスアニメーションを作成します。１秒かけて、青い円が20から400まで移動し […]

続きを読む

イージング関数とは、アニメーションに指定されたキーフレーム間のプロパティ値を補間するときに使用される関数で、次のようなグラフで表されます。一般的なイージング関数は、0秒の始まりから1秒の終わりまでの間に、0から1までの数 […]

続きを読む

CSS Animationsでは、animation-timing-functionプロパティに cubic-bezier()関数が返す値を指定することで、独自のタイミング関数(以降、イージング関数)が使用できます。We […]

続きを読む