什么是 lottie 动画

Lottie 是一款由airbnb开源的跨平台动画渲染库，支持安卓，iOS，网络和 Windows 的库，支持Android,iOS,Web,Windows平台。它解析了使用Bodymovin导出为 json 的Adobe After Effects动画，并在移动设备和网络上以本机方式呈现它们！

lottie动画

上述动画是在 After Effects 中创建的，可以使用简单的 json 文件在所有平台上本机呈现。

在AE中创建Lottie动画！

Bodymovin是Hernan Torrisi创建的After Effects插件，它将After效果文件导出为json，并包含一个javascript网页播放器。我们在他出色工作的基础上，将其应用扩展到Android、iOS、React Native和Windows。
LottieFiles for After Effects是一个由LottieFile创建的插件，它允许您以本机方式渲染动画，但还提供了其他功能，如在移动设备上测试和渲染图，可以在创建Lottie时检查动画的CPU使用情况。您也可以直接从插件本身访问LottieFiles上的AEP文件中的1000个免费动画库。

安装Bodymovin

Lottie还不支持表达式或效果菜单中的任何效果！！！！！

  1. 关闭AE应用程序
  2. 安装ZXP安装程序
    安装地址：http://aescripts.com/learn/zxp-installer/

安装图

  1. 下载最新的bodymovin扩展

下载地址：https://github.com/airbnb/lottie-web/tree/master/build/extension

下载zxp文件

  1. 打开ZXP安装程序并将bodymovin扩展拖到窗口中

安装zxp文件方式：拖拽安装或快捷键

  1. 打开AE
    在“窗口>扩展”菜单下，您应该看到“Bodymovin”

查看安装效果

恭喜你安装完毕🎊！

更多Bodymovin信息

将lottie动画嵌入网页

官方 html 代码嵌入 🔗

lottie官方说明

Lottie动画常见属性和配置

属性名描述
container渲染动画所需容器
renderer动画渲染类型，svg/canvas/html
loop是否循环播放，布尔值
autoplay是否自动播放，布尔值
path一个指定的 JSON 文件路径，注意这里会发起一个 http 请求 json 文件
animationDataJSON 动画数据，与 path 属性不共存
controls控制显示动画控制：播放，暂停和滑块
speed播放速度
hover徘徊 播放上悬停动画。

演示

  • 鼠标 hover 播放的

  • 带控制器的