探索Web動畫API
Web動畫API（Web Animations API）提供了CSS、SVG動畫的單一介面。它具有更好的效能、更強的時間控制、動畫回放和靈活統一的JavaScript程式設計介面，因此使用起來更加方便。本文簡要介紹下並用它製作一些簡單的動畫。
第一個動畫是從左向右滾動的球，因其簡單性，可作為一個CSS 關鍵幀動畫引入的好例子。第二個動畫用一個沿著曲線路勁做水平垂直運動來模擬一個彈動的小球。其中，我們使用了路徑移動動畫，讓小球沿著svg型別的路徑移動，並結合關鍵幀動畫使球轉動。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="animation-wrapper"> <span id="ball-container"> <img src="https://webdesigner-webdeveloper.com/chris-des-dev/wp-content/uploads/2015/01/ball.svg" id="ball" alt="" /> </span> </div> <ul class="controls" id="controls"> <li><button id="keyframe-start">start Keyframe</button></li> <li><button id="motionpath-start">start Motionpath</button></li> <li><button id="pause">pause</button></li> <li><button id="cancel">stop</button></li> <li><button id="play">resume</button></li> <li><button id="reverse">reverse</button></li> </ul> |
關鍵幀動畫
單向移動小球的方法簡單明確。通過關鍵幀動畫和CSS變換，指定起始點的位置值就可實現。同樣用這種方法也能很方便地實現球的旋轉。這兩種效果我們分別建立了各自的動畫物件。
為解決將不同動畫繫結到一起，我們需要同時播放這些動畫。當前，還不能將多個動畫放到同一HTML元素中，並行播放動畫。換種方法，我們可以將圖片放入封裝元素中。移動動畫分配給封裝元素，旋轉動畫分配給圖片。在animationGroup中繫結這兩種動畫物件，就可以並行播放它們了。如果你想一個接一個播放動畫，可以使用animationSequence 物件替代animationGroup。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
var Animations = {}, player, controls = document.getElementById('controls'); // The elements we will use for our animations Animations.targets = { path: document.getElementById('path'), ballContainer: document.getElementById('ball-container'), ball: document.getElementById('ball') }; // Move the ball container from left to right Animations.keyframeMove = new Animation(Animations.targets.ballContainer, [ {offset: 0, transform: 'translate(0,0)'}, {offset: 1, transform: 'translate(600,0)'}], { duration: 2000 }); // Spin the ball Animations.keyframeSpinRoll = new Animation(Animations.targets.ball, [ {transform: 'rotate(950deg)'}], { duration: 2000 }); // Combine the animations for moving and spinning in an animation group Animations.animationGroupRoll = new AnimationGroup([ Animations.keyframeMove, Animations.keyframeSpinRoll], { easing: 'ease-out' }); |
路徑移動動畫
我們可以按照上例的流程來介紹這個動畫。所以我們將建立兩個動畫效果並將它們繫結到一個組裡。一個定義類似SVG型別路徑方式，沿著指定路徑移動，另一個使用CSS變換使球旋轉。為了使它們並行播放著兩個動畫，我們將它們繫結到animationGroup中。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// Move the ball container along an svg style path Animations.motionpathBounce = new Animation(Animations.targets.ballContainer, new MotionPathEffect("M25,25 " + "a150,100 0 0,1 300,0 " + "a75,50 0 0,1 150,0 " + "a35,20 0 0,1 70,0 " + "a2,1 0 0,1 35,0 " + "h45"), { duration: 2500 }); // Spin the ball Animations.keyframeSpinBounce = new Animation(Animations.targets.ball, [ {transform: 'rotate(950deg)'}], { duration: 2500 }); // Combine the animations for moving and spinning in an animation group Animations.animationGroupBounce = new AnimationGroup([ Animations.motionpathBounce, Animations.keyframeSpinBounce], { easing: 'ease-out' }); |
掌握動畫控制
為了實現播放動畫，我們還需要構造一個動畫播放（animationPlayer ）物件。我們通過呼叫檔案的時間線物件的播放方法，當呼叫播放方法後， 動畫會被繫結到自己的時間線上，我們便可以控制動畫時間。animationPlayer 提供回放、停止、暫停、恢復動畫的方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
controls.addEventListener('click', function(event) { if (event.target) { var targetElement = event.target; switch (targetElement.id) { case 'keyframe-start': player = document.timeline.play(Animations.animationGroupRoll); break; case 'motionpath-start': player = document.timeline.play(Animations.animationGroupBounce); break; case 'pause': player.pause(); break; case 'cancel': player.cancel(); break; case 'play': player.play(); break; case 'reverse': player.reverse(); } } }); |
大多數瀏覽器不或不完全支援該API， 不過用polyfill就能在所有主流瀏覽器上使用了。