仪表特效——AE在UI动效设计中的应用

偏执的太偏执、 2022-12-24 00:55 173阅读 0赞

动效设计是UI设计中不可或缺的一环。随着硬件性能的发展和动效输出方式的优化，大家对动效的认知也从最初的认为动效只是为了美观酷炫，到逐渐认识到动效对于提升用户体验和产品需求的重要作用。

最近几年，除了老牌AE之外，InVision、Flinto、Principle、Marvel等大量轻量级动效工具相继涌现，甚至掀起一股“动效”热潮。这些新兴工具主要特点是轻量、快捷、学习成本低，虽然确实可以帮助新手快速入门，解决许多基本动效问题。然而由于其轻量的特性，在设计一些较为复杂的动效甚至是特效时，就会显得无力。

而在利用老牌工具AE进行UI动效设计，设计师只需配合PS和AI等自家软件，在PS或AI里设计好UI视觉稿后，再稍加整理图层，即可无缝衔接AE进行动效设计。下面就来一起看一下，如何把PS与AE进行无缝链接。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70][]

### **一、PS和AE如何链接** ###

首先，在PS里将文件图层进行整理。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 1][]

然后，将整理好的PSD文件导入到AE里。选择可编辑的图层样式，即可将PSD文件里的图层以及图层样式全部导入到AE里进行相关的动效设计。

![图片3.png][3.png]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 2][]

### **二、AE做出的动效该如何落地** ###

设计师在做动效设计的时候灵感喷涌，兢兢业业做出炫酷的效果，结果一和开发工程师对接就懵了——要么无法实现，要么极其复杂。毕竟开发工程师要通过代码把动效实现出来，设计师得用开发工程师所能理解的语言来描述。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 3][]

那么我们该如何将动效转化成开发工程师看得懂的语言？

首先，需要将动效量化。

![图片6.png][6.png]

然后，详细记录AE文件里的动效数据以及运动曲线。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 4][]

![图片8.png][8.png]

最后，将详细的数据汇聚成一份数据表格，如下表所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 5][]

通过以上步骤，开发工程师就能解决80%的动效实现问题，但遇到一些复杂动效/特效就会失去作用。因为复杂动效/特效涉及的数据不单单只有时间、变化、曲线，而是由更多的AE内的功能实现，而这些功能是用计算机语言编程好的，显然是不可能提取出相关代码供开发工程师使用的。这时候我们就可以使用LOTTIE、KEYFRAME类的开源库，将AE导出的动画资源直接在项目中应用了。下面我们拿LOTTIE来举个例子：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 6][]

Lottie 是 Airbnb 开源的一个动画渲染库，同时支持Android、iOS、React Native 平台。通过 AE 插件 bodymovie 可导出 json 文件作为动画数据，其工作流程如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 7][]

我们只需把相关软件安将完成，然后进入AE里，开启插件生成一个json格式的文件（json文件描述了该动画的一些关键点的坐标及运动轨迹），再交给开发工程师引用，如此一来，不需要任何图片和gif，动画效果就可以实现出来了，非常简单方便。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 8][]

目前，虽然还是有很多高难度的动效/特效无法实现，但是随着科技的发展，老大哥AE和AE的各种强大的开源库、脚本和插件正在飞快地更新和出现，相信过不了多久，只要设计师能设计出来的动效，一定可以通过开发工程师轻松地落地实现。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70]: /images/20221120/19177f1d9bd24d09acf78cd3672f5fb3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 1]: /images/20221120/8980d51a3d3b4db3a540800df296789c.png
[3.png]: /images/20221120/9dca224ba4d14506b890cd4b2750eea2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 2]: /images/20221120/43525d46c44440e990fcd9976c998370.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201126104004605.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[6.png]: https://img-blog.csdnimg.cn/img_convert/4aa8c5a5ed1330a4ea3367b8e9f3bb28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201126104022976.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[8.png]: https://img-blog.csdnimg.cn/img_convert/85ad0e05b90d4d7fb9a00c9c9c604620.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201126104046521.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201126104111947.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/2020112610413248.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201126104154660.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70