日: 2018年6月21日

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 […]

続きを読む