动效不知如何落地？看完腾讯高手的经验就明白了

一直有很朋问一关移动端现动效的方法，平时也给大家做一答，但是能没有么系统，次抽点时间总结归纳下方面的内容，跟大家分享下我常设计中是何完成动画现的。

实现动画的方式

设计输出的方式大概以分为位图和矢量两种，与常规的图输出并无太大的差异。位图方式：PNG序列帧、APNG、GIF；矢量方式：Lottie、SVG动画。

当除以设计提供的方式之外，还以设计完成demo，开通代码进行现例：javascript直接现、SVG（伸缩矢量图形）、CSS3 transition、CSS3 animation、Canvas动画、requestAnimationFrame由超出个人能力范畴就不展开讲。

实现动画常用的工具

现动画，首先还是得有哪工具以及合成相关的动效，我常主要使用的工具有Principle、AE、bodymovin插件、iSparta等软件。另外最近准备学习一个新的门svg动画的软件-KeyShape。

• Principle：可以输出GIF、视频等格；
• AE：以输出PNG序列，结合插件以输出GIF等等；
• bodymovin：输出json文件（也就所谓的Lottie动画）；
• iSparta：使用PNG序列成APNG、GIF图片格式除此之外；
• Keyshape：要是可制作较强大的路径变换画，然后输svg画格式。

格式说明

• PNG序列：单帧图像呈现，输后会生成一个序列组的件夹；
• APNG：实上是把PNG序列合成张可动画化PNG，类似GIF，相比GIF质量要高，图片后缀依旧是「.png」。
• GIF：动的位图，但质量差，压缩到临界值时出现锯齿边和白边，个人比不喜欢用。
• Json（Lottie动画）：实际一用码描述的文档，通过码描述径、节点的方式完动画效果，与发实际通过码实动画类似，通过bodymovin输出后减少发实的时间，提高了发实的效率。
• SVG动画：Lottie的方式比较类似，可以减少开发的动画工作量，可以通过keyshape计并导出，后缀为「.SVG」。

如何输出文件？

接下来讲下各个软件输出对应式的方法，际上操并不太难，动效身更重要的还是在创意身，因此当你把握方式之以考虑进行创意设计。

由于GIF文件多种具都可以输出，这里就不再作详细明

1. PNG序列

• 在AE制作好动画
• 通AE预渲染，选择PNG序列，直接渲染出序列帧到地文件夹
• 导出序列帧后需行压缩，常用的tinypng，压缩后较小的文件再行交付

具下视频

2. APNG

上导出到PNG序列帧，拖拽到iSparta软件中，合成即。合成时以选择帧率、循次数（0为无循）、导出质量等。下视频

3. Lottie

• AE中需要bodymovin的插件
• 制作好动画后，在窗口打开插件-bodymovin、
• 选择导出的位置，直接渲染一下，即在地生成json文件
• 插件预览能力，但较差。可以https://lottiefiles.com/preview中行预览查看

更Lottie相关以前往https://lottiefiles.com/学习，里面有富等Lottie动画效果和一插件下载，去研究下吧

4. SVG动画

• 载keyshape软件，属于付软件，可载14天试版
• 可以过图形制作动效，可以设自动补
• 导出svg文件，导出时以设置运动是循或是一次

议大家自己下载软件后尝试

5. 格大小比

过试验几格大小大概是排序依为：PNG序列>APNG>GIF(质量较)>Lottie / SVG，json文件和SVG动画文件比较接近，此可以根据实考虑决定即可，GIF虽然可以压缩到比较小，是本身图片质量也较，此议慎考虑。

应用案例

效在UI设计中的应场景很多，这里梳了一，之前我在项目中尝试过的效，给大分享一些案例，希望可对大有启发。

最后总结

学习用什工导出什格式的文件只是第一步，更重要的还是如何制造出一个有创的动效，因此不要过于调工，更多应该培养思考计的习惯。