MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Element.animate()

この翻訳は不完全です。英語から この記事を翻訳 してください。

 

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

Element.animate() メソッドは、ある要素のアニメーションを作成・再生できる使いやすいメソッドです。戻り値として Animation オブジェクトのインスタンスを返します。

構文

element.animate(keyframes, keyframeOptions); 

引数

keyframes
keyframes オブジェクトには、変化させたい CSS プロパティとその値からなる配列が含まれます。
animate() に渡す keyframes オブジェクトは、次のような 2 通りの形で指定できます。
  1. 変化させたい CSS プロパティをキーとし、そのプロパティ値を遷移の順番に並べた配列を値としたオブジェクト
    element.animate({
      opacity: [ 0, 1 ], // [ フレーム 1, フレーム 2 ]
      color: [ "#fff", "#000" ] // [ フレーム 1, フレーム 2 ]
    }, 2000);
    
  2. CSS プロパティとそのプロパティ値からなるオブジェクトを、遷移の順番に並べた配列
    element.animate([ 
      { // フレーム 1
        opacity: 0,
        color: "#fff"
      }, 
      { // フレーム 2
        opacity: 1,
     ​   color: "#000"
      }
    ], 2000);
keyframeOptions
animate() メソッドには keyframes に加え、アニメーションの再生時間を表す ms 単位の整数値、または  animation timing options を含むオブジェクトを渡す必要があります。後者の場合、animation timing options のプロパティに加え、以下のようなプロパティも追加して animate() に渡すことができます。

keyframeOptions に追加できるプロパティ

id
アニメーションを参照する文字列
composite
Determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. デフォルト値は replace です。
  • add dictates an additive effect, where each successive iteration builds on the last. 例として transform を挙げるとtranslateX(-200px) は自身よりも前に指定されていた rotate(20deg) の値を上書きすることはありませんが、合成結果は translateX(-200px) rotate(20deg) になります。
  • accumulate を指定した場合、add に似ていますがよりスマートな結果が得られ、blur(2)blur(5) の合成結果は blur(7) になります(blur(2) blur(5) ではありません)。
  • replace を指定した場合、前回の値は新しい値で上書きされます。
iterationComposite
Defines the way animation values build from iteration to iteration. accumulate または replace を指定できます(上記参照)。デフォルト値は replace です。
spacing
アニメーションの再生時間内にわたって、時間軸上におけるキーフレームの配置方法を指定します。ただし、時間のオフセットは指定されていないものと仮定して計算が行われます。デフォルト値は distribute です。
  • distribute を指定した場合、キーフレーム間の時間間隔が等しくなるように配置されます。
  • paced を指定した場合、キーフレーム間のアニメーションにおける時間変化の割合(下図におけるグラフの傾き)が等しくなるように配置されます。

以下の例では、CSS の left プロパティに関する 4 つのキーフレームを指定したアニメーションについて、spacing プロパティの働きを示しています(ここでは仕様書の例を参考にしています)。

/* 左のグラフ */
elem.animate([ { left:   '0px' },
               { left: '-20px' },
               { left: '100px' },
               { left:  '50px' }
             ], 1000);  /* spacing はデフォルト値 "distribute" */
/* 右のグラフ */
elem.animate([ { left:   '0px' },
               { left: '-20px' },
               { left: '100px' },
               { left:  '50px' }
             ], { duration: 1000, spacing: "paced(left)" });

 

戻り値

Animation を返します。

使用例

Down the Rabbit Hole (with the Web Animation API) のデモでは、上に向かって永遠に流れ続けるアニメーションが #tunnel 要素に施されています。ここでは、アニメーションを素早く作成して再生できる animate() メソッドが用いられています。keyframes として渡されているオブジェクト配列と、timing options として渡されているオブジェクトに注目してください。

document.getElementById("tunnel").animate([
  // keyframes
  { transform: 'translate3D(0, 0, 0)' }, 
  { transform: 'translate3D(0, -300px, 0)' }
], { 
  // timing options
  duration: 1000,
  iterations: Infinity
});

仕様

仕様書 策定状況 備考
Web Animations
The definition of 'animate()' in that specification.
草案 Editor's draft.

ブラウザ実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 39 ? 47.0 (47.0) ? ? ?
機能 Android Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile

基本サポート

? ? ? 47.0 (47.0) ? ? ? ?

参考情報

ドキュメントのタグと貢献者

 このページの貢献者: hashedhyphen
 最終更新者: hashedhyphen,