> 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-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;">1.常用操作指引(手指动画)</mark>

<table data-full-width="false"><thead><tr><th width="133">手指动画</th><th width="142">图示</th><th width="358">制作步骤</th><th>图示</th></tr></thead><tbody><tr><td><strong>原地点击</strong></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FdgPaD4IHcn0KDxkXELOr%2FAnimation1.gif?alt=media&amp;token=59c582bf-4872-4270-9d00-fc260a526713" alt="" data-size="original"></td><td><ul><li>手指图片：添加动画-通用-缩放缓动，参数设置如右图1</li><li>点击特效图片（选做）：添加动画-通用-缩放缓动，参数设置如右图2；继续添加透明度缓动，参数设置如右图3；若想实现双层光圈效果，可再复制一个光圈图层，将两个动画的“延迟时间”改为0.2s即可</li></ul></td><td><p><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F04dP5WrRNaAmxRhNdkhI%2Fimage.png?alt=media&amp;token=2ac703b5-3e3d-4201-8b0f-5fb1b1b5b097" 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%2F5hhcj2YRvyBpxNh7egq9%2Fimage.png?alt=media&amp;token=b7006142-fecc-4f9d-86be-acaff89e75fe" 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%2FJS27nGWfaxrSDmbH2fXU%2Fimage.png?alt=media&amp;token=9af18a71-1e0b-4f12-a917-4812094e64b5" alt="" data-size="original"></p></td></tr><tr><td><strong>移动点击</strong></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FW4E6LpCeRDy26bWfppSs%2FAnimation2.gif?alt=media&amp;token=7065705f-80a0-4a9c-963e-6bb063bb3c71" alt="" data-size="original"></td><td><ul><li>手指图片：添加动画-通用-位移缓动，参数设置如右图</li></ul></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FDAbPUtZ92bePh94SAdKt%2Fimage.png?alt=media&amp;token=26df2806-40f9-45a9-9605-23bd74c3856a" alt="" data-size="original"></td></tr><tr><td><strong>按钮二选一</strong></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FnfNh4K7mU8FPgxNLMEas%2FAnimation3.gif?alt=media&amp;token=4c678e1c-5666-4dae-af17-5c38d4c02398" alt="" data-size="original"></td><td><ul><li>手指图片：添加动画-通用-位移缓动，参数设置如右图1；继续添加缩放缓动，参数设置如右图2</li><li>选项按钮：为左侧按钮组添加动画-通用-缩放缓动，参数设置如右图3；复制该动画到右侧按钮组，调整动画曲线为反方向即可，参数设置如右图4</li></ul></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F4qoUspPnnJpfEJgoC2KH%2Fimage.png?alt=media&amp;token=c5dde2f1-6cd4-4834-a26e-24c62c157162" alt=""><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FxUpHRyiV9puTvTGrighE%2Fimage.png?alt=media&amp;token=3aa9a375-0e00-478c-bde3-86f60640a0e2" alt=""><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FguuenLVKs602pCFclZUu%2Fimage.png?alt=media&amp;token=91d748c2-8ae1-4ebe-98a9-70f6aa5a2502" alt=""><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FxDiQ4WZBCFHqQoFRxvbF%2Fimage.png?alt=media&amp;token=39d1cb5f-88e9-4480-8e0f-1e4e14825d51" alt=""></td></tr><tr><td><strong>按钮四选一</strong></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FsPOMp1OF2IrfqrrGU878%2FAnimation4.gif?alt=media&amp;token=b2c8dfad-2ff1-449e-a3bb-4dd1f70bf70b" alt="" data-size="original"></td><td><ul><li>手指图片(横向运动)：添加动画-通用-位移缓动，参数设置如右图1；(选做)继续添加缩放缓动&#x26;透明度缓动，参数设置如右图2&#x26;3</li><li>手指图片组(纵向运动)：添加动画-通用-位移缓动，参数设置如右图4</li><li>选项按钮：添加动画-通用-缩放缓动，依次调整曲线即可</li></ul></td><td><p><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FJPyir1JEGZZTxdU5Yez5%2Fimage.png?alt=media&amp;token=20915fc7-a96c-4352-8e72-0ed4a9f85e9a" 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%2FZdyJGZhI2aLG1LYC8KPw%2Fimage.png?alt=media&amp;token=b06ec32c-dbaf-4c70-a2bd-fa14c6e38f21" alt=""></p><p><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FXJNaXqwPbammU7d3BFjg%2Fimage.png?alt=media&amp;token=10a8e983-5932-4cfd-a6c8-cf02e4c64c7a" alt=""></p><p><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FRrH0x06LrJOpnucPkZ1S%2Fimage.png?alt=media&amp;token=8c6383d1-68c5-480e-81a6-04acfce1bae9" alt=""></p></td></tr><tr><td><strong>左右滑动</strong></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F0amhy2fYIA0XPNwPi2vZ%2FAnimation5.gif?alt=media&amp;token=0e2e1f5d-4f63-4579-9a66-2e4162939350" alt="" data-size="original"></td><td><ul><li>手指图片：添加动画-通用-位移缓动，参数设置如右图</li></ul></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fpf5cU9CK7Pz0afqFCpPb%2Fimage.png?alt=media&amp;token=61bf2569-6786-4fb9-a326-58471dfba796" alt="" data-size="original"></td></tr><tr><td><strong>滑动切割</strong></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FxoJV2tRHT2FT180dufOV%2FAnimation6.gif?alt=media&amp;token=9f5fc9a0-907b-4722-bdd8-2be3e2b70844" alt="" data-size="original"></td><td><ul><li>手指组：添加动画-通用-位移缓动，参数设置如右图1；继续添加透明度缓动，参数设置如右图2</li><li>拖尾效果（选做）：可直接将拖尾图片置于手指组内，跟随组动画一起运动</li></ul></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FjCHJYyTs9W3JZboLgnxR%2Fimage.png?alt=media&amp;token=678f4827-544b-4c6c-bd0f-57667a0c0bf9" alt=""><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fxd65q4rFhfB19xbG4KjE%2Fimage.png?alt=media&amp;token=e62ddcf0-4e93-4c8d-ba00-153bfc7b9fe8" alt=""></td></tr><tr><td><strong>八字滑动</strong></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FxhtOBTWlE8uZjeTSLnSl%2FAnimation7.gif?alt=media&amp;token=ddb1592b-bba7-4880-96b2-1d7ff7880d89" alt="" data-size="original"></td><td><ul><li>手指图片(横向运动)：添加动画-通用-位移缓动，参数设置如右图1</li><li>手指图片组(纵向运动)：添加动画-通用-位移缓动，参数设置如右图2</li></ul></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FBMdFU42HfBgzs2c2KbdV%2Fimage.png?alt=media&amp;token=733aa233-4c24-4f0e-af3b-b4ce914c77b6" alt=""><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F0s2y0JYECxXNJnaTE564%2Fimage.png?alt=media&amp;token=b88ee06d-93a6-4b50-977b-2638e697c100" alt=""></td></tr><tr><td><strong>从A点拖到B点</strong></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fd9fjPJMStYN5wKSZHvpR%2FAnimation8.gif?alt=media&amp;token=d192dad4-e30e-4e78-ac8e-c9009f22c843" alt="" data-size="original"></td><td><ul><li>手指图片：添加动画-通用-位移缓动，参数设置如右图1</li><li>开头结尾透明度效果（选做）：在手指组上添加动画-通用-透明度缓动，参数设置如右图2；继续添加透明度缓动，参数设置如右图3</li></ul></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F1rAAjUXnngwRvnkAwtFR%2Fimage.png?alt=media&amp;token=bc602d99-3767-4257-b10b-777a8cb4fe34" alt=""><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fk6v3TPSUaoMjQEX5pSus%2Fimage.png?alt=media&amp;token=51fbe458-b5e9-49e7-9553-45676ebb2535" alt=""><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FTwDhN0NmZ6oPPutSjQgG%2Fimage.png?alt=media&amp;token=3443c8c0-72e4-4651-8840-d3fdf6857604" alt=""></td></tr></tbody></table>

####

## <mark style="color:blue;">2.如何设置人物呼吸感动画</mark>

1）选中人物图层，将锚点修改为（50,100）

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FUEy3YahekICZpkPXDiHU%2Fimage.png?alt=media&amp;token=38189cb9-5065-4b3c-8117-9b4fde2b7d0f" alt=""><figcaption></figcaption></figure>

2）为人物图层添加动画-通用-缩放缓动，具体参数设置如下：

注：可根据实际需求，通过调整【结束比例】来控制人物缩放幅度的大小

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FHqyQS5oP8rbFMGjc029M%2Fimage.png?alt=media&amp;token=ac38d395-7ba0-46e1-adbc-770cdcbd364c" alt=""><figcaption></figcaption></figure>

####

## <mark style="color:blue;">3.如何制作进度条</mark>

1）准备两张图片：底图+进度条

<mark style="color:red;">注意：进度条图片左右需贴边，不能留空</mark>

2）选中进度条图层，将锚点修改为（0,50），并调整到合适位置

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FJYG8XoZnfRmAw64tFJEC%2Fimage.png?alt=media&amp;token=98612818-fa13-46c3-9af6-f6523e0dc384" alt=""><figcaption></figcaption></figure>

3）为进度条图层添加动画-通用-缩放缓动，重要参数设置：播放1次 / 起始比例X轴设为0，Y轴不变默认为1，结束比例不变默认为1。

具体参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FZOHANvZulZ1k3ziiHAKJ%2Fimage.png?alt=media&amp;token=9feacf96-eb66-4ea2-8560-fa20df1768e9" alt=""><figcaption></figcaption></figure>

####

## <mark style="color:blue;">4.如何制作血条</mark>

1）准备两张图片：底图+血条

注意：血条图片左右需贴边，不能留空

2）选中血条图层，将锚点修改为（0,50），并调整到合适位置

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fiwm2ZmICjg5CdIPjW3aV%2Fimage.png?alt=media&amp;token=ec95fc20-bd87-437f-83ab-23171ef3282e" alt=""><figcaption></figcaption></figure>

3）为血条图层添加动画-通用-缩放缓动，重要参数设置：播放1次 / 起始比例不变，结束比例Y轴不变，都默认为1，仅调整结束比例X轴的数值即可（此处的数值代表最终血量）。

具体参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F0iaRyNyCcRo6NY9LSXDG%2Fimage.png?alt=media&amp;token=5d263073-8a35-4ba9-a190-5eea7fed5c63" alt=""><figcaption></figcaption></figure>

####

## <mark style="color:blue;">5.制作"资产围绕某一原点旋转"的效果</mark>

以螺丝解谜玩法为例，想实现：以螺丝为原点，木板向右旋转180°的效果

1）点击空白位置，新建一个内容为空的组图层

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F1E3gffGfvcajRFgjJuvf%2Fimage.png?alt=media&amp;token=625d36e6-5ea9-4ade-8f0c-92729764d347" alt=""><figcaption></figcaption></figure>

2）将组的位置移动到螺丝所在的位置，即旋转原点的位置（可使用复制粘贴功能，快速复用螺丝的位置）

3）选中group组，添加"旋转缓动"动画

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FKC5D0bxLmzNH1OedSNix%2Fimage.png?alt=media&amp;token=44a95231-45f9-4c57-a598-b9962c0b77bb" alt=""><figcaption></figcaption></figure>

4）旋转动画参数设置参考下图，可根据实际情况自行调整参数

5）将木板图层拖进group组即完成设置

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fxvyc5rTJ64hj4VBXJS6w%2Fimage.png?alt=media&amp;token=d9f83531-69bc-45fe-9552-582f00cce962" alt=""><figcaption></figcaption></figure>

####

## <mark style="color:blue;">6.制作"模拟角色来回奔跑"的效果</mark>

举例：我有一个角色原地奔跑的序列帧，怎么实现角色来回奔跑的效果？

动画设置核心逻辑：使用位移动画+缩放动画，角色位移到终点时将缩放动画的值从(1,1)改为(-1,1)。具体参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FuPUtVzIDnS46JI3C6cni%2Fimage.png?alt=media&amp;token=672b803f-0cd3-41bb-8888-27b579a6f810" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FJ3afd8oDTBBrCXNVaIaZ%2Fimage.png?alt=media&amp;token=96b8d890-6a6f-408a-87c2-54a2195a7e21" alt=""><figcaption><p>缩放动画曲线样式示意</p></figcaption></figure>

## <mark style="color:blue;">7.位移动画制作 不规则/曲线运动路径</mark>

做非直线的位移动画，<mark style="color:red;">**制作逻辑是：**</mark>给物品图片编组，在图片和组图层上分别设置位移动画(一个用来做横向的运动，一个用来做纵向的)，两个动画一起播放来实现效果。

注意：物品具体的运动轨迹 取决于[变化曲线](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/pages/ZSRTi2Vozkvo59R0dIFY#id-2.-te-bie-shuo-ming-bian-hua-qu-xian)的设置

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FudSp3sgekHTKRsGz1Dgw%2FAnimation1.gif?alt=media&amp;token=0db87519-d47b-4663-aa1a-85bcaf1bb0b7" alt="" width="267"><figcaption></figcaption></figure></div>

🌟以上图手指指引动画为例：

* 为手指图片\[gf\_hand]添加位移动画，用来做**横向**的运动轨迹
* 为组图层\[group\_hand]添加位移动画，用来做**纵向**的运动轨迹

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FAe0yKyVOVhv4s1wdp5m7%2Fimage.png?alt=media&amp;token=de271592-f9d9-403a-8745-cb90d2d9f9f6" alt=""><figcaption><p>位移缓动X</p></figcaption></figure>

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fa5eC8Ij1iCkLvL5UfDWy%2Fimage.png?alt=media&amp;token=efd3bc2c-7fb2-45c8-b5f6-06bcb5296103" alt=""><figcaption><p>位移缓动Y</p></figcaption></figure>

* 还可添加其他资源及动画，丰富指引效果

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FrnbH4mXoLkiNowFNBIOD%2Fimage.png?alt=media&amp;token=9c214c41-3541-45d3-8d8a-fcc2b2f79899" alt=""><figcaption></figcaption></figure></div>