因为我一直比较关注 Web 领域的设计趋势, 很早之前就听很说了 Lottie 这个项目, 但是一直没时间和机会去尝试, 最近终于有时间机会于是尝试了一把, 在这里分享一下。
一. Intro to Lottie
Lottie 是 Airbnb 开源的一个支持 Web、Android、iOS 以及 ReactNative等平台的动画库，它可以结合 AE 和 Bodymovin 来快速实现跨平台动画。
其实对于普通的动效和简单动画, 使用原生代码实现已经足够, Lottie 是为了复杂动画而生的, 下面来看几个 Lottie 实现的几个动画例子:
二. 绘制动画
先 Show 一下完成的效果, 这个动画只需要5分钟便可绘制完成!
首先, 打开 AE, 新建合成, 参数如下:
然后进入AE, 默认会看到这个界面:
每个区域的作用分别是:
- 项目: 管理当前项目以及一些项目参数的预览
- 资源: 导入到 AE 中的所有外部资源如图像等在这里进行统一管理
- 图层: 在这里为每一个图层添加/编辑关键帧和属性
- 时间轴: 在这里可以编辑动画的关键帧和曲线
- 预览: 动画和编辑实时预览/编辑窗口
- 工具: 各种工具的集合, 如文字工具、图形工具等
- 属性: 在这里编辑元素的属性
首先, 选择我们新建的合成, 点击工具栏的圆角矩形按钮, 同时按住shift, 在预览区域绘制一个矩形。
现在我们需要给其添加关键帧让其动起来。 AE 里的关键帧跟 CSS 里的 keyframe 属性没有什么区别, 我们只需要对其运动过程中的某一些节点添加关键属性, 这个元素将会在相邻两个关键帧之间进行关键属性的平滑变换。
在我们开始之前, 先分析一下动画效果, 可以分成三部分:
- 位移动画: Y 轴方向的往复运动
- 形状动画: 矩形和圆形之间的往复变换
- 颜色动画: 蓝色和品红色的突变
OK, 让我们先来完成位移动画:
首先, 选中我们的图层, 点击图层左侧三角, 展开变换选项, 选中位置属性, 同时把时间轴移动到0:
这时进行最重要的一步, 添加关键帧:
首先, 点击图层区域中位置属性左侧的小时钟图标, 开始记录关键帧, 如图:
OK, 现在我们已经添加完了所有的位移关键帧, 按空格再次预览, 如图:
点击图层面板的右上角, 显示曲线面板, 如图:
按住ctrl同时点击选择我们的动画路径, 点击右下角的转换为贝塞尔曲线按钮。
我们编辑完的第一条曲线是这样的:
让我们进行下一步, 添加形状变换的关键帧。
首先, 点击图层左侧三角, 展开变换选项, 依次展开: 内容、矩形、矩形路径。将时间轴移到0, 圆度属性设置为0, 点击圆度左侧的时钟小图标, 开始纪录该属性关键帧。
现在进行最后一步, 颜色变换。颜色属性在图层面板的内容、矩形、填充里更改, 其他地方跟上述一样, 无非是再次添加几个关键帧。相信聪明的你已经学会了, 这里就不再赘述啦。
最终的曲线如图:
三. 渲染动画
现在动画的绘制工作已经完成, 我们可以导出我们的动画了。首先需要在 AE 里安装 Bodymovin，参考 GitHub - airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
安装后选择该插件:
导出文件后, 新建一个项目, 把 data.json 移到项目目录, 安装所需依赖。
这里我们使用 Lottie 的 React Binding, 运行 npm install -S react react-dom react-lottie babel-core babel-plugin-transform-class-properties parcel-bundler。
新建 index.html:
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
新建 index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import Lottie from 'react-lottie';
import * as animationData from './data.json'
class App extends React.Component {
state = {
isStopped: false,
isPaused: false
};
defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData,
renderer: 'canvas'
};
play = () => this.setState({isStopped: false, isPaused: false});
stop = () => this.setState({isStopped: true});
pause = () => this.setState({isPaused: !this.state.isPaused});
render() {
const buttonStyle = {
display: 'block',
margin: '10px auto'
};
return <div>
<Lottie
options={this.defaultOptions}
width={600}
isStopped={this.state.isStopped}
isPaused={this.state.isPaused}
/>
<button style={buttonStyle} onClick={this.stop}>停止</button>
<button style={buttonStyle} onClick={this.play}>播放</button>
<button style={buttonStyle} onClick={this.pause}>暂停</button>
</div>
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
然后运行parcel ./index.html, 打开浏览器, 将会看到我们的动画, 是不是非常酷~
除了能够播放和暂停, Lottie 还为我们提供了更加精细的动画控制方法和事件钩子, 有兴趣的小伙伴参考: GitHub - airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
本教程的所有源码和AE工程文件都在我的 GitHub: HuQingyang (胡青杨) · GitHub 欢迎关注、交流、拍砖、搞基
