2018年6月24日 – HIM.CO ヒム・カンパニー

10-10-3 getComputedTiming().progressの利用

「10-10 アニメーションタイマーとしての利用」で述べた”3 セットした時間を100%として、今がその何%に当たる瞬間かを教えてくれるタイマー”の例です。ここでは、Animation.effect.getCompute […]

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

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

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

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

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

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

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

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