//之前我看到好的动效实现文章大多都是看完保存到收藏夹，大致了解动效的几种实现方式，后面在实际项目中我也运用了其中的几种。今天来跟大家分享一下我在实际项目中动效落地的心得。

文章主要内容如下

1.导航栏动效

（说明：该底部导航栏动效是放在网页上的，并不是放在app上）

1.1 制作时要注意的地方

① 在AE中用3倍图尺寸做，确保导出的尺寸可以在移动端中可以看的清晰

② 在AE中制作的时候要看看最后有动效和没有动效衔接的那几帧的位置和缩放大小是否正确

1.2 保存为GIF格式的几种方式

使用gif的原因主要有以下几个

① 所见即所得，开发人员直接把GIF放上去就可以了，节省开发人员的开发时间

② 导航栏的图标尺寸不是很大，导出的GIF大小并不大，都在20kb以下， 对性能也比较友好

③ 由于导航栏的底色为白色，在图标动效导出时可以添加白色的底图，可以避免导出时会有杂边的情况，还原的情况也比较好

确定了导出的格式之后，常见的保存为GIF格式的方式有两种

1.2.1 AE——视频——PS——GIF

这是最安全最常见的输出方式

需要在AE中保存为QuickTime格式的视频，在PS中打开文件——导入——导入视频帧到图层——保存为GIF

唯一的缺点就是在导入文件的时候需要加载，等待的时间太长。

1.2.2 AE——序列帧——PS——GIF

需要在AE中保存为序列帧格式，导出一个放有每一帧图片的文件夹，

在PS中打开文件——脚本——将文件载入栈堆，这样做会把每一帧图片当作图层导入PS

打开时间轴之后右键下方的空白区域——从图层建立帧（注意添加延迟时间）——保存为GIF

相比于第一个方法这个方法极大的节省了导出的时间，而且导出的品质和用第一个方法导出的差不多。

2.运营H5动效

2.1 切图时要注意的地方

① 有动效的png图要保存为png-24才能最大程度的保证色彩的还原度，不会有杂边

② 在保证图片的清晰度的情况下，图片的大小应当尽量小，在ps保存完之后可以利用tiny-png这个网站进行无损压缩

2.2 动效实现的方式

本来做了更贴合画面的一些人物动效，但是由于单张导出的雪碧图的大小已经超过了1M。而在移动端非wifi网络下，动画资源限制总大小最好不超过2M。由于整个h5的背景图都是位图，且导出大小都在700kb左右，为了加载速度和用户体验，因而只能删减做一些比较简单的动效

2.2.1 CSS动画

简单的动画选择用css动画来实现，对接开发时参照知乎上Ceada绿对于动效对接的回答给出以下参数交付给开发

2.2.1 雪碧图/精灵图

像是css动画无法实现的可以用AE插件CSS Sprite Animation（by Xixi）导出雪碧图和代码给开发人员

2.3 H5的不足之处

① 底图全部都是图片，在需要适配各种机型以及滑动展示一张图片的情况下需要压缩图片的高度，在手机屏幕比较短的看起来人物会有些变形被压扁

解决方案： 

1.底图和动图都是位图，根据屏幕尺寸导出多套图并根据手机屏幕尺寸媒体查询写多套代码。 

2.底图是位图但可被压缩，不想被压缩的有动效的图是矢量形状可以保存为svg格式，这样开发人员就可以只写一套代码，实现的效果也比较好。

② 在朋友圈分享的时候图片上下两个部分会被裁减只留下中间部分， 这次的H5被裁减后图片的主体体现不出来，不能很好的起到传播作用

解决方法 在页面排版的时候把重要的内容放在页面的中间位置

③ 页面的切换和文字过渡还可以做的更流畅

有兴趣的可以用手机扫码看看这个H5