> For the complete documentation index, see [llms.txt](https://doc.playturbo.cn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.playturbo.cn/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-shi-yong-zhi-nan/bian-ji-ye-mian-fen-qu-jie-shao/can-shu-she-zhi-qu/dong-hua-tu-ceng-can-shu.md).

# 动画-图层参数

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

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

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

## <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="/files/0jhdqcyig8FAR53dU0hP" alt=""><figcaption></figcaption></figure></div>

### 2.预览动画

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

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

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

<div align="left"><figure><img src="/files/C4ciPz2FkNRwwACizGu5" alt=""><figcaption></figcaption></figure></div>

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

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

<div align="left"><figure><img src="/files/D2jdCGdaf1vyjD7MfO3Q" alt=""><figcaption></figcaption></figure></div>

### 4.复制动画

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

<div align="left"><figure><img src="/files/NYCdn0kXxNipli9zKVxI" alt=""><figcaption></figcaption></figure></div>

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

<div align="left"><figure><img src="/files/KmPR1jxTdWezBZtZ8RHj" alt=""><figcaption></figcaption></figure></div>

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

<div align="left"><figure><img src="/files/6RkfLJHaGYiNidZSQW2l" alt=""><figcaption></figcaption></figure></div>

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

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

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

<div align="left"><figure><img src="/files/YH7ORw0L7E93oEpBrfwt" alt=""><figcaption></figcaption></figure></div>

####

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

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

<div align="left"><figure><img src="/files/QeL2Xc8j2gheBtnEHSaX" 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="/files/PpM4bHUOzjDyJiqtAkly" 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="/files/dBgSyrt1SzGVwnPqp6fA" alt=""><br><strong>3.双向循环：</strong>从K1到K3后，再从K3回到K1，如此往复<br><img src="/files/1ex63jZ7Z6qUSQQOFjLb" alt=""></p></td></tr><tr><td><img src="/files/2bxUe362TNf2bbRaMTOG" alt=""></td><td><strong>延迟时间</strong></td><td>动画延迟出现/播放的时长</td><td><mark style="color:red;">进入动画所在的场景</mark>后开始自动计时</td></tr><tr><td><img src="/files/Xe93fn0zpUwc3duwovyV" alt=""></td><td><strong>持续时间</strong></td><td>完整播一次动画所需要的时长</td><td>同一个动画，其持续时间越长，动画播放速度越慢；反之则越快</td></tr><tr><td><p><img src="/files/QIPyNovuXmMzLiCKQjIj" alt="" data-size="original"></p><p><img src="/files/1sA3sW2jAb2w2oZZ1c07" 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="/files/a8z18Tod9wW9jBzTDGKj" alt="" data-size="original"></td><td><strong>动画名称</strong></td><td>支持自定义动画名称</td><td>Tips：当项目内添加了较多动画，可重命名动画，方便在设置事件时查找使用</td></tr><tr><td><img src="/files/tOAOgVoiuGfMJfALOEBg" 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="/files/4aa44gHIZpQ4rXuE1pO1" 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="/files/yXZ1TjuZImtOZaMEtUMu" alt="" data-size="original"></p><p></p><p><img src="/files/prbAHscmwtUAxuTlzzeL" alt=""></p><p></p><p><img src="/files/ruYusV3eRu9RDxxga3fp" 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="/files/t8BccAJ30YVd2MfuPyLF" alt="" data-size="original"></p><p><img src="/files/mcbThXPC3tofDA7bvk7W" alt="" data-size="original"></p></td></tr><tr><td><img src="/files/7EelEbz7SInCa5vHygRP" alt="" data-size="original"></td><td><strong>旋转角度</strong></td><td>需设置"起始状态"和"结束状态"数值</td><td>数值无要求，可设置任意角度</td></tr><tr><td><img src="/files/5dP32HbYBnJJxhEZ8yis" alt="" data-size="original"></td><td><strong>颜色变化</strong></td><td>需设置"开始颜色"和"结束颜色"</td><td><p>在色板中选取颜色或使用取色器快捷选色</p><p><img src="/files/Z7OnDo4kTYkTPEXoLsG7" alt=""></p></td></tr></tbody></table>

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

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

<div align="left"><figure><img src="/files/DkxJ7UBp3i1HmJtskJYk" alt=""><figcaption></figcaption></figure></div>

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

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

#### 2.2 编辑变化曲线

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

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

<div align="left"><figure><img src="/files/wzsps5FtKjOZqHEhJTQ7" 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="/files/aoEbxpPnNSISd1RXUjqN" alt="" width="563"><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="/files/2Ls5PE2ZMzDp6iJXwson" alt="" width="563"><figcaption></figcaption></figure></div>

#### 2.3 举例说明

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

| **a. 物体在起点停留一段时间后，再开始运动**                                           | **b. 物体在始末位置停留一段时间，并来回运动**                                                              |
| ------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
| 将曲线起点向右移动（延迟动画开始时间），物体会在红框时间段内完成移动；                                 | <p>① 动画【循环次数】选择：双向循环；</p><p>② 将曲线起点向右移动，并将曲线终点向左移动（延迟动画开始时间并提早结束动画），物体会在红框时间段内完成移动；</p> |
| <img src="/files/adKLsFwTdbOwyDgvDIjV" alt="" data-size="original"> | <img src="/files/oya1XdrHnEbqfWe5bpeu" alt="" data-size="original">                     |
| <img src="/files/a6fdsLZtNPRyqOdY2BJE" alt="" data-size="original"> | <img src="/files/Avto14hHULHDa6X9HmGe" alt="" data-size="original">                     |

更多常用动画的设置方法可查阅 [制作技巧-动画设置](/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.md)

####

## <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> [动画问题](/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-faq/dong-hua-wen-ti.md)  [制作技巧-动画设置](/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.md)  [/pages/auPnGWqowFDcrMaOem0L#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/bian-ji-ye-mian-fen-qu-jie-shao/can-shu-she-zhi-qu/pages/auPnGWqowFDcrMaOem0L#id-8.-dong-hua-icon "mention")