ウェブ アニメーションの改善(Chrome 50)

Alex Danilo

最初に Chrome 36 でリリースされた Web Animations API は、ブラウザでアニメーションを簡単に JavaScript で制御できる API です。Gecko と WebKit にも実装されています。

Chrome 50 では、他のブラウザとの相互運用性を改善し、仕様に準拠するため、次のような変更が行われています。

  • イベントをキャンセルする
  • Animation.id
  • pause() メソッドの状態変更
  • キーフレーム内のキーとして破線名のサポートを終了

Chrome 51 では、以下の変更の一部が確定しています。

  • キーフレーム内のキーとしての破線の名前の削除

イベントをキャンセルする

Animation インターフェースには、アニメーションをキャンセルするメソッドがあります。これは面白いことに cancel() と呼ばれます。Chrome 50 では、メソッドが呼び出されたときにキャンセル イベントが仕様に従って呼び出されるように実装されており、初期化されていれば、oncancel 属性によるイベント処理がトリガーされます。

Animation.id のサポート

element.animate() を使用してアニメーションを作成する場合、複数のプロパティを渡すことができます。以下は、オブジェクトの不透明度をアニメーション化する例です。

element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);

id プロパティを指定すると、返される Animation オブジェクトにプロパティが設定されます。これは、処理する Animation オブジェクトが多数ある場合にコンテンツをデバッグする際に役立ちます。次は、インスタンス化するアニメーションの id を指定する方法の例です。

element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});

pause() メソッドの状態変化

pause() メソッドは、進行中のアニメーションを一時停止するために使用されます。playState 属性を使用してアニメーションの状態を確認する場合は、paused() メソッドが呼び出された後に paused に設定する必要があります。Chrome バージョン 50 より前のバージョンでは、アニメーションがまだ開始されていない場合は playState 属性は idle を示しますが、現在は正しい状態(paused)を反映しています。

キーフレーム内のキーとしての破線の名前の削除

仕様やその他の実装に準拠するため、Chrome 50 では、キーフレーム アニメーションのキーに破線の名前が使用されている場合、コンソールに警告が表示されます。正しい文字列は、CSS プロパティによる IDL 属性の変換アルゴリズムに従ったキャメルケース名です。

たとえば、CSS プロパティ margin-left では、キーとして marginLeft を渡す必要があります。

Chrome 51 では、ダッシュ記号のサポートが完全に終了しているため、仕様に従って正しい名前を持つ既存のコンテンツを修正することをおすすめします。

概要

この変更により、Chrome のウェブ アニメーションの実装を他のブラウザの実装に近づけ、仕様への準拠を強化することで、ウェブページ コンテンツの作成を簡素化し、相互運用性を高められるようになりました。