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

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

一、 什么是动图

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

二、 动图在生活中的应用

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

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

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

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

三、 动图的制作方法

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

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

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

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

（视频截取的局部动图）

（ps绘制动图）

（3D导出动画）

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

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

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

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

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

 

 

---

 

进入主题

帧动画

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

示例1：液化

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

 

示例2：变形

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

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

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

示例3：移动旋转

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

 

示例4：钢笔绘制

（如下视图）

 

 

用形状或工具绘制几个运动的状态，这些状态循环播放即可形成gif动画

视频动画

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

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

值

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

示例1：移动视频动画

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

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

示例2：变换视频动画

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

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

示例3：透明度视频动画

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

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

示例4：样式视频动画

light外发光样式变化动画

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

示例5：蒙版视频动画

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

 

四、 动画的叠加和拼接

1、叠加

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

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

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

 

---

 

以下是实例制作过程，多图，不想看的可以跳开，想深入学习的请关注我，AK视觉-用心做设计分享（类型：平面、网页、UI；技能：合成、3D、插画；其他：摄影、视频剪辑、ps动图表情等等）

五、 实例分析

通过一个简单的案例，练习视屏动画制作过程中的变化，透明度和样式变化与动画的变化关系，以了解和熟悉掌握gif图片制作过程。

以下是最终效果展示

————————   步骤   ————————

   

01                                                02                                                03

第一步：制作单个矩形移动并变色

分两个分解动作：1移动部分，给对象一个向上的移动动画（在起点和终点打上关键帧）；2给对象一个样式动画，样式为颜色叠加为红色。

第二步：把第一步对象转成智能对象，复制几层向右平铺。并且给它一个时间错位，动画才有先后运动变化。

第三步：分别给三个矩形一个色彩样式动画：从原有色-浅色最终到蓝色。

 

   

04                                                   05                                              06

第四步：顶层加盖一层蓝色四边形，给四边形一个旋转缩小动画，动画末尾再接一个六边形的旋转动画。合在一起就会有一个四边形到六边形的变化效果。

第五步：加入文字移动动画，本案例就大功告成了，是不是很开熏！

六 导出设置

gif图会受动画的帧数，颜色的丰富度，图像大小的影响，从而导致文件比较大，影响缓存打开时效。在能表达所需要信息的前提下，我们尽量做小图，减少帧数来降低图片存储空间。我的常规导出设置如下图，其中有几个变量是可控的，如果图片过大，除了忍痛删帧外，可以适当的降低颜色值，元数据改成无！

到这里本案例就结束了，文章有涯而学无涯，一篇文章是没办法把所有知识点说透的。

有疑问就私信我吧，关注我，不迷路！

'

扫码下载文章所用素材源文件