前言
最近在优化 Loading 动画, 翻看了很多关于 Lottie 的神奇之处, 既免去了使用序列帧丢帧情况又不必担心 AE 导出的 GIF 文件各种失真的悲具, 又可以减少开发成本让开发小哥哥直接使用, 下面就说一下交互设计师该如何与开发小哥哥配合使用 Lottie 把 AE 动画转换成 html5/Android/iOS 原生动画
搜罗了各种 Lottie 相关资料, 但大多数都是把设计师的部分和开发小哥哥负责的部分混在一起介绍的, 可是作为一枚代码小白的 UE, 看的也是全程蒙蒙哒, 只能叫来开发小哥哥一起研究, 各司其责, 各取所长才能更快的输出, 所以就把设计师负责的这一部步骤单独拿出来详细说明, 如果了解过, 可直接到文末看步骤总结
Lottie 是个什么
Lottie 是一个可应用于 Andriod 和 iOS 的动画库, 它通过 bodymovin 插件来解析 Adobe After Effects 动画并导出为 json 文件, 通过手机端原生的方式或者通过 React Native 的方式渲染出矢量动画
其实就是设计师只需要使用 AE 设计出动画之后, 使用 Lottic 提供的 Bodymovin 插件, 将设计好的动画导出成 json 格式, 然后把这个文件交给开发小哥哥, 后面的全部交给万能开发小哥哥就可以搞定啦, 中间会涉及到动画速度或者颜色相关的问题, 这个建议设计师在 AE 里进行调节再次导出就可以了
具体步骤如下:
1 首先在 sketch 中确定好需要制作 loading 动画的整体形象
2 如果形象只是简单的形状可以在 AE 中直接用钢笔直接画出; 如果是比较复杂的形象, 可以使用 Google 的 Sketch2AE 工具导入 AE, 选中需要导入所有图层, 到 Plugins-Sketch2AE 点击 Cope Selected Layers
下载地址如下:
百度云盘: https://pan.baidu.com/s/16x9eWkLUk51COXvMVfHzkg 密码: 5jf7
官方详细教程: https://google.github.io/sketch2ae/
3 打开 AE, 点击文件 - 脚本 - 运行脚本文件..., 找到上述插件中的 Sketch2AE.jsx, 点击打开, AE 中就会看到 Sketch2AE 的操作面板, 点击右边红色 button 就可导入在 Sketch 中已复制的所有图层了 (如果已运行过此脚本, 下次打开 AE 时到窗口菜单最下面就可以看到 Sketch2AE.jsx)
4 在 AE 中设计动画, 动画设计好, 需要安装 Lottie 的配套插件 Bodymovin 插件 (Bodymovin 就是 After Effects 的一个插件, 可以将 json 数据格式的动画导出为 Lottie 使用), 以下链接是已经过西西大神汉化过的版本及原文安装过程:
百度云盘: https://pan.baidu.com/s/11gMfiaYG_6XNtpJbWo6e6w 密码: jmm8
来源: https://www.thinksaas.cn/group/topic/839007/