UI动效

动效软件

AE

动效软件的老大，功能强大，操作相对复杂，主要用于制作复杂的动画，简单的动画需求有其他更加容易上手的软件。

Principle

Sketch的最佳拍档，通过不同画板间的属性差来实现过渡，更擅长页面级交（或很短的流程级）交互细节表达。

Principle中，时间轴和位置联动的设置比Flinto自由度高，可以进行精细的设计和调整。

图片

Flinto

Flinto是通过元素的附加时间来实现过渡，所以优势在于流程级表达。

互联网产品“小步快跑”的版本迭代频繁，每天提案、评审这类快速碰撞下，没人有时间仔细阅读交互说明。

图片

有详细交互说明的交互稿如今最大的用途只在指导交互开发。在快速碰撞方案的阶段，通过轻量级的动效工具，迅速产出可交互原型是目前团队最通用的做法，在评审中直接演示。

图片

动画的格式

序列帧：软件将动画导出为序列帧，开发在前端实现序列播放。网页端和app都适用，技术也推荐，性能也没问题。

视频格式：将动画导出为视频格式，实现方便，动画质量高。但是视频mp4不支持透明。

gif格式：优点是使用方便，缺点是图片损失比较严重，不支持alpha透明度，所以透明图片边缘有杂边，而且IOS和安卓中，gif图的使用会对性能造成影响，所以手机app不建议使用gif。

Lottie：使用AE第三方插件Bodymovie将动画导出为JSON格式的数据，然后在开发时使用Lottie将JSON格式的数据转换成原生动画，不过在AE里智能使用矢量图形制作。支持Android、iOS、ReactNative三大平台，网页也可以。