Webアニメーション-element.animate（）は既にChrome 36にあります

Web上のアニメーションはJavaScriptの分野の1つでしたが、世界がモバイルデバイスに移行した今、アニメーションはCSSに移行しました。 これにより、宣言構文を使用してアニメーションを記述し、ブラウザで最適化を実行できました。 モバイルデバイスで60 fps（1秒あたり60フレーム）を追求する場合、ブラウザーでアニメーションを効果的に表示するメカニズムに関するすべての微妙さと革新を知ることは有益です。



現在、アニメーションを作成するためのより効率的なメカニズムを提供するJavaScriptベースのツールが多数市場に登場していますが、意思決定の基礎が純粋なコードである場合、聖杯は宣言的および命令的アプローチの共生です。



Webアニメーションはこの呼び出しに答えるように設計されており、最初の部分は既にelement.animate()



としてChrome 36リリースに含まれています。 この新しい機能により、純粋なJavaScriptでアニメーションを作成し、CSSアニメーションまたはトランジションを使用するようなパフォーマンスを得ることができます（実際、既にChromeの第34バージョンから、 上記のすべてのメソッドはWebアニメーションエンジンを通じて起動されます ）。



構文は非常に単純であり、CSSトランジションまたはアニメーションを作成したことがある場合は、ほとんどの場合馴染みがあるようです。

 element.animate([ {cssProperty: value0}, {cssProperty: value1}, {cssProperty: value2}, //... ], { duration: timeInMs, iterations: iterationCount, delay: delayValue });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最大の改善点は、新しい機能により、これまで作業していた松葉杖をすべて忘れることができることです。



たとえば、昨年の「サンタの追跡」では、雪がスムーズに落ちるのを見たいと思い、CSSを使用してアニメーションを行うことにしました。 そのため、このelement.animate



生産性は低下することはありません。



とにかく、画面とステージで何が起こっているかに基づいて降雪の水平線を選択し、もちろん、雪片の高さ（ユーザーのブラウザウィンドウの高さ）を決定します。 これは、CSSの動きとCSSアニメーションをその場で使用する必要があったことを意味し、パフォーマンスの大幅な低下につながりました（数百の雪片は何百もの新しいスタイルを意味しました）。



したがって、次の例では、すでに知っているアプローチを適用しました。

 snowFlake.style.transform = 'translate(' + snowLeft + 'px, -100%)'; //   snowFlake.offsetWidth; snowFlake.style.transitionProperty = 'transform'; snowFlake.style.transitionDuration = '1500ms'; snowFlake.style.transform = 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コメント「待機フレーム」のチップ。 移動が正常に開始されるようにするには、要素が開始位置にあることをブラウザーが認識している必要があります。これを確認する方法はいくつかあります。 最も一般的に使用される方法の1つは、オブジェクトのプロパティの1つを読み取ることです。これにより、ページレイアウトが再計算され、最終要素に移動する前に要素に開始位置があることが確認されます。 このメソッドを使用すると、ブラウザでのレンダリングメカニズムの基本を知っていることを改めて嬉しく思います。



私たちが見るように、構文はあなたがこれ以上想像できないほど透明です：

 snowFlake.animate([ {transform: 'translate(' + snowLeft + 'px, -100%)'}, {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'} ], 1500);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ただし、さまざまな設定を指定することもできます。 CSSアニメーションと同様に、Webアニメーションを遅延させて反復させることができます。

 snowFlake.animate([ {transform: 'translate(' + snowLeft + 'px, -100%)'}, {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'} ], { duration: 1500, iterations: 10, delay: 300 });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

AnimationPlayerオブジェクト

element.animate（）は、ページで実行されているアニメーションの数に比例して重要度が増加するAnimationPlayerオブジェクトを返します。 JavaScriptアニメーションとCSSアニメーションの両方がAnimationPlayerに関連付けられ、さまざまな便利で興味深い方法で組み合わせることができます。



現在、AnimationPlayerには2つの機能があり、どちらも非常に便利です。 AnimationPlayer.cancel()



を使用して、いつでもアニメーションをキャンセルできます。

 var player = snowFlake.animate([ {transform: 'translate(' + snowLeft + 'px, -100%)'}, {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'} ], 1500); //  , ,   1.5 ,  . player.cancel();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ところで、CSSアニメーションとトランジションの使用に慣れている人のために、Webアニメーションは常に最後にイベントをトリガーすると言いたいです。

 var player = snowFlake.animate([ {transform: 'translate(' + snowLeft + 'px, -100%)'}, {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'} ], 1500); player.onfinish = function(e) { console.log('per aspera ad terra!'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

試してみてください！

この機能はすべてChrome 36の内部にあり、そのリリースは先日行われました！ 試してみたい場合は、Chrome 36のネイティブ実装で実行してください。とにかく、この機能をすべての最新ブラウザーに追加するポリファイルがあります。



雪片のデモは、 ネイティブ実装とpolyphileを使用した実装の 2つのバージョンで見ることができます。

ご意見をお聞かせください。

まあ、これは間もなくウェブ開発の毎日の開発となるものの小さなプレビューであり、開発者からフィードバックを得るという目的だけでリリースされました。 アニメーションAPIを使用する際に、すべての要望を考慮したか、すべての鋭いエッジを滑らかにしたかはわかりません。 正しい方法は1つしかありません。開発者に試してみて、彼らの言うことを確認してください。



この投稿の執筆に協力してくれたEddie OsmaniとMax Heinrichに感謝します。