探索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就能在所有主流浏览器上使用了。
