ウェブ アニメーションのネイティブ サポートは、Chrome 36 で初めて導入され、Chrome 39 では再生コントロールが更新されています。Element.animate() メソッドを使用して、JavaScript から命令型アニメーションを直接トリガーできます。また、返されたオブジェクトを利用してアニメーションの再生を制御できます。これらのメソッドの詳細については、Web Animations W3C 仕様の最新ドラフトをご覧ください。
現在、ネイティブに実装されたすべてのウェブ アニメーション機能をトラッキングする出荷済みのポリフィルが現在開発中です。これはすべての最新ブラウザでサポートされています。これらのコアメソッドはすぐに使用できます。また、Google I/O 2015 ウェブアプリなどで、アニメーションを活用するリッチなエクスペリエンスを構築するためのツールボックスとして活用することをおすすめします。
コンストラクタとグループの変更
ウェブ アニメーションの仕様では、グループとシーケンス、アニメーションとプレーヤーのコンストラクタも記述されています。これらは、web-animations-next ポリフィルで入手できます。これは、まだ検討中であり、ネイティブには実装されていない機能を紹介することを目的としています。ウェブ アニメーションの開発チームは、デベロッパーの皆様からのフィードバックにお応えして、これらの機能の名称をわかりやすいものに変更しました。
最近、FXTF はオーストラリアのシドニーで会合し、名称の namingしました。この名称の一部がわかりにくいという妥当な点を多くのデベロッパーが提起しました。その結果、次の名称の変更が合意されました。
- 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 グループに登録して、その他の変更について通知するようにしてください。