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图片制作过程。以下是最终效果展示  多图篇幅过多，微信扫码观看 六 导出设置gif图会受动画的帧数，颜色的丰富度，图像大小的影响，从而导致文件比较大，影响缓存打开时效。在能表达所需要信息的前提下，我们尽量做小图，减少帧数来降低图片存储空间。我的常规导出设置如下图，其中有几个变量是可控的，如果图片过大，除了忍痛删帧外，可以适当的降低颜色值，元数据改成无！ 到这里本案例就结束了，文章有涯而学无涯，一篇文章是没办法把所有知识点说透的，有疑问就私信我吧，关注我，不迷路！以上文章内容所涵盖素材源文件链接：https://pan.baidu.com/s/12MeCrUh9u5aMGGXAvaxKRA提取码：aany下期干货分享：小课堂：宝爸宝妈如何给自己的宝宝制作微信表情包&微信后台审批注意事项（见公众号 |
