精通这3种游戏动画技术，月薪30000不是梦

动画是游戏中最基础的部分，所以要掌握游戏开发必须要清楚动画的一些基本常识。今天来介绍下常见的三种动画。

属性动画

大部分人对动画的印象就是位移，角色以一定的速度运动就完成了一个简单的动画效果。如下图所示

每一帧将星球的Y坐标增加10个像素，这样星球就会一直向屏幕上方移动。同理，如果是改变X坐标，那么就会往屏幕左右方向移动。不仅能改变位置还能改变大小、透明度、旋转角度，这都是基于改变角色自身的属性。

还有一种倾斜变换就不展开说明，总之可以通过改变角色的这些基本的属性完成动画效果。这几个属性还可以组合起来，让动画效果更加丰富。

缩放、透明度、旋转属性同时改变的效果如下：

上面看到的动画效果都是线性的，改变效果是匀速的，但是现实生活中的动画大部分都不是这样。小汽车加油的时候有加速度，踩刹车的时候有减速度，皮球掉落在地上会反弹。因此通过数学计算公示可以来计算角色的一个补间动画，动画更加逼真。

业界也有非常成熟的库：tween，如果满足不了实际的需求，也可以自己计算。原理就是从A到B值计算出这段时间内的插值，在每一帧更新角色的属性。这个属性可以是上面提到的位移、宽高、透明度、旋转角度等。

上面讲述的都是基于角色的属性变化来完成的动画，而为了在游戏中有更加逼真的动画效果，仅仅上述变化是不够的。比如一个角色走路、打斗等动作就需要其他动画来完成。

逐帧动画

以前拍摄电影都是使用胶卷，将图像印在胶卷上，然后放映厅就是以固定的帧率播放胶卷上的图像，从而在视觉效果上表现出动画的效果。

如果你的童年没那么枯燥，小人书看的应该不少，那么应该对这个不会陌生，这就是逐帧动画的完美表现。
帧动画小人书
逐帧动画也叫 Frame 动画，它的原理十分“复古”，和我们小时候看的动画片原理一致（注意是我们小时候），就是把一张张准备好的，一系列图片，按照指定的时间播放出来，从而达到动画的效果。

由于每帧的独立性使得这种技术很自由。在技术上的实现也非常的简单，在canvas画布上一张接着一张绘制，只要速度够快，肯定是流畅的动画。

如上图一个角色的动作可以用几个特征动作图来表示。这种动画有个很明显的特点，就是前后相邻的动画，不能相差太大了，不然就有点跳跃，画面感会很鬼畜。

还有就是每帧需要一张图片会很耗费内存，相似图片越多动画过渡越平滑同时也带来了巨大的工作量。

因此这种动画只能运用在简单的角色造型上，而需要更加细腻和表现力且高效性能优良的动画需要用其他的技术：骨骼动画

骨骼动画

先来看下骨骼动画能做到什么地步，下面视频是骨骼动画与逐帧动画的对比，视觉上要细腻流畅，而且占用的内存空间要小。 骨骼动画与帧动画对比 它还能具备多个动作 多动作骨骼动画 还能变形，点击看变形坦克

那么这种动画的实现原理是怎样的呢？如下面这个美女角色，身体、头部以及手上的枪支都在晃动。 美女动作 本质上是骨架与顶点在时间轴的方向和位置变化。下图是角色的骨骼图，由若干个点和线段组成的基本骨架。

但光有骨骼关节点还不够，像头发这种需要顶点来计算摇摆的位置，因此就有了下图的网格面。每个顶点可以绑定到一个至多个骨骼，动画播放时，顶点随着关节运动，顶点的最终变换就等于它所绑定的骨架变换的加权和。

业内有两大知名制作骨骼动画的工具，但像unity本身也有自己的工具，而cocos和laya的工具并没有集成，但它们引擎是支持骨骼动画运行的。业内主要是dragonbones和spine 两款工具的对比也有人进行了分析：骨骼动画对比分析，参考看看spine-vs-dragonbones。

骨骼动画的优点：

1、使用较少图片储存内存。

2、单位武器附件挂接，特效挂接非常方便。

3、单位换装系统非常方便。

缺点：

1、设计师的学习成本要高一些。

2、对cpu的占用会大，毕竟有大量的计算，而且顶点数越多耗时越长

总结

在实际的游戏开发过程中，肯定是要综合上述三种动画实现方案的。根据不同的场景选择合适的技术实现。掌握了这三种，基本上能够实现任意的2D游戏动画效果。

老铁既然都看到这了，原创不易，希望关注支持我

个人知乎，欢迎关注：https://www.zhihu.com/people/iamaddy

欢迎关注公众号【入门游戏开发】