微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

探索 Web Animations API

2015-02-11 20:01 前端大全
点击上方蓝字↑↑↑,轻松关注哦~

探索Web动画API


Web动画API(Web Animations API)提供了CSS、SVG动画的单一接口。它具有更好的性能、更强的时间控制、动画回放和灵活统一的JavaScript编程接口,因此使用起来更加方便。本文简要介绍下并用它制作一些简单的动画。


第一个动画是从左向右滚动的球,因其简单性,可作为一个CSS 关键帧动画引入的好例子。第二个动画用一个沿着曲线路劲做水平垂直运动来模拟一个弹动的小球。其中,我们使用了路径移动动画,让小球沿着svg类型的路径移动,并结合关键帧动画使球转动。


这两个动画都使用了由一些动画对象组成的标记,可通过多个按钮控制动画回放。

(动画请在原文查看)



<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。


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中。


// 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 提供回放、停止、暂停、恢复动画的方法。


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


更多信息

  • W3C 文档

  • Google 查询


原文出处:webdesigner-webdeveloper.com

译文出处:伯乐在线 - live_on_horizon@chen


/////////////////


1. 『前端大全』分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯,欢迎关注。微信号:FrontDev

(长按二维码↑↑↑自动可扫描)

http://web.jobbole.com/all-posts/

2. 点击“阅读原文”,查看更多前端文章。


 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 物联网世界的前端开发 Python基础教程15:列表(Lists) 每周阅读清单:Android N,Handler,BottomNavigation 程序员入门必看|职场新手快速成长宝典 python零基础打印 附视频