# 动画-图层参数

**动画是什么？为什么要添加动画？**

动画是指在静止图片上添加一些过渡或强调效果，使图片看起来像是在运动。

在制作可玩素材时，我们几乎都会使用到静帧图片，通过给静帧图片设置动画，画面能够变得更加生动，指引性更强，从而提升内容的吸引力和用户的试玩体验。例如，利用动画可以模拟物体的移动、缩放、旋转等动态效果，达到更具表现力的视觉效果。

## <mark style="color:blue;">一、动画的使用</mark> <a href="#yi-chu-fa-shi-jian-de-shi-yong" id="yi-chu-fa-shi-jian-de-shi-yong"></a>

### 1.添加动画 <a href="#id-1.-tian-jia-chu-fa-shi-jian" id="id-1.-tian-jia-chu-fa-shi-jian"></a>

1）选中需要添加动画的 单个图层 或 组图层

2）点击【+添加动画】，从四种动画类型中选择合适的动画即可

3）进一步调整动画参数，完成动画的设置

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FvbgX6M3lHoMQmXPoebFW%2Fimage.png?alt=media&#x26;token=c50ad312-493b-4a4e-a106-4e4bf5ebbe63" alt=""><figcaption></figcaption></figure></div>

### 2.预览动画

1）点击图示按钮或【播放】，可在画布内预览当前单个动画

2）若同一图层有多个动画，可点击【播放全部动画】在画布内预览该图层的所有动画

3）点击【停止】或【停止动画播放】，暂停预览动画，动画回到初始状态

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FWXpClvXDCzViBZpb8zqF%2Fimage.png?alt=media&#x26;token=300f393c-59ef-4d4d-b87f-02f79a190c09" alt=""><figcaption></figcaption></figure></div>

### 3.替换/删除动画

点击图示按钮，可替换当前动画类型/删除动画

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FISnL1PanDy8DAF7yS6v9%2Fimage.png?alt=media&#x26;token=e10fc437-3fd7-4923-943b-d1be54fd0a8b" alt=""><figcaption></figcaption></figure></div>

### 4.复制动画

1-1）复制单个动画：点击图示按钮，复制当前单个动画

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FkJaZtaIfrAC1kW89DcL1%2Fimage.png?alt=media&#x26;token=69ff282f-f62d-4562-955e-6686794ef2c1" alt=""><figcaption></figcaption></figure></div>

1-2）复制多个动画：选中有动画的图层，点击复制按钮

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FQQtPJ75BWrPNMkmY9J8s%2Fimage.png?alt=media&#x26;token=9eccc4d3-1fb8-4a42-9f4e-77f801806c6d" alt=""><figcaption></figcaption></figure></div>

2）而后选中需要应用该动画的图层>>>粘贴>>>仅粘贴图层动画

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FHkKEnZvp1CpiaRYs2iEC%2Fimage.png?alt=media&#x26;token=9303ff78-b230-487c-8728-51017d891421" alt=""><figcaption></figcaption></figure></div>

### 5.应用到同层级的全部图层

点击图示按钮【应用到同层级的全部图层】，可将当前选中图层的所有动画一键复制粘贴到<mark style="color:red;">和该图层同一层级的所有图层</mark>下

（当您有较多同一层级的图层 需要制作相同的动画时，可使用该功能快速复用）

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fa4lCayIvjOaouxFu1YSY%2Fimage.png?alt=media&#x26;token=1d8caaa8-7c11-4d32-aa05-2782da1fef93" alt=""><figcaption></figcaption></figure></div>

####

## <mark style="color:blue;">二、动画的类别及参数</mark>

动画包&#x542B;**【进场动画】【退场动画】【强调动画】【通用】**&#x34;种动画类型，不同的动画其参数也不相同

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FB2gx9On5ziNPsiK025MW%2Fimage.png?alt=media&#x26;token=2e0a894d-17d7-400c-8e1b-3032eadbafab" alt=""><figcaption></figcaption></figure></div>

### 1.循环次数/延迟时间/持续时间/自动播放/动画名称/位移/缩放/透明度/旋转角度/颜色变化

<table><thead><tr><th width="205">截图</th><th width="121">参数类型</th><th width="174">参数说明</th><th>补充说明</th></tr></thead><tbody><tr><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FJDCY5USpoqbquqa9pYMz%2Fimage.png?alt=media&#x26;token=fd641034-d649-4181-b8b5-ae99f2fbe257" alt="" data-size="original"></td><td><strong>循环次数</strong></td><td><p>支持3种选项：</p><p>播放1次</p><p>单向循环</p><p>双向循环</p></td><td><p><strong>1.播放1次：</strong>动画仅播放1次，播完停止</p><p><strong>2.单向循环：</strong>重复K1~K3的动画<br><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FY0xDYyIOMQs8jNWuhM94%2F%E3%80%90AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E3%80%91loop%20%E5%BE%AA%E7%8E%AF%E8%AF%A6%E8%A7%A3_%E6%9C%88%E7%A6%BB%E7%9A%84%E4%B8%87%E4%BA%8B%E5%B1%8B.gif?alt=media&#x26;token=20266389-816d-40db-a476-7a30490d1933" alt=""><br><strong>3.双向循环：</strong>从K1到K3后，再从K3回到K1，如此往复<br><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FMlITssVbRc0MXJLTyHb7%2F%E3%80%90AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E3%80%91loop%20%E5%BE%AA%E7%8E%AF%E8%AF%A6%E8%A7%A3_%E6%9C%88%E7%A6%BB%E7%9A%84%E4%B8%87%E4%BA%8B%E5%B1%8B%20(1).gif?alt=media&#x26;token=021ff314-c60b-46cc-b5e7-1257d1f9d1a4" alt=""></p></td></tr><tr><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FSvYzoS7TE0mGDoQUTuGF%2Fimage%20(73).png?alt=media&#x26;token=70f2e3cb-c0e8-450c-a244-4b5d4dbb7d25" alt=""></td><td><strong>延迟时间</strong></td><td>动画延迟出现/播放的时长</td><td><mark style="color:red;">进入动画所在的场景</mark>后开始自动计时</td></tr><tr><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FL5ZUf6Lu1msBqFECZxqv%2Fimage%20(74).png?alt=media&#x26;token=c639ca77-470f-4f82-ae6c-84eed28e0443" alt=""></td><td><strong>持续时间</strong></td><td>完整播一次动画所需要的时长</td><td>同一个动画，其持续时间越长，动画播放速度越慢；反之则越快</td></tr><tr><td><p><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FpzbENwR5UfujYMFLim6i%2Fimage.png?alt=media&#x26;token=0b828917-c30a-4c82-b3af-cd1fda4b3a09" alt="" data-size="original"></p><p><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fp0yoCnJLtqUzXmfIaOAW%2Fimage.png?alt=media&#x26;token=aea2ca92-84de-44b7-b08b-724050824c44" alt=""></p></td><td><strong>自动播放</strong></td><td><p>默认自动播放；</p><p></p><p>支持关闭自动播放</p></td><td><p><strong>1.自动播放：</strong><mark style="color:red;">进入动画所在的场景</mark>后开始自动播放</p><p><mark style="color:orange;">(<strong>注意:</strong> 若动画所在图层的初始状态为"隐藏"状态，则动画会在图层初次显示时自动播放)</mark></p><p><strong>2.关闭自动播放：</strong>关闭后，动画默认不播放，需通过设置事件控制动画的播放</p></td></tr><tr><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fq8sypra2CwSaYhIB9mWk%2Fimage.png?alt=media&#x26;token=b82152f2-92d9-467d-a5fa-9e4aee918e3e" alt="" data-size="original"></td><td><strong>动画名称</strong></td><td>支持自定义动画名称</td><td>Tips：当项目内添加了较多动画，可重命名动画，方便在设置事件时查找使用</td></tr><tr><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F7xoYzx8vPhOB9XEHp0yG%2Fimage.png?alt=media&#x26;token=d42f60cb-2e81-4bc7-9c8b-ccf31503d2b6" alt="" data-size="original"></td><td><strong>透明度</strong></td><td>需设置"起始状态"和"结束状态"数值</td><td><p>数值范围0%~100%</p><p>0%：完全透明</p><p>100%：完全显示</p></td></tr><tr><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FlIhTEkDc4AccL1iCfMt9%2Fimage.png?alt=media&#x26;token=098c80f5-d24f-4f3c-9b45-dee28e5eaf44" alt="" data-size="original"></td><td><strong>缩放</strong></td><td><p>需设置"起始比例"和"结束比例"数值；</p><p></p><p>支持起始/结束比例设置成当前值</p></td><td><p>Scale X：图层横向的比例</p><p>Scale Y：图层纵向的比例</p></td></tr><tr><td><p><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FJVlEWs829UMQS9JtY1Pt%2Fimage.png?alt=media&#x26;token=c1b58f3d-31db-4806-9bf4-1994c1b94749" alt="" data-size="original"></p><p></p><p><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fu5ySVbPUdt4kdXv0Y3bv%2Fimage.png?alt=media&#x26;token=97dcf5d8-caa6-4214-87d2-1d8ea384177a" alt=""></p><p></p><p><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F7VNE68Hel9V9RkKNz66R%2Fimage.png?alt=media&#x26;token=bd81551b-16ba-4974-ad41-1d9e4381b4b6" alt=""></p></td><td><strong>位移</strong></td><td><p><strong>1.需设置X轴和Y轴的位移距离：</strong>正数为向下/向右；负数为向上/向左；</p><p>可点击图示标红箭头微调位移距离；</p><p></p><p><strong>2.支持快捷编辑位移结束位置：</strong>点击【编辑结束位置】，在画布中将半透明图层拖拽到目标位置后【保存结束位置】即可</p></td><td><p><mark style="color:red;"><strong>3.位移距离支持横竖屏拆分设置：</strong></mark></p><p>默认勾选，勾选则代表竖屏与横屏的位移距离需分别调整(如已经在竖屏下设置好的位移距离不会应用于横屏)；</p><p>取消勾选代表横竖屏共用相同的位移距离，无需切换调整</p><p><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FSGxyDLEhlmHvqZUpWcHj%2Fimage.png?alt=media&#x26;token=78834907-5538-46f1-be51-d4a562e60c8b" alt="" data-size="original"></p><p><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FCaYY015rgtlLXClYa9ks%2Fimage.png?alt=media&#x26;token=1b3f0e93-234b-48af-94d1-64b721269db5" alt="" data-size="original"></p></td></tr><tr><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fo7STTbMi1r10LesddQP5%2Fimage.png?alt=media&#x26;token=b3282fab-109a-45e0-a88a-44606ea7e68f" alt="" data-size="original"></td><td><strong>旋转角度</strong></td><td>需设置"起始状态"和"结束状态"数值</td><td>数值无要求，可设置任意角度</td></tr><tr><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fj6E2OX261jWt8TAwLQCo%2Fimage.png?alt=media&#x26;token=2f8098e8-d29f-4317-8373-2752f25e9bda" alt="" data-size="original"></td><td><strong>颜色变化</strong></td><td>需设置"开始颜色"和"结束颜色"</td><td><p>在色板中选取颜色或使用取色器快捷选色</p><p><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FzA3x528AoLUNSblMXwnV%2Fimage.png?alt=media&#x26;token=5c6b5362-df2d-4595-a5a7-d2a23e8cffcf" alt=""></p></td></tr></tbody></table>

### <mark style="color:red;">2.特别说明:变化曲线</mark>

【通用】类动画额外支持编辑动画的 变化曲线

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FONWPtbJu7SOkSiZWwvPz%2Fimage.png?alt=media&#x26;token=16c947bd-53d9-4b8b-aaca-916e7e50bbc6" alt=""><figcaption></figcaption></figure></div>

#### 2.1 什么是变化曲线？

"变化曲线"是对动画的自定义、精细化编辑。若当前预设的动画都无法满足您的制作需求，可通过自定义"变化曲线"来制作更高阶更复杂的动画

#### 2.2 编辑变化曲线

**1）点击曲线缩略图打开曲线编辑器：**

* 横轴代表时间，纵轴代表动画对应的各种变量（位移、透明度、缩放比例、旋转角度等）；
* 起点(0, 0)为动画运动的默认初始状态，终点(1, 1)为动画运动的默认结束状态；
* 横向移动锚点会直接改变物体运动时间，调整曲线斜率会直接改变物体运动速度的分布（曲线越陡峭速度越快，曲线越平缓速度越慢）

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FNYjebLUeONnUfE2lehy8%2Fimage.png?alt=media&#x26;token=8e02caa8-4929-48bf-aff9-05172b76d268" alt=""><figcaption></figcaption></figure></div>

**2）编辑曲线样式：**

* **选择曲线模板：**&#x66F2;线编辑器预设了6种曲线样式，点击即可使用
* **自定义曲线样式：**
  * <mark style="color:red;">在曲线的任意位置</mark><mark style="color:red;">**双击**</mark><mark style="color:red;">可添加关键帧</mark>
  * 选中关键帧，拖拽手柄或点击右侧选项可调整曲线弧度
  * 选中关键帧后支持删除当前关键帧
  * 针对自定义的曲线样式，可点击【保存当前曲线】并编辑名称，将曲线样式设为模板，方便后续调用
* 曲线设置完成后，需点击【保存】才会生效

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FHomP3bLlpPELPBFtsk2R%2Fimage.png?alt=media&#x26;token=bf90d74d-66d4-4db9-b7f0-fb9650d5730a" alt="" width="563"><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FtocSqJryzeHvsyAQi6Ff%2Fimage.png?alt=media&#x26;token=c5fc43bf-a97b-4b72-a997-19bee3f9409a" alt="" width="563"><figcaption></figcaption></figure></div>

#### 2.3 举例说明

以动画*位移缓动*为例，横轴代表时间，纵轴代表位移距离，下面列举2个常见动画的调整方法

| **a. 物体在起点停留一段时间后，再开始运动**                                                                                                                                                                                                                                    | **b. 物体在始末位置停留一段时间，并来回运动**                                                                                                                                                                                                                                   |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 将曲线起点向右移动（延迟动画开始时间），物体会在红框时间段内完成移动；                                                                                                                                                                                                                          | <p>① 动画【循环次数】选择：双向循环；</p><p>② 将曲线起点向右移动，并将曲线终点向左移动（延迟动画开始时间并提早结束动画），物体会在红框时间段内完成移动；</p>                                                                                                                                                                      |
| <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fqux9Xa5mELYR7ogAehXu%2Fimage.png?alt=media&#x26;token=72e0c2f3-5e59-4fdc-acc7-c41ba9e75aa1" alt="" data-size="original">   | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FLAUcFhrWSvFqsR9p646q%2Fimage.png?alt=media&#x26;token=6407fdf7-2caa-4f68-a950-1b8ad94595e3" alt="" data-size="original">   |
| <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Ff22u6newW9J9eHKy9ntj%2Fimage1.webp?alt=media&#x26;token=1129ca3e-7771-4a7d-97fe-b1bd55a9b2c3" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F2rv0awwKmkNSXCITwNZ9%2Fimage2.webp?alt=media&#x26;token=3d509016-fde1-41e4-ad9f-6a8db8d1b7a9" alt="" data-size="original"> |

更多常用动画的设置方法可查阅 [zhi-zuo-ji-qiao-dong-hua-she-zhi](https://doc.playturbo.cn/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-zhi-zuo-ji-qiao-zhong-xin/tong-yong-zhi-zuo-ji-qiao/zhi-zuo-ji-qiao-dong-hua-she-zhi "mention")

####

## <mark style="color:blue;">三、支持添加动画的资产类型</mark>

资产类型决定了其是否支持添加和使用动画，详情如下：

<table><thead><tr><th width="187">资产类型</th><th>动画功能支持情况</th></tr></thead><tbody><tr><td><strong>图片</strong> </td><td>✅</td></tr><tr><td><strong>文本</strong></td><td>✅ </td></tr><tr><td><strong>序列帧</strong></td><td>✅</td></tr><tr><td><strong>粒子</strong></td><td>✅</td></tr><tr><td><strong>龙骨</strong></td><td>✅</td></tr><tr><td><strong>组图层</strong></td><td>✅</td></tr><tr><td><strong>视频</strong></td><td>不支持动画</td></tr><tr><td><strong>音频</strong></td><td>不支持动画</td></tr><tr><td><strong>背景音乐</strong></td><td>不支持动画</td></tr><tr><td><strong>手势区域</strong></td><td>不支持动画</td></tr><tr><td><strong>场景</strong></td><td>不支持动画</td></tr></tbody></table>

<mark style="color:blue;">👉推荐阅读：</mark> [dong-hua-wen-ti](https://doc.playturbo.cn/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-faq/dong-hua-wen-ti "mention")  [zhi-zuo-ji-qiao-dong-hua-she-zhi](https://doc.playturbo.cn/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-zhi-zuo-ji-qiao-zhong-xin/tong-yong-zhi-zuo-ji-qiao/zhi-zuo-ji-qiao-dong-hua-she-zhi "mention")  [#id-8.-dong-hua-icon](https://doc.playturbo.cn/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-shi-yong-zhi-nan/tu-ceng-qu#id-8.-dong-hua-icon "mention")