谈谈动效设计工具一

最近入了动效的坑便开始尝试当下比较主流的动效设计方法，这两天主要尝试了principle和AE，两种实现方式都很常见了，网上也有许多教程和案例，这里就不累述了，只和大家分享一下自己的使用心得以及踩过的坑，希望后期尝试的小伙伴可以运用得更顺当。

principle

因为平时设计界面基本是用sketch，所以动效设计方面首先考虑principle了，不得不说它真的方便易上手，而且和sketch的良好兼容性也大大降低了我们在迁移文件时耗费的时间。

principle优势：

1.自带许多强大的动画过渡（即补间动画），图像化设置缓动也很傻瓜式；

2.效果可以实时预览，同时支持移动设备预览；

3.文件导出支持GIF（对于经常上传文件到追波的伙伴简直福音）；

4.和sketch无缝连接。

平日用于做一些简单的动效设计或者交互原型principle是完全足够。但和sketch相似的，principle软件自身十分轻量，因而其对元件的可操作性是有限的。

principle劣势：

1. 文件命名繁琐；

2. 不支持设计复杂效果，可编辑元件少；

principle的动画实现原理是通过页面A中的元件触发事件跳转到页面B，软件自动为两个页面命名相同的元件创建补间动画，因此对文件命名要求十分严格。principle可编辑的元素仅仅有矩形和文字。因此任何动画都是依靠两个页面之间的差异来实现，那么在页面切换路径很多情况下，又想要实现较丰富的动效时，让页面逻辑看起来十分混乱，因为principle所有页面都是横向一排，且不能移动的。

上图所示一个简单的发邮件动效需要26个页面平铺开来，页面逻辑查看起来不太方便。

principle教程：

https://uiiiuiii.com/?s=principle

看完这上面的教程基本可以用principle做它能实现的动效。

AE

在做动效方面，AE的霸主地位是不可动摇的。而且网上许多优质的动效教程案例也属它最多最全，更便于我们去深化学习～AE的强大自然是不言而喻的，这里主要分享我在动效设计过程中用到的插件的一些心得。

前面说过我平日主要用sketch完成设计稿，因此一款关联AE和sketch 的工具对我来说必然更有效。sketch2AE这款插件很早就有人介绍了，我主要分享自己的一些经验。sketch2AE是sketch和AE的插件，它可以使sketch里的文件通过复制粘贴这样简单的操作相互转化。我在使用过程中开启了AE图层管理的新大门～很早我就想知道如何能在AE里对图层进行分组管理而非预合成。预合成当然有其优秀之处，但是不得不说它在预览总体效果和尺寸调节上并不便捷。principle中创建的分组在AE自动生成一个空对象作为原先组内图层，这样生成的“类组”可直接在当前合成中编辑和预览，而且 创建“类组”不必再去调节它的尺寸（因为空对象并没有尺寸）。

此外通过sketch2AE导入的sketch文件除了渐变图形都被转换成形状，便于对元件样式做修改。

sktch2AE软件及介绍：

https://google.github.io/sketch2ae/

AE确实能设计十分酷炫的效果，但如果要落地动效规范的参数输出必不可少。

Inspector Spacetime是用于AE导出动画的参数的插件，操作十分简单高效，输出物可直接给开发使用。这里指出个人觉得使用体验不佳之处： 

   1.参数不能和元素相对应：

  上图是Inspector Spacetime导出的动画参数面板，右侧是具体的数据，但是很难知道哪条数据是描述哪个元素的。

   2.若是配合插件中的标准功能“Pointer”使用，标注起来十分麻烦。

   3.整个生成的预合成高度有限，内容较多不能完全显示。

需要注意的是，使用插件一定要使用英文版！（这点非常重要）不然动画参数排版会有问题。

附上亲测最好的Mac版AE中英文切换方法：

https://www.jianshu.com/p/931b8caae8d1

（win版的方式很多但是由于都没有亲测过这里不推荐了）

最后是Inspector Spacetime的软件介绍：

https://google.github.io/inspectorspacetime/

总体来讲上述工具对于做动效和参数输出是十分有用的，之所以指出使用时的不良体验只是希望大家尽量避开我踩过的雷，毕竟那会是十分耗时。目前动效方面还是小白，对于软件的理解和操作不是十分全面，如若有遗漏或不当之处，欢迎指出～