カテゴリー: Web アニメーション API 入門

カスタムイージング関数を利用した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 […]

「10-10 アニメーションタイマーとしての利用」で述べた”2 セットした時間を繰り返し、その回数を教えてくれるタイマー”の例です。ここでは、Animation.effect.getComputedTiming()が返す […]

Animation.readyプロパティは、アニメーションの再生準備ができたときに解決されるPromiseオブジェクトを返します。これは、言い換えると、アニメーションの再生準備が確実に整うまで実行したくないコードが安心し […]

Animation.playStateプロパティは、アニメーションの再生状態の取得と設定を行います。 次のコードを使用すると、アニメーションが再生状態なら、キャンセルし、再生状態でないなら再生を開始する命令が１行で記述で […]

Animation.timelineプロパティは、アニメーションのタイムラインを参照します。現状では、アニメーションの基準として使用できるタイムラインは、ドキュメントのタイムラインしかありません。 タイムラインは、&#8 […]

AnimationEffectReadOnly.getComputedTiming()メソッド(具体的には、anim.effect.getComputedTiming())を使用すると、呼び出した時点での、高精度なタイム […]

Animation.effectプロパティは、アニメーションに関係する効果(キーフレームとタイミング)の取得と設定を行う機能を持っています。 中でも、キーフレーム情報を取得するgetKeyframes()、設定するset […]

Animationオブジェクトには、さまざまなプロパティが用意されています。以降では、次のカテゴリーに分けて、紹介していきます。 エフェクト系：Animation.efefct タイム系：Animation.timeli […]

Element.animate()の第２引数やnew KeyframeEffect()の第３引数には、アニメーションの長さの数値(ミリ秒単位の整数)か、以下のタイミングに関するプロパティ値が、オブジェクト形式で指定できま […]

Element.animate()メソッドやnew KeyflameEffect()には、キーフレームのセットを表すオブジェクト(キーフレームパラメータ)を渡します。その記述方法は２通りあります。 オブジェクト形式 アニ […]

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

実をいうと、target.animate()はAnimationオブジェクトを作成して、そのAnimationオブジェクトの再生を開始するショートカットで、実際にはその裏で、いくつかの重要な事柄が実行されています。 ta […]

WAAPIアニメーションで記述するJavaScriptは定型的で、CSS Animationsと似たプロパティ名を使用するので、早く慣れることができます。 以下は、ボールが左右に繰り返し移動する単純なCSS Animat […]

WAAPIアニメーションには、次の特徴があります。 WAAPIのタイムラインは、ドキュメントのタイムラインを受け継いだもの windowオブジェクトには、高精度のタイム値を提供するwindow.performanceオブ […]

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

WAAPIのアニメーションは、TimelineとAnimation、AnimationEffectで構成されます。 Timeline アニメーション再生の基準となる現在のタイム値を提供する。現状では、Documentオブ […]

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

WAAPIには、次のメリットとデメリットがあると言われます。 メリット WAAPIは、CSSのtransformプロパティと同様、GPUを利用するので、動作が軽快。 WAAPIの記述では、CSSのプロパティ名に似たプロパ […]

Web Animations APIは、執筆時現在、W3Cで策定が進められている、CSSとJavaScriptの長所をミックスさせた新しいWebアニメーションの方法です。 Web Animations Editor’s […]