Laya2.x游戏引擎入门系列（三）：常用的动画开发

Laya引擎提供了哪些实现动画的方式？
在开始讲小游戏开发中会使用到的实现动画的方式，我们先来回顾一下在H5开发中如果你想做一个动画可以会用到实现动画的方式。

Gif：最简单的动画实现方式，不需要开发插手只需要设计师提供资源即可，仅仅适合重复播放不需要控制动画播放速度的动画；

CSS3 Keyframes：它是H5中最常使用的实现动画方式，通过控制每一帧的图片即可实现动作复杂的动画，在不考虑性能的前提下，这种动画实现方式适合大部分动画场景；

CSS3 Transition：可以控制一个Dom元素的某些CSS属性实现过渡效果，这种动画实现方式一般是为了避免CSS属性改变时样式切换过于生硬而使用的；

视频：目前已经有很多H5活动开始尝试直接通过视频作为动画的主要实现手段，通过JS响应用户的行为来播放不同的视频来实现和用户交互的效果，这种动画实现方式适合代码无法实现的超复杂动画；

JS实现的动画：在上述实现动画的方式都无法实现时，只能通过JS大法来实现了，这里即包括2种情况：1、通过JS控制动画流程或控制Dom缓动；2、通过JS控制Canvas或WebGL来画动画，这种动画实现方式适合大部分复杂动画场景；

回顾完H5中的一些动画实现方式，我们再来看看Laya游戏引擎给我们提供了哪些实现动画的方式。

图集动画：这里的图集动画是游戏开发中的一个新概念，效果类似我们前面提到的CSS Keyframes动画，你可以简单的理解为图集 ≈ 雪碧图，二者的区别就是图集还多了一份每个图片对应位置关系的配置表；

缓动动画：类似于前面提到的CSS Transition，这里说类似其实只是最终实现的效果类似，Laya提供的缓动动画是通过代码控制的，更像JQuery中的$(selector).animate() 或者 Tween.js的Tween.to()、Tween.from()，提供Laya.Tween.from()、Laya.Tween.to()函数控制元素从状态A逐步切换到状态B；

时间轴动画：它可以说是Laya游戏开发中最常用的功能之一，初学者可以把它理解成多个缓动动画和图集动画的集合。在LayaIDE中还提供了时间轴动画编辑器，可以通过编辑时间轴上的每一个关键帧快速实现图片替换、位移、渐变、缩放等动画效果；

动效模板：它是将基于时间轴动画的动画效果提炼出来抽象成一个效果模板，后续将效果附加给其他ui组件上，使得组件可以无需编码就实现已有的动画效果；

骨骼动画：游戏中特有的一种模型动画效果，在模型中具有互相连接的骨骼组成的骨架结构，通过改变骨骼的朝向和位置从而形成动画，目前Laya支持2种骨骼动画，Spine骨骼动画、DragonBone龙骨动画；

目前，仅仅H5中的Gif动画无法在Laya游戏引擎中支持，其他动画方式都可以在Laya游戏中使用。下图为来自灵魂画师的动画对比图

我们应该怎么去使用这些动画？
介绍了游戏提供的实现动画的方式之后，我们来看一下该如何使用这些动画

1. 图集动画
   图集动画本身就是直接播放图集资源，我们前面也提到了图集资源其实就是雪碧图搭配一个图片位置信息表，现在我们来看一下真实的图集资源是什么样子的。
   下图为我们具体用到的图集资源，blink.atlas（每个图片资源的位置信息），blink.png（每一帧图片合成的雪碧图）
   

blink.atlas：记录每一张图片在雪碧图中的位置，内容如下：

{
   "frames":{
   "lz_01.png":{
   "frame":{
   "h":604,"idx":0,"w":650,"x":0,"y":0},"sourceSize":{
   "h":667,"w":720},"spriteSourceSize":{
   "x":15,"y":23}},"lz_03.png":{
   "frame":{
   "h":625,"idx":0,"w":667,"x":651,"y":0},"sourceSize":{
   "h":667,"w":720},"spriteSourceSize":{
   "x":42,"y":25}},"lz_05.png":{
   "frame":{
   "h":619,"idx":0,"w":623,"x":0,"y":605},"sourceSize":{
   "h":667,"w":720},"spriteSourceSize":{
   "x":63,"y":13}},"lz_07.png":{