告别帧动画,Airbnb Lottie 动效库

随着 APP 上的动效设计日趋流行,对设计师和开发者们来说,复杂动效的还原成了问题,用帧序列实现倒也简单,缺点是资源图过大,内存消耗大;用代码实现,费时,逐帧调试动效节奏相当耗费精力。

现在,业界良心 Airbnb 为大家提供了一个完美的解决方案——Lottie。

设计师们在 AE 里设计好动效(以合成为单位),通过 Bodymovin 插件导出动效合成的 json 文件,Lottie 能跨平台解析该 json 文件。测试了一轮,程序猿们像使用静态切图一样展示动效,iOS、Android,Web,React Native 基本上能做到 100% 还原度,且流畅度相当好(纯 SVG 动效)。

官方示例:

设计师们如何使用?

1.安装 Adobe After Effect for Mac

暂未测试最低支持的 AE 版本

2.下载 Bodymovin 插件

3.下载 ZXP Installer

4.安装 Bodymovin

4.1 在项目目录的“/build/extension”目录下找到“bodymovin.zxp”文件

4.2 打开 ZXP Installer

4.2 将 bodymovin.zxp 拖拽进 ZXP Installer

4.3 安装完成

5.AE 首选项设置

打开AE,点击“编辑”>“首选项”>“常规”菜单项,选中“允许脚本写入文件和访问网络”,点击确定。

6.导出动效 json 文件

6.1 将需要导出的动效放置在某个合成里,导出需要以合成为单位

6.2 点击“窗口”>“扩展”>“Bodymovin”菜单项

6.3 选中所需导出的合成(合成过多的还可以搜索哦)。设置好json文件导出路径,点击“Render”

6.4 完成,把 json 发给开发小哥吧,就想你平时发切图那样

注意:如果动效包含切图文件,需要同时将切图给开发,文件名保持制作动效时的文件名

开发者们如何使用?

iOS原生,通过Airbnb的开源项目“lottie-ios”实现;

Android原生,通过Airbnb的开源项目“lottie-android”实现;

React Native,通过Airbnb的开源项目“lottie-react-native”实现;

Web页面,以svg/canvas/html+js的形式。Bodymovin自己的js库——bodymovin.js;

已知的问题

iOS7及以下 iOS 版本无法完全还原

部分 AE 效果 Bodymovin 暂不支持

可支持的 AE 效果

虽然当前所支持的效果有限,不过基本能满足一般设计师的大部分需求,动效制作时请务必检查当前所支持的效果哦:

预合成[Pre-composition]

关键帧插值[Keyframe Interpolation]
  • 线性插值[Linear Interpolation]
  • 贝塞尔曲线插值[Bezier Interpolation]
  • 定格插值[Hold Interpolation]
  • 漂浮穿梭时间[Rove Across Time]
  • 空间贝塞尔曲线[Spatial Bezier]
固态层[Solids]
  • 锚点变换[Transform Anchor Point]
  • 位置变换[Transform Position]
  • 缩放变换[Transform Scale]
  • 旋转变换[Transform Rotation]
  • 不透明度变换[Transform Opacity]
蒙版[Masks]
  • 蒙版路径[Path]
  • 蒙版不透明度[Opacity]
  • 多蒙版混合模式(相加、相减、反转)[Multiple Masks (additive, subtractive, inverted)]
轨道遮罩[Track Mattes]
  • Alpha 遮罩[Alpha Matte]
父级[Parenting]
  • 多个父级[Multiple Parenting]
  • 空对象[Nulls]
形状图层[Shape Layers]
  • 矩形(所有属性)[Rectangle (All properties)]
  • 椭圆(所有属性)[Ellipse (All properties)]
  • 多边星形(所有属性)[Polystar (All properties)]
  • 多边形(所有属性。点个数必须为整数。)[Polygon (All properties. Integer point values only.)]
  • 路径变换(所有属性)[Path (All properties)]
  • 锚点变换[Anchor Point]
  • 位置变换[Position]
  • 缩放变换[Scale]
  • 旋转变换[Rotation]
  • 不透明度[Opacity]
  • 形状组变换(锚点、位置、缩放……)[Group Transforms (Anchor point, position, scale etc)]
  • 一个形状组可包含多个形状 [Multiple paths in one group]
  • 合并路径(默认是关闭的,必须用enableMergePathsForKitKatAndAbove方法专门开启)[Merge paths (off by default and must be explicitly enabled with enableMergePathsForKitKatAndAbove)]
形状图层描边 [Stroke (shape layer)]
  • 描边颜色[Stroke Color]
  • 描边不透明度[Stroke Opacity]
  • 描边宽度[Stroke Width]
  • 描边端点[Line Cap]
  • 虚线[Dashes]
形状图层填充[Fill (shape layer)]
  • 填充颜色[Fill Color]
  • 填充不透明度[Fill Opacity]
修剪路径[Trim Paths (shape layer)]
  • 修剪路径开始[Trim Paths Start]
  • 修剪路径结束[Trim Paths End]
  • 修剪路径偏移[Trim Paths Offset]

 

引用:

1.大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画

2.Lottie-Android项目说明中文翻译

3.Introducing Lottie