ウェブ アニメーションのネイティブ サポートは Chrome 36 で初めてリリースされ、Chrome 39 で再生コントロールが追加されました。Element.animate()
メソッドを使用すると、JavaScript から直接命令型アニメーションをトリガーできます。また、返されたオブジェクトを使用して、これらのアニメーションの再生を制御できます。これらのメソッドの詳細については、Web Animations W3C 仕様の最新ドラフトをご覧ください。
ネイティブに実装されたすべての Web アニメーション機能を追跡し、最新のすべてのブラウザでサポートされている出荷済みのポリフィルが現在開発中です。これらのコア メソッドはすぐに使用できます。アニメーションを活用したリッチなエクスペリエンス(Google I/O 2015 ウェブアプリなど)を構築するツールボックスに追加することをおすすめします。
コンストラクタとグループの変更
Web アニメーションの仕様では、グループとシーケンス、アニメーションとプレーヤーのコンストラクタについても説明しています。これらの機能は web-animations-next ポリフィルで利用可能でした。このポリフィルは、まだ議論中であり、ネイティブに実装されていない機能を示すことを目的としています。デベロッパーからのフィードバックを受け、Web アニメーションを開発しているチームは、これらの機能の名前をわかりやすいものに変更しました。
FXTF は先日オーストラリアのシドニーで会合を開き、名前付けについて議論しました。これは、一部の名前付けがわかりにくいというデベロッパーからの有効な指摘があったためです。その結果、以下の命名変更が合意されました。
- Animation が KeyframeEffect に変更
- AnimationSequence が SequenceEffect に変更
- AnimationGroup が GroupEffect に変更
- AnimationPlayer が Animation に変更
アニメーションとそのプレーヤーは Chrome でネイティブに使用でき、ポリフィルの一部としても使用できますが、現在は Element.animate()
メソッドを介して直接作成されます。Element.animate()
メソッドを使用している既存のコードは変更する必要はありません。
新しい名前は、各オブジェクトが提供する動作をより正確に表しています。たとえば、KeyframeEffect
は、HTML 要素をターゲットとするキーフレームベースのエフェクトを表します。一方、新しい Animation
オブジェクトは、再生中、一時停止中など、さまざまな状態のアニメーションを表します。
SourceCodeEffect
web-animations-next ポリフィルを介してドラフト仕様の一部を使用している場合は、非推奨期間内にコードを更新して、これらの新しい名前を反映する必要があります。ポリフィルの変更に関するポリシーに基づき、Google は古いバージョンを 3 か月間サポートし、サイトが非推奨の機能や名前を使用している場合はコンソールに警告メッセージを表示することを目標としています。
これらの機能を試してみたい場合は、ポリフィルの v2 リリースを待って、新しい名前を活用してください。最後に、web-animations-changes グループに登録して、その他の変更についてご確認ください。