lynx   »   [go: up one dir, main page]

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Animation: Animation() コンストラクター

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年3月⁩.

Animation()ウェブアニメーション API のコンストラクターで、新しい Animation オブジェクトのインスタンスを返します。

構文

js
new Animation()
new Animation(effect)
new Animation(effect, timeline)

引数

effect 省略可

アニメーションに割り当てる、 AnimationEffect インターフェイスに基づくオブジェクトとして対象となる効果です。将来的には SequenceEffectGroupEffect などの他の効果も利用できるようになるかもしれませんが、現在のところ利用できる効果は KeyframeEffect だけです。これは null (これが既定値です)にすると、効果を適用しないことを示します。

timeline 省略可

アニメーションを関連付ける timeline を指定します。 AnimationTimeline インターフェイスに基づく型のオブジェクトを指定します。現在利用できるタイムラインは DocumentTimeline だけですが、将来的にはジェスチャーやスクロールに関連するタイムラインも利用できるようになるかもしれません。既定値は Document.timeline ですが、null に設定することも可能です。

「白兎を追え」の例では、 Animation() コンストラクターを使用して AnimationrabbitDownKeyframes に対して、文書の timeline を使用して生成しています。

js
const rabbitDownAnimation = new Animation(
  rabbitDownKeyframes,
  document.timeline,
);

仕様書

Specification
Web Animations
# dom-animation-animation

ブラウザーの互換性

関連情報

Лучший частный хостинг