动画转场设计-眩晕圆环动画
===概述===
示例图
眩晕圆环动画 效果如下图。
灵感来源
2026年2月6日，作者我碰巧刷到了一个初音MV视频。
《【MIKU EXPO】Stay Home Mini Song Contest x MYMIKU 回顾视频》
这个初音的MV背景是3D背景，能旋转、倾斜切换镜头。
不考虑那么高级，镜头的正面用2D魔法圈能做，于是作者我就开坑了。
===眩晕圆环动画 - 实现===
基础插件
如果要从零开始设计，需要自己根据情况来选择插件：
注意，该文档只详细说明 整体设计思路。
对于具体 插件指令和配置项 ，需要去示例中 地图管理层 看看。
也可以去看看文档：“17.主菜单 > 关于动画转场核心.docx”。
基础配置
具体注意示例下面的地方：
1）地图事件
地图管理层中，接触下面事件可以直接执行动画效果。
点开事件就能看到实现方法。
2）资源文件夹
资源文件夹在“img/Map__layer/”。
3）插件配置
插件用到了 地图-多层地图魔法圈，配置了魔法圈22,23,24,25。
4）插件-界面装饰插件
上述的配置，只是针对 地图界面 的动画设计。
眩晕圆环动画还能应用到其他界面，可以去看看后面章节：多界面设计实现 。
动画起草
1）流程准备
依照初音MV的动画视频，
一层又一层的魔法圈无限放大，魔法圈的层数没有尽头，如下图。
要做到没有尽头的动画播放，需要几个贴图循环反复变换。
这里就用到了周期指令。
目前分析，最外层的一圈魔法圈在看不见之后，需要立即变成内圈然后重新放大。
2）魔法圈资源准备
要制作这个动画效果，只需要 魔法圈插件 就够了。
可以选择：
》用图片设计
》用战斗装饰插件设计
》用地图装饰插件设计
》用菜单装饰插件设计
》用天窗层装饰插件设计
为了方便，先用地图装饰来设计，因为可以直接在事件指令里面进行变换操作。
所以，魔法圈插件：
◆Drill_LayerCircle 地图 - 多层地图魔法圈
插件中配置了四个魔法圈，对应配置22,23,24,25。
魔法圈需要作用到所有地图，
并且初始放在游戏画面的中心点并隐藏。
另外资源文件夹在“img/Map__layer/”。
动画效果实现（一次性）
1）一次性动画的设计
首先考虑做一次性的动画。比如 白蓝白蓝 四个魔法圈的变换。
前面章节的魔法圈资源准备介绍了魔法圈的配置，
接下来就是插件指令控制，四个魔法圈一个一个放大。
设置后，进入游戏测试，可以看到生效了。
2）结尾动画
动画中使用了缩放X和缩放Y，结尾动画不能直接叠加缩放的变换，
所以这里控制透明度变0，然后在播放结束后隐藏魔法圈。
3）作为动画转场（地图场所移动）
基于前面的设计，可以制作“玩家不知道怎么回事就被瞬移了”的动画转场设计。
即 动画转场+地图场所移动 的设计。
前面配置的魔法圈在中层，需要将层级修改在图片层遮挡住玩家，
然后执行 玩家位置移动 的指令即可。
（图片层修改后，在隐藏时要记得 还原 回去）
这个设计可以在 动画转场管理层 找到。
（该设计需要注意：眩晕圆环和场所移动，切换地图时会卡一下 ）
| 一次性动画的设计中，没用到“切换地图层级”和“还原地图层级”指令。这里的动画转场，是为了遮挡玩家画面而加的。 |
动画效果实现（周期）
1）属性分析
接下来，我们要把这 白蓝白蓝 四个魔法圈，做成无限循环播放的动画。
考虑下列事项：
》一次性动画中，魔法圈为：22/23/24/25；
改成周期动画，魔法圈的播放顺序为：22/23/24/25/22/23/24/25/22……
》周期动画分为：初始进入动画、周期循环动画。
因为无限循环，所以没有结尾动画，结尾动画通过其他插件指令结束。
》如果四个魔法圈不够用，就再加魔法圈，或者降低新魔法圈产生的间隔。
尽量确保第一个魔法圈和最后一个魔法圈不能同时出现在屏幕内。
》魔法圈存在先后顺序问题，22/23/24/25魔法圈的堆叠级依次为：3/4/5/6。
魔法圈22播放完毕后，要变成新产生的魔法圈，在魔法圈25的上面。
这时候考虑堆叠级要瞬间重置，变为：6/3/4/5。
》上述的全部变换，时间要累加起来形成一个总的时间，作为周期指令的总时长。
2）周期循环动画的设计
首先，写周期指令，让4个魔法圈依次变换。
周期的总时间还没确定，这里先写1111。
每隔31帧，下一个魔法圈开始放大。
然后，考虑堆叠级的影响，堆叠级依次为：
3/4/5/6、6/3/4/5、5/6/3/4、4/5/6/3。
（这里作者我按照魔法圈的堆叠级来排序了，顺序可能有点乱）
完成一个周期后，周期的最后一帧 要与 第一帧相同。
由于变换至少要1帧的时间，所以这里要1帧来重置。
如下图，第1帧瞬间变为缩放X和缩放Y为0.0，然后播放放大的过程。
| 是不是一条一条插件指令改起来很费劲？作者我也一样，后来我加了个指令容器插件：指令容器的用法 。多行文本，每行表示一条插件指令，改起来就没那么反人类了。 |
最后确认了所有时间后，累加周期指令的时间。
第1帧的瞬间变换 + 31帧*4个魔法圈 = 125帧
（作者我一条条写满了124才发现问题……不想动了，少1帧不影响动画效果）
| 注意，这个过程需要的数学计算与推理有点多，圆圈的放大可能不会按照预想的方式走，需要在游戏中反复测试。（专业动画编辑器，有每帧的可视化设计，而这个周期指令只有一堆数字和文本） |
3）指令容器的封装
由于改起来实在太麻烦，上述设计完成后，可以根据将等待压缩到延迟指令的方法，
将 等待+插件指令 的结构，变成单纯的 延迟指令+周期指令，
然后使用指令容器插件存储：
Drill_LayerDecorationPluginCommandList 地图 - 多层装饰的指令容器
容器中可以放多行，每行都对应一条插件指令。
这样改起来非常方便，可以直接放在记事本中修改。
容器可以通过下面的插件指令，一次性执行全部。
详细介绍可以了解下文档：“17.主菜单 > 多层组合装饰插件的指令容器.docx”。
4）结尾动画
与一次性动画设计类似，结尾动画直接用透明度变0，播放结束后隐藏魔法圈。
但注意，周期指令中修改了图片层级，要记得“还原图片层级”。
（不然会发现蓝白圆有时候不出来，或者突然就出来了）
目前不考虑复杂的结尾动画。
多界面设计实现
1）地图界面
前面章节已经介绍了实现方法：
| 为了调用方便，最好进行：3）指令容器的封装 ，因为这样设置，后续如果你想让相同动画在其他界面一起生效，改起来就非常方便。 |
2）战斗界面
战斗界面配置了蓝白四个魔法圈，如下图。
对应11/12/13/14。（资源图片的文件夹在“img/Battle__layer/”）
注意，战斗界面与地图界面的编号不一样，所以要大量修改指令。
前面介绍了指令容器，（了解下“17.主菜单 > 多层组合装饰插件的指令容器.docx”）
这里用记事本直接批量修改，然后复制粘贴到指令容器中，如下图。
战斗界面有以下特性：
》必须先创建贴图，后添加 延迟指令/周期指令。
》创建的贴图都是临时的，离开战斗界面后，所有贴图都销毁。
》因为战斗结束后自动销毁，所以指令容器，一般不需要考虑“清空”的情况。
正因为战斗界面会销毁，
所以为确保眩晕圆环动画在战斗界面中播放，这里只能在场景配置后插入。
战斗界面的示例在 战斗管理层 。
3）菜单界面
菜单界面配置了蓝白四个魔法圈，如下图。
对应26/27/28/29。（资源图片的文件夹在“img/Menu__layer/”）
注意，菜单界面与地图界面的编号不一样，所以要大量修改指令。
前面介绍了指令容器，（了解下“17.主菜单 > 多层组合装饰插件的指令容器.docx”）
这里用记事本直接批量修改，然后复制粘贴到指令容器中，如下图。
菜单界面有以下特性：
》不支持 实时修改，只支持 延迟指令/周期指令。
》指令容器永久存在，指令添加后，每次进入菜单界面，都会启动一次。
》要关掉已添加的设计，必须清空指令容器。
动画的开关，执行一次就可以了。
每次进入菜单界面都会播放。
你也可以直接在指令容器中 初始化（菜单的指令容器的特性）。
菜单界面的示例在 主菜单管理层 。
扩展实现
1）属性改进
根据前面的章节 1）属性分析 ，
眩晕圆环的改进空间很大，比如：
》魔法圈的数量为4个，周期变换的间隔为31帧。
可以 增加魔法圈数量，减少帧数 实现更密集的眩晕效果。
》魔法圈的资源为纯白、纯蓝，魔法圈没有旋转。
可以给魔法圈画花纹，设置旋转速度，强化“眩晕”的效果。
2）复杂的结尾动画
插件其实提供了周期指令的“等待逻辑”，你可以确保结尾动画一定停留在末尾帧。
由于末尾帧的图像是固定的，
你可以根据这个末尾帧，做一个专门的结束动画。（以后开坑）
===眩晕圆环动画 - 注意事项===
分辨率的设计
注意，示例使用的是默认分辨率：816x624，
这个分辨率，会影响魔法圈的位置、魔法圈的大小。
| 你必须根据你游戏的分辨率来修改资源、修改魔法圈配置的位置。 |
将等待压缩到延迟指令的方法
指令容器不是事件对象，无法添加等待指令。
目前只能将等待施加在 延迟指令 上。
比如：
1~3条不需要等待；
4~6条延迟2帧；
7~8条延迟2+31帧；
9~10条延迟2+31+31帧；
11~12条延迟2+31+31+31帧……以此类推。
最后，得到下面的设置。（直接从延迟10帧开始，后面方便统一调整）
===眩晕圆环动画 - 常见问题（FAQ）===
眩晕圆环和场所移动，切换地图时会卡一下
| 问题名称 | 眩晕圆环和场所移动，切换地图时会卡一下 |
| 问题图示 |   |
| 问题描述 | 示例中 动画转场管理层 的眩晕圆环动画，使用了本图移动。但是换成了去其他地图的场所移动后，切换地图时，动画会卡一下。 |
| 原理解析 | 这是正常现象。因为动画使用了地图装饰实现。地图装饰不在地图界面时，会处于暂停状态。地图界面的切换并不是无缝衔接，它们存在加载过程。地图界面在销毁、重建时，地图装饰也都跟着被销毁、重建。 |
| 解决方案 | 要避免玩家在地图加载时感受到短暂的“卡顿”，可以：》转场时动画换成黑屏、白屏、静态图片，加载过程中不要用动态的变换。》换成天窗层的装饰插件来播放动画，天窗层的装饰插件的变换，不会在地图加载时暂停或卡顿。（若是电脑性能差造成的整个画面卡，则无法解决） |