「干货」一文读懂gif动图的原理&制作方法深度解析

一、 什么是动图

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

二、 动图在生活中的应用

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

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

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

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

三、 动图的制作方法

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

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

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

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

（视频截取的局部动图）

（ps绘制动图）

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

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

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

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

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

进入主题

帧动画

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

示例1：液化

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

示例2：变形

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

用网格变形加涂抹来模拟整个动画过程

PS：制作动画的时候首先要考虑物体的运动规则，这样做出来才真实！

示例3：移动旋转

飞行、奔跑、伸缩可以用移动来做，通过旋转变形也可以做旋转动画，不过此类动画用视频动画更加方便

示例4：钢笔绘制

（如下视图）

视频动画

视频动画可控参数有：位置、透明度、变换、样式、蒙版位置和蒙版启用（如下视图）

制作视频动画之前，我们需要了解关键帧，点击控制项前的圆圈即可激活关键帧，关键帧记录着每个位置的参数，通过关键帧之间的均匀过度，形成动画。

值得注意的是：图层在未转智能对象的时候不能记录尺寸变换，转智能对象之后，位置控件变成变换，这个时候变换可以记录对象的位置和大小变化。

示例1：移动视频动画

移动是最基础的动画，配合蒙版可以制作出很nice的效果

PS：一个简单的移动动画，通过移动关键点的位置可以实现加速减速，如果开关移动过程中，背景的灰色和绿色有破绽，可以使用蒙版进行纠正。

示例2：变换视频动画

通过关键帧，可以很好的控制动画的延展

PS:用变换给对应的旋转角度打上关键帧，变换可以实现移动、缩放、旋转、变形等动画，感兴趣可以自己摸索一下。

示例3：透明度视频动画

添加明度变化就可以制作消失和闪现的效果

PS：用变换做一个向右移动同时缩小的动画，移动的同时再给它一个渐隐的变化。

示例4：样式视频动画

light外发光样式变化动画

和之前的动画原理一样，这个是两个图层样式之间的过度动画。

示例5：蒙版视频动画

可以通过控制蒙版的位置来制作遮罩动画，与上面类似，这里不做重复！

四、 动画的叠加和拼接

1、叠加

把元素（黑丝背景）滤色模式到需要动画的文件中就可以了，动画元素智能对象（特别注意，必须要是视频动画才能实现；可以把GIF图转换成视频动画！

用AE制作的飘雪素材（没有可以网上下）叠加到背景图片

2拼接也很好理解，这里不做累赘复述了！

到这里本案例就结束了，文章有涯而学无涯，一篇文章是没办法把所有知识点说透的，有疑问就私信我吧，关注我，不迷路！