11_2 手作りイージング関数を使ったキャンバスアニメーション

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

続きを読む

11-1 そもそもイージング関数は一体何を…

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

続きを読む

10_10_1 finishイベントの利用

「10-10 アニメーションタイマーとしての利用」で述べた”1 セットした時間の経過を教えてくれる、通常のタイマー”の例です。ここでは、アニメーションタイマーのfinishイベントを利用しています。 ページを開くと、カラ […]

続きを読む

10_10 アニメーションタイマーとしての利用

Animationオブジェクトは次の特徴を持つタイマー(便宜的にアニメーションタイマーと呼びます)としても利用できます。 セットした時間の経過を教えてくれる、通常のタイマー セットした時間を繰り返し、その回数を教えてくれ […]

続きを読む

10_3 Animationオブジェクトのメソッド

Animationオブジェクトのメソッドは数が少なく、ビデオのリモコン操作のようなものなので、簡単です。 play() アニメーションの再生を開始するか、再開する。アニメーションがすでに完了している場合には、最初から開始 […]

続きを読む

10_1_5 Web Animations APIのモデル

WAAPIには、タイミングモデルとアニメーションモデルという2つのモデルがあります。 タイミングモデル 一瞬一瞬のタイム値を受け取り、それをアニメーションの進捗値(全体の中で何%すすんだかを示す数値)に変換する。 同時に […]

続きを読む

10_1_3 重要!! ブラウザの実験的な機能を有効化する方法

今後、WAAPIの実装がどのように進むかは分かりませんが、少なくとも現状では、WAAPIのフル機能を使用するには、ブラウザの実験的な機能を有効化する必要があります。 実装が最も進んでいるのはFirefoxで、次がChro […]

続きを読む

6_3 よいアニメーションにするには?

よくできたアニメーション、つまり、スタート時にはもたもたせずにすぐ始まり、ヌルヌル動く(60fpsを維持する)アニメーションにするための、いくつかの技術的な方策が提案されています。 再レイアウトをともなわないCSSプロパ […]

続きを読む

6_2 レイアウト変更や再描画をともなうプロパティ

要素のプロパティに変更が加えられると、ブラウザは、その変更の影響を受けるすべての要素のサイズと位置を計算しなくてはなりません。たとえば、相対的な位置設定がしてある要素の位置が変わると、他の子要素や親要素に影響が及ぶことに […]

続きを読む

6 アニメーションのパフォーマンスを上げる

「1_1 アニメーションとは?」では、人間は本来的にアニメーションが好きなのだ、ということを述べましたが、これは正確ではありません。よくできたアニメーションは好きですが、できの悪いものは逆効果で、不快になるでしょう。 よ […]

続きを読む

1_3 Webアニメーション(CSSアニメーション)の場合

Webページで見られるCSSアニメーションも、人間の錯覚によって生まれるという点では、映画のアニメーションと同じです。ただし、CSSアニメーションでは、全コマを描くわけではありません。変化のポイントとなる時点をキーとして […]

続きを読む

1_2 アニメーションが動いて見える原理

アニメーションが動いて見えるのは、人間の錯覚で、脳がだまされているからです。 映画のフィルムのコマで考えると分かりやすくなります。 映画では、1秒間に24のコマが映写されます。これは高速なので、人間の目(脳)は残像現象に […]

続きを読む