想让动效落地？快来收下这份设计师必读指南！（下）

上期文章中我们讲到展示型动效的落地解决方案，这期我们来聊聊功能型动效的落地解决方案。

和展示型动效不同的是，功能型动效落地解决方案更侧重于技术方面，设计方面的工作不是太多，因此我们这期着重讲解决方案及介绍提高对接效率的方法。

★B-针对于功能型动效的解决方案：

1.Lottie

近年大火的Lottie，是由 Airbnb 开发的 Lottie 是一个将 After Effects 动画提供给任意一个 iOS，macOS，Android 还有 React Native 原生 APP 的文件库。Lottie使用从开源的After Effects扩展名为Bodymovin导出为JSON文件的动画数据。

其使用也非常之简单：通过一个叫 Bodymovin 的开源 After Effects 插件，以 JSON 文件的形式进行输出。Lottie 通过 JSON 格式下载动画数据并实时提供给开发者。

当然，作为设计师，你甚至可以不使用任何代码直接在浏览器中预览导出的文件：

https://lottiefiles.com/preview

也可以通过Lottie APP扫描二维码在手机中观看动效的运行效果。

其最突出的优点在于，Lottie具有一个非常完善且活跃的社区，许多有意思的东西会作为开放源代码将其发布给公众使用。

Lottie能够还原绝大部分动效，但对于复杂的粒子效果来说是无法做到的，具体适用条件见下表：

http://airbnb.io/lottie/#/supported-features

2.SVGA

SVGA 是一种跨平台的开源动画格式，同时兼容 iOS / Android / Web。只需引入 SVGA 播放器并播放资源文件即可完成落地。

和Lottie功能十分相似的另一个选择，但其缺点在于和Lottie相比，SVGA支持的动画类型更少，且社区生态不够完善多样。

3.CSS 3

CSS是最为理想的动效实现方案，只需设计师给到一些必要参数、素材和动画效果，技术人员自行用代码实现。当然，相比于前两种方式，这个解决方案支持的效果十分有限，只能做简单的位移，旋转，缩放等效果。

若采用该种方法，我们有两种工具可以帮助我们更高效的和技术人员沟通：

· Motion Design 效果标注文档

我们需要制作一份标注文档，需要的参数如下：动画属性、动画时间、动画变化量、动画曲线（贝塞尔插值）、触发手势/触发条件

来源：https://github.com/MartinRGB/MTGuideline

关于贝塞尔曲线的插值，我们可以在AE中添加Flow插件进行查看，或者通过该网站查看和生成参数代码：

http://xuanfengge.com/easeing/easeing/

· CSS3动画库

虽然设计师不需要通过代码来实现动效，但是我们可以通过现有的动画库来表达我们的设计意图。animate.css 可以作为一个不错的参考。

animate.css  

https://daneden.github.io/animate.css/

写在最后

现有的解决方案也并不能够完全的解决实际工作中所遇到的问题，相信随着技术的发展，将来会有更好更高效的解决方案出现。动效作为近年来开始兴起的潮流，对于传统的设计师来说，新事物的兴起无疑是一个挑战和机遇。对于个人来说，去主动拥抱，踩坑最后换来的就是成长，拒绝拥抱改变那最后等来的只能是淘汰。我一直认为一项技能只是我们能力的额外体现，设计形式的另一种表达方式。不论采用何种方式去面对项目，都能够对输出的作品负责，让用户获得更好的使用体验，我想，这才是一个设计师终身的追求。

———————————————————————————————

···    END    ···

·

扫码关注 125号设计仓 公众号

带你发现更多更有趣的设计世界

↓