> 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="/files/VO5YAnu7L4JA9m0NArH1" alt="" data-size="original"></td><td><ul><li>手指图片：添加动画-通用-缩放缓动，参数设置如右图1</li><li>点击特效图片（选做）：添加动画-通用-缩放缓动，参数设置如右图2；继续添加透明度缓动，参数设置如右图3；若想实现双层光圈效果，可再复制一个光圈图层，将两个动画的“延迟时间”改为0.2s即可</li></ul></td><td><p><img src="/files/0M5wnqg6X68RFSXrhofe" alt="" data-size="original"></p><p><img src="/files/hcQyDrSKVtWF8oKYUYDa" alt="" data-size="original"></p><p><img src="/files/wdhJKMjA2wo2dhjxex9o" alt="" data-size="original"></p></td></tr><tr><td><strong>移动点击</strong></td><td><img src="/files/DGh3tImF1Tj0eum7wVhy" alt="" data-size="original"></td><td><ul><li>手指图片：添加动画-通用-位移缓动，参数设置如右图</li></ul></td><td><img src="/files/nTCPdmqJ1ytsmiiXll6q" alt="" data-size="original"></td></tr><tr><td><strong>按钮二选一</strong></td><td><img src="/files/3au5Yz99zQTOIj4bFelR" alt="" data-size="original"></td><td><ul><li>手指图片：添加动画-通用-位移缓动，参数设置如右图1；继续添加缩放缓动，参数设置如右图2</li><li>选项按钮：为左侧按钮组添加动画-通用-缩放缓动，参数设置如右图3；复制该动画到右侧按钮组，调整动画曲线为反方向即可，参数设置如右图4</li></ul></td><td><img src="/files/knx2mGsapHIYs29nfa5Z" alt=""><img src="/files/AUZQc5qnHaD0uKS5nmMx" alt=""><img src="/files/bIHhoxtnGy7pRaI57a0z" alt=""><img src="/files/VjrRbx3vnnzc6p6yO6gH" alt=""></td></tr><tr><td><strong>按钮四选一</strong></td><td><img src="/files/tYvlKWDxCQMtJSSaN4l8" 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="/files/nbWHLIsZJYMwztvrK3vV" alt="" data-size="original"></p><p><img src="/files/F2hCH6914ZnMxq4ErqsG" alt=""></p><p><img src="/files/TnIjlBwEKJqita2amFSd" alt=""></p><p><img src="/files/zA2rVwdSsyRKupMFnhFs" alt=""></p></td></tr><tr><td><strong>左右滑动</strong></td><td><img src="/files/cDgbrp8TK1MQcpOPThkr" alt="" data-size="original"></td><td><ul><li>手指图片：添加动画-通用-位移缓动，参数设置如右图</li></ul></td><td><img src="/files/UdPrVVuKBL0AG8RtAc3S" alt="" data-size="original"></td></tr><tr><td><strong>滑动切割</strong></td><td><img src="/files/yyV3sZfmxS1kPbD3kQFR" alt="" data-size="original"></td><td><ul><li>手指组：添加动画-通用-位移缓动，参数设置如右图1；继续添加透明度缓动，参数设置如右图2</li><li>拖尾效果（选做）：可直接将拖尾图片置于手指组内，跟随组动画一起运动</li></ul></td><td><img src="/files/dAdqXYkowPPeCCRXxsOu" alt=""><img src="/files/xixTzp1UI2bmcb7ytonS" alt=""></td></tr><tr><td><strong>八字滑动</strong></td><td><img src="/files/5guhHYs9qw2lyNYhj0JM" alt="" data-size="original"></td><td><ul><li>手指图片(横向运动)：添加动画-通用-位移缓动，参数设置如右图1</li><li>手指图片组(纵向运动)：添加动画-通用-位移缓动，参数设置如右图2</li></ul></td><td><img src="/files/18ITDM1qWouCbuxjjNxo" alt=""><img src="/files/wvc5U7gk71Bd6FwYu5bP" alt=""></td></tr><tr><td><strong>从A点拖到B点</strong></td><td><img src="/files/JqPoajrXn5Ckv2mBET8G" alt="" data-size="original"></td><td><ul><li>手指图片：添加动画-通用-位移缓动，参数设置如右图1</li><li>开头结尾透明度效果（选做）：在手指组上添加动画-通用-透明度缓动，参数设置如右图2；继续添加透明度缓动，参数设置如右图3</li></ul></td><td><img src="/files/LYeKxCIs2qPVPrAIqlP2" alt=""><img src="/files/Qk1mt7feRikV5P9AtIbN" alt=""><img src="/files/DRAil37uMZOdBGRuICGg" alt=""></td></tr></tbody></table>

####

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

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

<figure><img src="/files/3qM1sH8a8Py7GEttQAD0" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/g9wc78HFhkXUupEJCaOA" alt=""><figcaption></figcaption></figure>

####

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

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

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

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

<figure><img src="/files/QZkRcaVkuUkisdpwg9nT" alt=""><figcaption></figcaption></figure>

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

具体参数设置如下：

<figure><img src="/files/BMfnD4COPY5hYvWf9osv" alt=""><figcaption></figcaption></figure>

####

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

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

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

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

<figure><img src="/files/4XcFN9ckNJ4rcsy07S9L" alt=""><figcaption></figcaption></figure>

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

具体参数设置如下：

<figure><img src="/files/4VojIWs9UTOozVCkAxCN" alt=""><figcaption></figcaption></figure>

####

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

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

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

<figure><img src="/files/hD2twGaqs9h7e4D5UfpV" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/WvZwHGUpuqpjxcWDTJ3A" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/cY5kmWca94Amp3l5VCwl" alt=""><figcaption></figcaption></figure>

####

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

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

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

<figure><img src="/files/KUn2Ve9siCSLgJdhK5B4" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/9qJ1VjKg1T5TQV5hkgOA" 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="/files/KTSCk2Wi5hAtkmrXAIDh" alt="" width="267"><figcaption></figcaption></figure></div>

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

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

<figure><img src="/files/P7OKVb9qypOXiej5G7qy" alt=""><figcaption><p>位移缓动X</p></figcaption></figure>

<figure><img src="/files/AMuXo3X18Nmhg5MuNGQ8" alt=""><figcaption><p>位移缓动Y</p></figcaption></figure>

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

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