告别帧动画,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原生动画