WbAnimation(Wb动画)在Wb中的运用越来越广泛，但共制作(开发)并不是件易事。这里将主要总结一下有关于WbAnimation制作相关的知识，以供给初次接触动画制作的同学有所帮助。
Wb动画实现原理Wb动画的实现原理，是利用了人眼的“视觉暂留”现象，在短时间内连续播放数幅静止的画面，使肉眼因视觉残象产生错觉，而误以为画面在“动”。
Wb动画中有几个主要的概念：
帧：在动画过程中，每一幅静止画面即为一“帧”。
帧率：即每秒钟播放的静止画面的数量，单位是fps(Framprscond)。
帧时长：即每一幅静止画面的停留时间，单位一般是ms(毫秒)。
跳帧(掉帧/丢帧)：在帧率固定的动画中，某一帧的时长远高于平均帧时长，导致其后续数帧被挤压而丢失的现象。
WbAnimation实现方法到目前为止，WbAnimation实现方法主要有以下几种(大家觉见的)：
GIF图片动画：设计师直接通过制图软件制作而成，嵌入到Wb页面中。其优点制作成本低，无需开发人员介入；缺点是文件大，耗性能，无法人机交互。
Flash动画：设计师(或网页制作师)通过AdobFlash软件将音乐、声效、动画及富有新意的界面融合在一起，以制作出高品质的网页动态效果。其主要运用于PC端的Wb页面中。
视频：将需要的一些动画制作成视频文件插入到Wb页面中。
CSSAnimation：通过CSS的相关特性将GIF、Flash、视频动画(创意)转换成代码
JavaScriptAnimation:Wb自带的一些制作动画的JavaScriptAPI。
在手淘中使用的动画主要有两大类：
视频型：纯视频格式，用户不需要互动，打开手淘可以直接播放或选择跳过(例如：年双11揭幕动画)
Wb动画：称之为交互型动画，主要有前端开发人员根据视觉设计师提供的GIF动画、视频或Flash动画效果制作。具有较强的人机交互功能，用户触发某按钮开始播放动画效果或者用户进入手淘后动画就开始播放，而且在播放过程中还可以做一些其他交互功能（例如：01年双1揭幕动画）
对应的我们前端所要承载的就是WbAnimation中的CSSAnimation和JavaScriptAnimation。
CSSAnimationCSSAnimation是目前制作Wb动画的一处主流方式，也是WC规范之一。
CSSAnimation实现原理较为简单，如果你曾经结束过Flash或者动手制作过GIF动画图，那么对CSSAnimation能很好的理解。
CSSAnimation制作Wb动画分为三部分：
声明动画：通过定制关键帧(
kyframs)来声明一个动画，这个关键相当于Flash动画、GIF动画图中的帧，主要用于控制CSSAnimation效果调用动画：在CSS中对应的元素上通过animation属性调用声明好的对应动画，并且指定动画播放的一些特性，比如播放时间、播放函数等
触发动画：最后一个环节是控制动画触发方式，就好比，我们视频做好了，默认有可能是播放的，也有可能是不播放的。在实际中我们要通过一定的触发方式来触发这些被引用的动画。
声明动画:kyframskyframs是CSSAnimation中的最大功臣，可以在kyframs集合中定义动画的效果，而这些效果其实就是对应的CSS规则集合。比如：kyframsanim-nam{0%{background-position:00;}1.%{background-position:-px0;}8.6%{background-position:-60px0;}.9%{background-position:-50px0;}57.%{background-position:-70px0;}71.5%{background-position:-px0;}85.8%{background-position:-px0;}%{background-position:00;}}anim-nam就是通过
kyframs声明的动画名称，其集合中的百分数(比如0%,%)就是动画的关键帧，关键帧对应的CSS规则就是实现动画的一些样式规则。而其中较为麻烦的事情是如何确定关键帧的个数，以及怎么配合相应的动作。下面的工具可以帮助大家快速构建出所需的关键帧：
除此之外，也可以借用AdobEdgAnimation软件。有关于
kyframs使用的相关细节可以阅读这篇文章。调用动画:animationanimation属性主要用来调用
kyframs已声明好的动画。其主要包括以下几个属性：animation属性名说明animation-nam定义使用的动画名称，需要和kyframs声明的动画名称一致animation-duration用来指定元素播放动画所持续的时间长animation-timing-function动画的播放方式animation-dlay指定元素动画开始播放的时间animation-itration-count指定元素播放动画的循环次数animation-dirction指定元素动画播放的方向,包括单向循环和双向循环animation-play-stat用来控制元素动画的播放状态animation-fill-mod动画结束之后，关键帧值是否保留在结束状态时的值其中animation-nam、animation-itration-count、animation-dirction、animation-play-stat和animation-fill-mod相对来说较为简单，在使用的时候根据其属性值的说明对号入座即可。较为复杂的是animation-duration和animation-dlay的配合，特别是多个动画一起使用的时候。为了能很好的解决这方面的问题，除了经验、自己审美感之外，还可以借助Chrom的调式工具来进行调试。
在这个调试工具上，可以很好的帮助你控制好每个动画元素的animation-duration和animation-dlay时间，而且能让它们配合的更好。
除了这两个属性之外animation-timing-function也相对复杂一些，其提供了一些关键值：
时间函数名称说明as（逐渐变慢）默认值，as函数等同于贝塞尔曲线cubic-bzir(0.5,0.1,0.5,1.0)linar（匀速），linar函数等同于贝塞尔曲线cubic-bzir(0.0,0.0,1.0,1.0)as-in(加速)，as-in函数等同于贝塞尔曲线cubic-bzir(0.,0,1.0,1.0)as-out（减速），as-out函数等同于贝塞尔曲线cubic-bzir(0,0,0.58,1.0)as-in-out（加速然后减速），as-in-out函数等同于贝塞尔曲线cubic-bzir(0.,0,0.58,1.0)cubic-bzir该值允许你去自定义一个时间曲线stps()指定一个阶跃函数cubic-bzir是通过贝赛尔曲线来计算“转换”过程中的属性值。不过这个过程人肉处理也是非常麻烦的事情，在实际生产是可以使用在线工具(cubic-bzir)来帮你处理：
stps()函数指定了一个阶跃函数，第一个参数指定了时间函数中的间隔数量（必须是正整数）；第二个参数可选，接受start和nd两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为nd。
假设有一个s*(animation-itration-count:;animation-duration:s;)的动画，我们分别对它应用stps(,start)和stps(,nd)，做出阶跃函数曲线如下：
stps(,start):
stps()第一个参数将动画分割成三段。当指定跃点为start时，动画在每个计时周期的起点发生阶跃（即图中空心圆→实心圆）。由于第一次阶跃发生在第一个计时周期的起点处（0s），所以我们看到的第一步动画（初态）就为1/的状态，因此在视觉上动画的过程为1/→/→1。
在JavaScript中就类似于下面这样：
varanimatAtStart=function(stps,duration){varcurrnt=0;varintrval=duration/stps;vartimr=function(){currnt++;applyStylsAtStp(currnt);if(currntstps){stTimout(timr,intrval);}};timr();};
stps(,nd):
当指定跃点为nd，动画则在每个计时周期的终点发生阶跃（即图中空心圆→实心圆）。由于第一次阶跃发生在第一个计时周期结束时（1s），所以我们看到的初态为0%的状态；而在整个动画周期完成处（s），虽然发生阶跃跳到了%的状态，但同时动画结束，所以%的状态不可视。因此在视觉上动画的过程为0→1/→/（回忆一下数电里的异步清零，当所有输出端都为高电平的时候触发清零，所以全为高电平是暂态）。
在JavaScript中就类似于下面这样：
varanimatAtEnd=function(stps,duration){varcurrnt=0;varintrval=duration/stps;vartimr=function(){applyStylsAtStp(currnt);currnt++;if(currntstps){stTimout(timr,intrval);}};timr();};
有了stps()也就有了Sprits动画。比如年年货节揭幕动画。
WbAnimationAPIWbAnimationAPI称之为Wb动画API，是一个新的JavaScriptAPI。它致力于集合CSS动画的性能、JavaScript的灵活、动画库的丰富等各家所长，将尽可能多的动画控制由原生浏览器实现，并添加许多CSS不具备的变量、控制以及或调的选项。
这里提供两个有关于WbAnimationAPI的视频：
AlxDanilo在Googl开发者大会介绍了Wb动画API（WAAPI）。这是一个高水平的关于API的概述，关于它如何工作以及可以用于何处
RachlNabors年在SFHTML5的演讲。除了对Wbanimation非常多的激情，还给非技术观众做了相当好的讲解。
.animation()方法WAAPI核心在于提供了Elmnt.animat()方法，它会返回一个AnimationPlayr,其可以帮助我们做一些有趣的动画。animation()接受两个参数，一个是KyframEffcts数组，一个是AnimationEffctTimingProprtis选项。基本上第一个参数会映射到你放到CSS
kyframs中的内容，第二个参数是你将在你的CSS规则中使用animation-*属性（或animation简写，像我前面用的那样）指定的内容。这里有个关键的好处是我们可以使用变量或重用先前定义的KyframEffcts，而用CSS的话我们就会被限制只能使用我们先前定义的值。对于每一个KyframEffct，我们把CSS中的百分比偏移量offst变成值为0到1的小数。它是可选的，如果你没有指定任何值，它们就会平均分布（所以如果你有三个，第一个的偏移量为0，第二个的偏移量为.5，第三个则为1）。你还可以指定一个asing属性，这和CSS中的animation-timing-function一样。KyframEffct中的其它属性也都是可以添加动画的属性。每个属性的值都应该和你在JavaScript中使用lmnt.styl指定的相匹配，即opacity的值应该是一个数字，而transform应该是字符串。
例如：
varplayr=documnt.gtElmntById(toAnimat).animat([],{duration:,//动画持续时长,毫秒(ms)，相当于animation-durationasing:as-in-out,//动画播放函数方式,相当于animation-timing-functiondlay:10,//动画延迟播放时间,毫秒(ms)，相当于animation-dlayitrations:Infinity,//动画播放次数,相当于animation-itration-countdirction:altrnat,//播放元素的方向，相当于animation-dirctionfill:forwards//动画播放完之后，关键帧是否保留在结束状态，相当于animation-fill-mod});AnimationPlayr的播放状态及其控制
调用lmnt.animat()，会返回一个AnimationPlayr对象，然后动画开始播放。可以通过检查只读属性playStat来查看当前动画的状态，它会返回如下五个字符串之一。通过调用下面的四种方法之一，还可以修改动画的当前状态：
varplayr=lmnt.animat(/*...*/);consol.log(playr.playStat);//runningplayr.paus();//pausdplayr.play();//runningplayr.cancl();//idl...跳到初始状态playr.finish();//finishd...跳到结束状态
除了running、pausd、idl和finishd这些状态，还有一个pnding状态，定义了当一个播放或暂停任务被挂起时的状态。
播放速度通过读/写playbackRat属性来改变动画播放速度：
varplayr=lmnt.animat(/*...*/);consol.log(playr.playbackRat);//1playr.playbackRat=;//两倍速度，可以加速也可以减速结束回调
使用CSS过渡，在过渡结束时，通常会触发一个事件。同样，AnimationPlayr可以让你在动画完成，或者调用前面讨论的finish()方法时，指定一个onfinish函数。
注意:根据规范的内容，设置了无限迭代次数的动画是没有结束的，playbackRat的值也不可能为0。规范还要求调用一个已经存在的oncancl回调，以及使用除了这些回调之外的Promis，这应该会比较受欢迎（虽然目前还没有实现）。
时间轴每个AnimationPlayr都提供了两个读/写的时间相关的属性——currntTim和startTim。我们现在侧重讲解前者。
currntTim返回当前动画的所在的毫秒数。最大值为dlay+(duration*itrations)，当然，无限迭代的情况则没有最大值。
varplayr=lmnt.animat([{opacity:1},{opacity:0}],{duration:0,dlay:,itrations:});playr.onfinish=function(){consol.log(playr.currntTim);//};
动画的播放速率会影响时间轴进行的速度。如果你设置的播放率为10，你的最大的currntTim保持不变，但是你会比时间轴快10倍。
因为currntTim是读/写属性，可以使用它来跳转到时间轴上的某个点。它还可以让我们同步两个动画。
多个动画可以给一个元素多次调用animat()，类似CSS中的多动画。例如，
使用的CSS：
#toAnimat{animation:puls1s,activatms,hav-fun-with-it.5s;}
kyframspuls{/*...*/}kyframsactivat{/*...*/}kyframshav-fun-with-it{/*...*/}使用WAAPI：
varanimatd=documnt.gtElmntById(toAnimat);varpulsKyframs,//定义关键帧变量activatKyframs,havFunKyframs;varpuls=animatd.animat(pulsKyframs,0);//第二个参数是持续时间的有效简写varactivat=animatd.animat(activatKyframs,);varhavFunWithIt=animatd.animat(havFunKyframs,);
使用WAAPI，它可以创建三个AnimationPlayr，每个都可以暂停、播放、结束、取消，也可以通过时间轴或播放速率来进行控制。
KyframEffctsKyframEffct传入三个参数：要添加动画的元素、关键帧数组、时间函数timing选项。这个新对象基本上还是为单独动画绘制的蓝图。它不用于启动动画，只能定义动画。
varlm=documnt.gtElmntById(toAnimat);vartimings={duration:0,fill:both}varkyframs=[{opacity:1},{opacity:0}];varffct=nwKyframEffct(lm,kyframs,timings);Wb动画方式的优劣对比
动画在过去的五年里发展得很好，因为强大的CSS支持以及JavaScript新增内容的提升。但是每一种实现动画的方法，都有其缺点和优点。
CSS动画因为有硬件加速，所以过渡平滑，而且CSS动画的支持内置在浏览器中，但是规则是在CSS中声明的，需要通过JavaScript来实现值的动态变化。
rqustAnimationFram有良好的支持，并在动画中允许浏览器优化，但是它会被中断——如果有很多其它的JavaScript在跑的时候。而且，它往往还需要数学计算来获取倒计时。
stIntrval是很多开发人员进入动画世界的大门，但是它并不精确，而且可能导致结结巴巴的动画效果。
jQury.animat()也让一些其它的开发者进入了动画大世界，但是经常会有性能问题。
库的话如Vlocity和GrnSock(GSAP)完善了JavaScript性能，而且经过测试，在很多情况下是最好的选择。但是，它们还是需要维护和加载外部库。
理想情况下，我们可以在浏览器级别打包尽可能多的动画控件放进去。这些库可以专注于提供新特性，还会自动更新。而WAAPI就是在试图做到这一点。它的目标是既有CSS的性能优势，又有JavaScript的优点和灵活性（还有SVG动画），然后把它赋给浏览器，使其工作得更好。
Wb动画的原则迪士尼经过基础工作练习的长时间累积，在年出版的ThIllusionofLif:DisnyAnimation一书中发表了动画的十二个原则(1PrinciplsofAnimation)。这些原则描述了动画能怎样用于让观众相信自己沉浸在现实世界中。
了解这些原则，有助于你更好的完成Wb动画效果。
挤压和拉伸(Squashandstrtch)这是物体存在质量且运动时质量保持不变的概念。当一个球在弹跳时，碰击到地面会变扁，恢复的时间会越来越短。创建对象的时候最有用的方法是参照实物，比如人、时钟和弹性球。
当它和网页元件一起工作时可能会忽略这个原则。DOM对象不一定和实物相关，它会按需要在屏幕上缩放。例如，一个按钮会变大并变成一个信息框，或者错误信息会出现和消失。
预备动作(Anticipation)运动不倾向于突然发生。在现实生活中，无论是一个球在掉到桌子前就开始滚动，或是一个人屈膝准备起跳，运动通常有着某种事先的累积。
我们能用它去让我们的过渡动画显得更逼真。预备动作可以是一个细微的反弹，帮人们理解什么对象将在屏幕中发生变化并留下痕迹。
例如，悬停在一个元件上时可以在它变大前稍微缩小，在初始列表中添加额外的条目来介绍其它条目的移除方法。
演出布局(Staging)演出布局是确保对象在场景中得以聚焦，让场景中的其它对象和视觉在主动画发生的地方让位。这意味着要么把主动画放到突出的位置，要么模糊其它元件来让用户专注于看他们需要看的东西。
在网页方面，一种方法是用modl覆盖在某些内容上。在现有页面添加一个遮罩并把那些主要