整理了一篇关于动效的知识，结合了我实际工作中遇到的问题。文章中的部分内容引用了设计师朋友的部分观点作品，纯属分享使用，不做商业用途。

什么是好动效？

好的动效应该是隐形的，好的动效应该是以提高可用性为前提，并且以令人觉得自然含蓄的方式提供有效用户反馈的一种机制。

下面我分别从五个方面与大家分享相关动效的一些知识。

1.为什么动效设计是未来的发展趋势？（WHY）

2.动效是什么，好动效有什么特质？（WHAT）

3.如何让动效在实际项目中落地？（HOW）

4.我在实际项目中如何运用动效？（TO DO）

5.未来动效的多元化发展。（FUTURE）

1.科技的发展和产品品控的提升

随着技术革新，用户对于产品细节的感知度和挑剔程度正在日益剧增，越来越多的产品都在尝试通过不同的手段来打造产品的差异化，而动效设计作为近年来大火的设计趋势之一也被越来越多的产品所青睐。动效日渐从「锦上添花」慢慢变成「必不可少」的优秀产品的构成元素。

2.动效设计所具备的优势

1.动效和动画的区分

2.动效的分类-功能性动效

情感化动效

交互动效

复合型动效

3.动效的分类-展示型动效

展示型动效设计，相对复杂，UI应用中常用于设计成品包装。基本用于一些展示效果，例如新品发布，艺术展示，个人炫技等。

4.优质动效所具备的属性

好的动效设计应该是首先服务于体验，其次适当设计（考虑全面，如性能，实现成本，是否干扰用户等），再次就是要让用户感受到你输出的情感互动，最后也是最基本的就是要具有视觉上的美感。

5.忌过度表现

切勿动效过载，动画效果的滥用也会让用户产生迷失感，失去焦点，甚至产生抵触的情绪，不同的产品适合不同类型的动效，有些产品适合复杂的动效，有些则不适合，切记不要把动效设计成华而不实的花架子。

1.动效的基础变化形式

2.交互动效的时间把控

很多的研究发现动效的最佳时长在200毫秒至500毫秒之间，这个数据是根据人脑处理信息的路径速度得出的。在100毫秒内瞬间完成的动效根本就无法识别。而超过1000毫秒(1s)的动效则会传递出一种拖延又无聊的感觉。

3.动效的输出形式

4.GIF格式输出-快捷方法

5.GIF格式输出-高品质方法

6.视频格式输出

视频默认输出的格式通常为MOV，AVI，MPEG格式，通常无损输出的视频文件较大，需要后期转取使用。

7.视频格式输出

当导出的GIF文件比较大，或者导出了几十兆的视频格式，就需要对文件进行压缩处理，以满足使用需求，例如录了一段软件操作步骤，想放在网站上用直观的GIF图表现，可以利用在线压缩网站https://ezgif.com 进行压缩，类似这种压缩工具有很多。

8.开源的动效架构 Lottie

Lottie，Airbnb开源的一个优秀的动画框架，绚丽的动画效果令人瞠目。Lottie是基于CALayer的动画， 所有的路径预先在AE中计算好， 转换为Json文件， 然后自动转换为Layer的动画。

9.小慧音箱在设计动效过程中研究到了Lottie

10.阿里的犸良动画平台采用了 Json 导出模式

11.Json格式文件的浏览方法

https://lottiefiles.com

https://svgsprite.com/#utilities

12.Lottie形式存在的一些弊端

· 对研发来说播放 Lottie 动画需要引入一个第三方库，会增加项目文件体积,也增加了一定的风险，并且学习一套它的用法，还有调研的成本，在项目时间不是很充裕的情况下这些都是风险。

· Lottie 本身是针对矢量动画开发的，对于非矢量设计风格的项目，虽然不是不能用，但在效率上会有折扣。另外有的效果，比如头发、衣服的飘动，尤其是对位图做这种动画，Lottie 也是无能为力。

1.小慧音箱开机动画-构思

设计动画前，要先构思，可以从动画的阶段，动画中出现的元素，元素的运动方式，动画时间这些方面入手。

2.小慧音箱开机动画-测试

制作前，先和开发人员沟通好最终的输出方式，本次小慧音箱安卓端要求上传序列帧压缩包，所以采用AE软件设计，在正式设计前可以先做一个简单的Demo进行一个开发测试，包括尺寸，文件大小，确定输出的方式万无一失。

3.小慧音箱开机动画-制作

测试完成后，可以正式设计动画。导入PSD素材前，要先把PS所用图层都转换为智能对象。

元素导入完成后，接下来就要进行位置，缩放，旋转，属性变化一系列操作了，这个阶段是个细致活，需要把心沉下来，一点一点的去K关键帧，并反复感受动画是否自然舒适。

4.小慧音箱开机动画-成品

除了开机动画，还有系列产品的动效设计

小慧首屏弹出动效

5.设计注意事项-图层组合

用AE设计动画的过程中，不同的集合元素一定要单独设定合成组，这样可以避免多元素堆积到一个组中造成图层堆积和动画混乱，还有一点好处是在总合成中渲染，会更加稳定。图层组合快捷键ctrl+shift+c。

6.设计注意事项-渲染和导出

开机动画在安卓端的写入形式要用序列帧打包的形式。开机动画会持续20S左右，分为开机动画和循环两部分，循环是为了开机延迟时避免空屏。这里要注意，序列帧命名要用英文名称，可以在设置中进行批量命名。如果导出的是PNG序列，要选择彩色加透明通道。

7.设计注意事项-GIF杂边处理

Loading动画和形象弹出动画的输出格式都是采用的GIF输出，GIF有个缺点是有白色的杂边和锯齿，应对这种缺陷有两种解决方法：

1.在PS的导出设置中，杂边取色基于背景色，比如背景是深色，杂边可以选择黑色，这样会融入背景色；

2.新建尺寸时，可以做大一些，可以用二倍图设计，这样交付开发后，研发人员进行倍数缩小，也会降低锯齿和杂边的干扰。1和2两种方法可以结合使用，效果更佳。

杂边取黑色

杂边取背景色

8.拓展知识-图表编辑器

利用图表编辑器的曲线，可以做出缓动，加速，回弹等一系列自然效果。

9.拓展知识-方程式的运用

方程式是相对于图表编辑器更简便的方法，只需要拷贝一串代码到AE的动画编辑区就可以实现很自然的动画效果。

方程式样例

动效是设计行业未来发展必不可少的趋势之一，随着科技的发展和设备的提升，已经有承载更好动效的能力。

按种类来分动效形式有以下几种：

1.交互动效

2.插画动效

3.2.5D动效

4.logo路径动效

5.发光与渐变动效（科技感）

6.C4D动效

交互动效

插画动效

2.5D动效

路径动效

发光与渐变动效

----------------------------------------------------------------------

华丽的分割线

最后我来进行一个总结发言

· 对动效未来的发展预测：界面微动效，插画动效，三维动效和品牌元素动效会是主要发展趋势；

· 随着5G时代的来临，视频格式的动效会逐渐升温；

· 动效设计要和产品属性相结合，避免盲目设计；

· 对于动效的基本常识要了解，其中包含动画基础，实现方法，效果落地等方面；

· 设计师要对流行的趋势敏感，这样才能走在行业前面

分享结束，谢谢大家，写文不易，求点赞，求关注。

Powered by Froala Editor