呕心分享 数年经验总结 不得不得知道的gif动画设计制作

aikenchen原创文章，转载请注明出处！

一、 什么是动图

动图，顾名思义就是动态图片，亦称GIF图片。官方解释：它是一个可以将多幅图像数据存于一起，并逐帧显示到屏幕上，形成简单动画的图像文件。

二、 动图在生活中的应用

动图多用在表情包，为平时的聊天增加乐趣（如下视图）

​

（小陈皮的表情-微信表情已上架）

同时还有电商详情页展示，工作流程说明，活动页、PPT报表等都可以用到动态图片。

动态图片具有非常强的趣味性和直观性，在日常工作生活中扮演着非常重要的角色。本文笔者通过自身的经验，带大家去认识、了解和制作动态图片。

三、 动图的制作方法

上面我们说到，动图是一个多幅图像数据文件，其中应至少包含两幅图片（如下视图）

这张信号干扰图片是6幅图像循环播放组成的

当图像越多时，动画就越细腻（文件也越大）。当每秒超过24帧，即单帧时间低于0.04秒，这些连续播放的图片就会连成视频。

动态图的制作方法比较多，软件的话一般用PS制作较为常见和方便，方式可以由静态图片制作成动态，可以ps绘制，可以用视频文件截取拼接成动图(局部动图就是这么做的，也可以用3D文件制作动画。（如下视图）

（视频截取的局部动图）

（ps绘制动图）

（3D文件导出动图）

但凡是通过PS输出的动图，制作过程只有两种形式：帧动画和视频动画（如下视图）

帧动画：通过每一帧的依次、循环播放形成动画。制作时需要把每一帧的最终形态做出来。

优点是可控程度高，缺点是繁琐，易出bug。（帧动画可转视频动画，视频动画转帧动画会丢失数据）。

视频动画：用关键帧，时间轴来控制元素的数据变化（位置、透明度、尺寸等）系统自动添加过度帧，通过关键帧之间的数据变化实现动画。

优点是操作简单，效果多变，可塑性强，很多有点，推荐使用。缺点是文件较大，对电脑配置要求较高。

进入主题

帧动画

帧动画常用的制作方式有：液化、变形、移动旋转、钢笔绘制

示例1：液化

通过液化，让原图形变形，新图形和原图切换播放产生动画。（如下视图）

示例2：变形

变形拉扯，可以很好的做运动类的动图，结合涂抹模糊效果更好（如下视图）