Skip to content
This repository has been archived by the owner on Aug 7, 2024. It is now read-only.

Commit

Permalink
Refactor lottie doc (#948)
Browse files Browse the repository at this point in the history
* refactor(lottie): refactor lottie doc
  • Loading branch information
singlecoder authored Feb 19, 2024
1 parent 8f5543b commit 282490c
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 52 deletions.
44 changes: 44 additions & 0 deletions docs/art-lottie.zh-CN.md
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 包。   
![image.png](https://gw.alipayobjects.com/zos/OasisHub/429a17b1-19b3-41b8-902c-4992d722832f/1597673434824-27e06992-4a7d-486a-8514-62a470c53789.png)

- 在项目目录的“/build/extension”目录下找到“bodymovin.zxp”文件,这个就是插件包了。
- 下载安装ZXP Installer。
ZXP插件安装器地址: [https://aescripts.com/learn/zxp-installer](https://aescripts.com/learn/zxp-installer) <br />

![image.png](https://gw.alipayobjects.com/zos/OasisHub/1e996008-498c-4845-953b-8d39f05503e0/1597674042809-af5a084f-f21b-4bf4-b0d4-7404466b2a1e.png)

- 打开AE,点击“编辑”>“首选项”>“常规”菜单项,选中“允许脚本写入文件和访问网络”,点击确定。  


![image.png](https://gw.alipayobjects.com/zos/OasisHub/22b31fcd-2b6e-4691-abd1-b173ccab87e7/1597674058269-f2242296-32c5-4ae9-973b-2943e04e94bc.png)
- 点击“窗口”>“扩展”>“Bodymovin”菜单项,就可以打开Bodymovin的界面使用插件了。

![image.png](https://gw.alipayobjects.com/zos/OasisHub/cb002ffc-4b59-4dbd-a85d-56e0c1809475/1597674100420-41e2440c-fe9a-4280-8000-4f384ccdf9c3.png)

- 打开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%;" />
85 changes: 33 additions & 52 deletions docs/graphics-lottie.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,30 +11,57 @@ label: Graphics/2D

用户可以在 Galacean 中轻松完成 Lottie 资产的处理和组件添加。

## 编辑器使用
### 资源上传

建议设计师在 AE 中导出 lottie 文件的时候,图片采用 base64 格式写入 lottie 的 json 文件中。

开发者拿到 `.json` 文件后,首先需要把 `.json` 文件上传到 Galacean Editor。通过资产面板的上传按钮选择 “lottie” 资产,选择本地一个 lottie json 文件,然后
开发者拿到 `.json` 文件后,首先需要把 `.json` 文件上传到 Galacean Editor。通过资产面板的上传按钮选择 “lottie” 资产,选择本地一个 [lottie json](https://github.com/galacean/galacean.github.io/files/14106485/_Lottie.3.json) 文件,然后上传

<img src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*UQ1LTI_mYv4AAAAAAAAAAAAADjCHAQ/original" />

选择一个节点,添加 Lottie 组件,选择 resource 为上一步上传的资产,通过修改 speed 改变播放速度:
### 添加组件

选择一个实体,添加 Lottie 组件,选择 resource 为上一步上传的资产,即可显示并且播放 Lottie 特效:

![lottie](https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*ehFMT7vBaCAAAAAAAAAAAAAADjCHAQ/original)

开发者可以通过调整属性面板中的各个参数来对 Lottie 进行相关设置:

![lottie](https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*OswOQI837OkAAAAAAAAAAAAADjCHAQ/original)


| 属性 | 功能说明 |
| :--- | :--- |
| `resource` | 选择 Lottie 资产 |
| `autoPlay` | 是否自动播放,默认自动 |
| `isLooping` | 是否循环播放,默认循环 |
| `speed` | 播放速度,`1` 为原速度播放,数值越大播放约快 |
| `priority` | 渲染优先级,值越小,渲染优先级越高,越优先被渲染 |

有时候开发者可能需要在运行时动态对 Lottie 进行设置,在脚本组件中添加代码如下:
```typescript
// 先找到 Lottie 所在的实体 lottieEntity,然后获取 Lottie 组件
const lottie = lottieEntity.getComponent(LottieAnimation);
// 设置 lottie 属性
lottie.speed = 2;
```
另外,Lottie 组件还提供了 2 个 API 来控制动画的播放和暂停,如下:

| 方法 | 描述 |
| :--- | :--- |
| `play` | 播放动画,传入动画片段名参数会播放特定的动画片段 |
| `pause` | 暂停动画 |

### 监听播放结束

很多时候我们有监听 Lottie 动画播放结束的需求,比如在动画结束的时候运行一些业务逻辑。`LottieAnimation``play` 方法会返回一个 `Promise`,所以可以很方便地监听动画结束的时机:

```typescript
const lottie = lottieEntity.getComponent(LottieAnimation);
await lottie.play();
// do something next..
```

### 切片功能

编辑器提供了动画切片的功能,可以把设计师提供的整个片段切成多段,每个片段需要定义片段名、开始帧、结束帧三个字段。
Expand All @@ -60,17 +87,16 @@ label: Graphics/2D
]
```

## 脚本使用

### 安装包
### 安装依赖包

<a href="https://www.npmjs.com/package/@galacean/engine-lottie" target="_blank">@galacean/engine-lottie</a> 是 Galacean Engine 的二方包,需要手动安装
<a href="https://www.npmjs.com/package/@galacean/engine-lottie" target="_blank">@galacean/engine-lottie</a> 是 Galacean Engine 的二方包,项目中用到了 Lottie 的时候,需要确保项目中安装了该包

```bash
npm i @galacean/engine-lottie --save
```

### 基础使用
### pro code 开发模式

在进行 `Pro Code` 开发的时候,需要一个 `json` 文件和一个 `atlas` 文件来实现 `lottie` 动画,通常美术同学通过 `AE` 导出的给到开发的只有 `json` 文件,此时需要使用 [tools-atlas-lottie](https://www.npmjs.com/package/@galacean/tools-atlas-lottie) `CLI` 工具生成 `atlas` 文件。

Expand Down Expand Up @@ -98,15 +124,6 @@ engine.resourceManager.load({

<playground src="lottie.ts"></playground>

### 监听播放结束

很多时候我们有监听 Lottie 动画播放结束的需求,比如在动画结束的时候运行一些业务逻辑。`LottieAnimation``play` 方法会返回一个 `Promise`,所以可以很方便地监听动画结束的时机:

```typescript
const lottie = lottieEntity.getComponent(LottieAnimation);
await lottie.play();
// do something next..
```

### 3D 变换

Expand Down Expand Up @@ -139,39 +156,3 @@ engine.resourceManager.load({
- 为了防止 lottie 导出的兼容性问题,请尽量使用英文版本 AE ,图层需简洁,命名清晰
- 避免大面积矢量部分,以及大面积粒子效果

## 如何从 AE 导出 Lottie 动画

### 什么是 Bodymovin

- Bodymovin 是一个 AE 的插件,它可以把动画直接输出成代码,直接给程序员使用放在各个终端上使用。
- 你可以在 github 上找到最新版本的 bodymovin 使用。
- Bodymovin的版本等于输出的json文件版本。


### 怎样使用 Bodymovin

- 到 Bodymovin 的 GitHub 首页(链接:airbnb/lottie-web)克隆项目到本地,或者下载 .zip 包。   
![image.png](https://gw.alipayobjects.com/zos/OasisHub/429a17b1-19b3-41b8-902c-4992d722832f/1597673434824-27e06992-4a7d-486a-8514-62a470c53789.png)

- 在项目目录的“/build/extension”目录下找到“bodymovin.zxp”文件,这个就是插件包了。
- 下载安装ZXP Installer。
ZXP插件安装器地址: [https://aescripts.com/learn/zxp-installer](https://aescripts.com/learn/zxp-installer) <br />

![image.png](https://gw.alipayobjects.com/zos/OasisHub/1e996008-498c-4845-953b-8d39f05503e0/1597674042809-af5a084f-f21b-4bf4-b0d4-7404466b2a1e.png)

- 打开AE,点击“编辑”>“首选项”>“常规”菜单项,选中“允许脚本写入文件和访问网络”,点击确定。  


![image.png](https://gw.alipayobjects.com/zos/OasisHub/22b31fcd-2b6e-4691-abd1-b173ccab87e7/1597674058269-f2242296-32c5-4ae9-973b-2943e04e94bc.png)
- 点击“窗口”>“扩展”>“Bodymovin”菜单项,就可以打开Bodymovin的界面使用插件了。

![image.png](https://gw.alipayobjects.com/zos/OasisHub/cb002ffc-4b59-4dbd-a85d-56e0c1809475/1597674100420-41e2440c-fe9a-4280-8000-4f384ccdf9c3.png)

- 打开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%;" />

0 comments on commit 282490c

Please sign in to comment.