This repository has been archived by the owner on Aug 7, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 47
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
2 changed files
with
77 additions
and
52 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
--- | ||
order: 20 | ||
title: Lottie | ||
type: 美术 | ||
group: 美术 | ||
label: Art | ||
--- | ||
|
||
## 如何从 AE 导出 Lottie 动画 | ||
|
||
### 什么是 Bodymovin | ||
|
||
- Bodymovin 是一个 AE 的插件,它可以把动画直接输出成代码,直接给程序员使用放在各个终端上使用。 | ||
- 你可以在 github 上找到最新版本的 bodymovin 使用。 | ||
- Bodymovin的版本等于输出的json文件版本。 | ||
|
||
|
||
### 怎样使用 Bodymovin | ||
|
||
- 到 Bodymovin 的 GitHub 首页(链接:airbnb/lottie-web)克隆项目到本地,或者下载 .zip 包。 | ||
 | ||
|
||
- 在项目目录的“/build/extension”目录下找到“bodymovin.zxp”文件,这个就是插件包了。 | ||
- 下载安装ZXP Installer。 | ||
ZXP插件安装器地址: [https://aescripts.com/learn/zxp-installer](https://aescripts.com/learn/zxp-installer) <br /> | ||
|
||
 | ||
|
||
- 打开AE,点击“编辑”>“首选项”>“常规”菜单项,选中“允许脚本写入文件和访问网络”,点击确定。 | ||
|
||
|
||
 | ||
- 点击“窗口”>“扩展”>“Bodymovin”菜单项,就可以打开Bodymovin的界面使用插件了。 | ||
|
||
 | ||
|
||
- 打开Bodymovin插件窗口,可以发现该项目的名称出现在了下面的列表中。选中该名称,设置好 json 文件输出位置,点击 “Render”。 | ||
|
||
<img src="https://gw.alipayobjects.com/zos/OasisHub/605a89c4-4cde-4e36-a3cf-4d47abbd2f92/1597675512496-6c7320a9-fb09-460b-a2b0-e1a133020d9e.png" alt="image.png" style="zoom:50%;" /> | ||
|
||
- 点击上图中的 Settings,可以对导出的 json 进行配置: | ||
|
||
<img src="https://gw.alipayobjects.com/zos/OasisHub/8e63e349-dad4-4fc9-a535-121aa92450b4/1597675671244-f967fb47-da02-4033-9c37-277e2056af40.png" alt="image.png" style="zoom:50%;" /> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters