Web アニメーション API のエントリから master_html/css_WEB-ITnose

1. Far View: WAAPI を理解する

Web アニメーションについて話すとき、私たちは当然、CSS3 アニメーション、JS アニメーション、SVG アニメーション、APNG アニメーションなどのテクノロジーを思い浮かべます。 .animate() などの jQuery アニメーション パッケージ化ライブラリは、実際のアニメーション コンテンツの設計に基づいてさまざまな実装方法を選択できます。ただし、現在のすべてのアニメーション テクノロジには特定の欠点があります。たとえば、CSS3 アニメーションは JS を通じて動的に変化する値を取得する必要があり、setInterval 時間が不正確であることが多く、フリーズする可能性があり、APNG アニメーションを導入するとファイル サイズが大きくなるという問題があります。追加のアニメーション パッケージ ライブラリはパフォーマンス重視のビジネスには適していません。開発者にとって、現状ではケーキを持って食べることは難しいようです。開発者は、より強力で便利なアニメーション制御機能を備えていることだけでなく、パフォーマンスとエクスペリエンスが十分にスムーズでエレガントであることを望んでいます。ブラウザーでネイティブにサポートされるユニバーサル アニメーション、ソリューションがあれば素晴らしいですね。

このため、W3C は Web アニメーション API (WAAPI) を提案しました。これは、CSS3 アニメーションのパフォーマンス、JavaScript の柔軟性、およびアニメーション ライブラリの豊富さを統合して、可能な限り多くのアニメーションをネイティブで実装することに取り組んでいます。ブラウザーに追加され、CSS にはない多くの変数、コントロール、オプションが追加されます。将来的には、1 つのスキルでアニメーション技術を選択できるようになるでしょうか?次は、WebアニメーションAPIという素晴らしい扉を一緒にたたきましょう。

2. はじめに: 例から始めます

WAAPI の中核は、

Element.animate()

メソッドを提供することです。最も単純な例:

document.body.animate(    [{'background': 'red'}, {'background': 'green'}, {'background': 'blue'}]    , 3000);

Chrome 39 以降を使用して実行すると、ページの背景色が赤から緑、青に順番に変化し、その後終了します。 3秒。もちろん、このような単純な制御パラメータに満足するわけではありません。次の例を見てみましょう:

  var dot = document.querySelector('.dot');  var frames = [    {transform: 'rotate(0deg) translate(80px)'},    {transform: 'rotate(360deg) translate(80px) '},  ];  var timing = {    duration: 2500,         //ms    delay: 0,               //ms    iterations: Infinity,   //1, 2, 3 ... Infinity    direction: 'alternate', //'normal', 'reverse'等    easing: 'ease-in-out',  //'linear', 'ease-in'等    fill: 'forwards',       //'backwards', 'both', 'none', 'auto'  };  dot.animate(frames, timing);

DOM ノードに新しい animate メソッドがあることがわかります。最初のパラメータは Keyframe 配列であり、CSS3 の @keyframes に対応します。各フレームの記述は CSS3 と非常に似ており、2 番目のパラメータは時間制御タイミングであり、継続時間、反復実行時間、アニメーションの方向、イージング関数が含まれます。およびその他のプロパティ。 CSS3 の構文に非常に似ていますか? 上記のタイミング パラメーターは次と同等です:

.dot {  animation: frames 2500ms ease-in-out 0ms infinite alternate forwards;}

効果は次のとおりです:

3. 病院に入る ：WAAPI の素晴らしい機能を詳しく説明します

アニメーションのコールバックとアニメーションの状態

最初の例では、Element.animate( の戻り値を受け取るオブジェクトを定義できます)

var player = document.body.animate(/* ... */);

player は、アニメーションによって返される「アニメーション プレーヤー」オブジェクトになり、アニメーションの再生が開始されます。アニメーションの現在の状態を知る必要があります。これは、オブジェクトの読み取り専用属性 playState を通じて取得できます。

console.log(player.playState); //"running","paused","finished"...

プレーヤーには合計 5 つの状態があります。コード内でコメントされている 3 つの基本状態に加えて、ステータスには、初期状態に戻ることを意味する「アイドル」と、再生または一時停止が発生しようとしているときを意味する「保留中」も含まれます。

プレイヤーは 4 つの方法でアニメーションの現在のステータスを変更できます。

player.pause(); //"paused"player.play();  //"running"player.cancel(); //"idle"player.finish(); //"finished"

CSS3 アニメーションと同様に、プレーヤーはアニメーションが自然または手動で終了するときの onfinish 関数を指定できます。

player.onfinish = function(e) {    // ...}

再生回数を無限に設定するアニメーションには、onfinish 関数を呼び出すための自然な終了時間がないことに注意してください。

時間制御とタイムライン

プレーヤーには、アニメーションの再生速度を制御するために使用される読み取り/書き込み属性 playbackRate があります。

var player = element.animate(/* ... */);console.log(player.playbackRate); //1player.playbackRate = 2; 

playbackRate のデフォルト値は 1 です。より大きな整数を設定するとアニメーションの速度を上げることができ、ゼロより大きい 10 進数を設定するとアニメーションの速度を遅くすることができます。

プレーヤーには、currentTime と startTime という 2 つの時間関連の読み取りおよび書き込み属性もあります。前者は、アニメーションによって現在経過しているミリ秒数を返します。その最大値は、タイミング パラメーターによって設定された遅延 + (期間 * 反復) ですが、Infinity に設定されたアニメーションには、currentTime の最大値がありません。

playbackRate が設定されている場合、アニメーションの currentTime は変化しません。実際に変化するのは、再生速度の変化に応じてタイムラインが伸縮されることです。

プレーヤーは reverse() を呼び出して、タイムラインの終わりから開始点までアニメーションを再生できます。アニメーションが終了すると、currentTime の値は 0 に戻ります。

player.onfinish = function() {    player.reverse();}

複数のアニメーション

CSS3 アニメーションには、DOM ノードに複数のキーフレーム アニメーションを同時に指定する機能もあります。要素に対して animate メソッドを複数回呼び出すと、要素に対して複数のアニメーションが実装されます:

var animated = document.getElementById('toAnimate');var pulseKeyframes, activateKeyframes, haveFunKeyframes;var pulse = animated.animate(pulseKeyframes, 1000); var activate = animated.animate(activateKeyframes, 3000);var haveFunWithIt = animated.animate(haveFunKeyframes, 2500);

各サブアニメーションには、独立したタイミング パラメーターと独立したアニメーション ステータス (再生、停止、完了) も含まれます。 、キャンセル）と独立したタイムライン（開始時間、再生速度、終了時間）により、アニメーションの詳細な制御が容易になります。

更高级的接口

WAAPI还拥有timeline属性，对动画进行分组和排序的能力，以及沿自定义路径移动（再也不是SVG的天下了）的能力，光这一点就足够令人激动不已，然而篇幅有限于是下回再表。

四、登堂：官方案例

Codelabs 越来越多基于WAAPI的Codelabs实例涌现，这些实例非常适合初接触WAAPI的同学作为开始的范例。 [https://github.com/web-animations/web-animations-codelabs]

Google’s demos 如果你希望用WAAPI挑战更炫酷的动画，特别是遵循Material Design风格的动画效果，这将是不错的灵感来源。 [http://web-animations.github.io/web-animations-demos]

五、上座：移动端运行

看到这里，相信你已经不只一次体验到WAAPI带来的惊喜。作为一名彻头彻尾的移动端H5开发，我当然也想把WAAPI应用到移动业务上去服务用户…什么？手机上怎么没效果！

[http://caniuse.com/#feat=web-animation]

为了在现代浏览器厂商还没完全跟进到位的时候抢先用上WAAPI，我们可以选择引入针对Web Animation API的Polyfill库[https://github.com/web-animations/web-animations-js]，从而在IE/Firefox/Safari等浏览器上体验到WAAPI的精彩。

<scriptsrc="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script><script>  document.body.animate([    {'background': 'red'},    {'background': 'green'}  ], 1000);</script>

移动端浏览器，Android 5.0以上的Android Browser和Chrome for Android本身就已经支持WAAPI了，加上Polyfill之后，iOS的Safari也支持了。别忘了，还有我大手Q的X5内核浏览器。

至此，小伙伴们终于露出欣慰的笑容。敬请期待下篇《Web Animation API 从上座到书墨》。

六、品茗：参考文献

1. W3C Spec：https://w3c.github.io/web-animations/
2. 《Let’s talk about the Web Animations API》：http://danielcwilson.com/blog/2015/07/animations-intro/
3. Google's Demo：http://web-animations.github.io/web-animations-demos/
4. codelabs： https://github.com/web-animations/web-animations-codelabs
5. Polyfill： https://github.com/web-animations/web-animations-js
6. Resources：https://developers.google.com/web/updates/2015/10/web-animations-resources