做了窗口相关的动画的教程

_sidebar.md

@@ -41,7 +41,7 @@
   - [<img src="/indexicon/vfxpro.png"/><p>视觉干扰</p>](/pages/vfxpro.md)
   - [<img src="/indexicon/camerafx.png"/><p>摄像机视效</p>](/pages/camerafx.md)
   - [<img src="/indexicon/hallofmirror.png"/><p>镜厅</p>](/pages/hallofmirror.md)
-  - [<img src="/indexicon/windowmove.png"/><p>窗口移动</p>](/pages/windowmove.md)
+  - [<img src="/indexicon/windowmove.png"/><p>窗口相关的动画</p>](/pages/WindowDance.md)
   - [<img src="/indexicon/hand.png"/><p>手</p>](/pages/hand.md)
   - [<img src="/indexicon/character.png"/><p>自制角色与精灵资源</p>](/pages/spritesheet.md)
   - [<img src="/indexicon/decoration.png"/><p>使用精灵</p>](/pages/decoration.md)

pages/WindowDance.md

@@ -0,0 +1,92 @@
+# 窗口相关的动画
+
+在1.0正式版更新后，窗口被单独提取成了一个独立的板块：**窗口板块**。为了避免剧透，这个板块默认是隐藏的，要让这个板块显示出来，我们需要在动作板块先放一个窗口动效事件，或者在编辑器设置中的显示窗口标签栏设置为**总是报告**，这个板块才会显示出来。
+
+![“总是报告”设置](../images/Window_Dance_Always_Active.png)
+
+我们可以看到，窗口事件比以前多了很多。而且4个窗口都像房间板块一样每个窗口都占了一行。所有事件都只会对其所在行对应的窗口生效。接下来将会介绍这些事件的作用和使用方法。
+
+## 隐藏窗口
+
+窗口的显示和隐藏都在这个事件中，窗口默认只有窗口1是显示，其他窗口默认都是隐藏的，所以如果你需要操作其他窗口，需要把窗口显示出来再进行操作。
+
+窗口板块中隐藏状态的窗口会显示灰色，可以通过这个判断你的窗口有没有忘记显示出来。
+![默认状态下只有窗口1是显示的，其他窗口都是隐藏的，所以呈现灰色](../images/Window_Dance_Window_Hidden.png)
+
+## 窗口动效
+
+(谁会，来补充一下，我只用过移动2333)
+
+## 窗口大小重置
+
+想要让窗口大小发生变化，或调整窗口的轴点，都需要借助**窗口大小重置**事件。这个事件的设置项目是这样的：
+![](../images/Window_Dance_Window_Resize.gif)
+
+**大小：** 窗口的目标大小，最大可以设置为`200%， 200%`，如果`x`和`y`同时被设置为了0，则窗口会立刻被重置为初始的大小（即`100%， 100%`）。
+
+**缩放模式：** 窗口大小发生变化时内容的缩放模式，具体如下：
+<ul>
+<li><strong>填充：</strong>将画面中的内容尽可能的填满窗口</li>
+<li><strong>适应：</strong>将画面中的内容尽可能放进窗口</li>
+<li><strong>无：</strong>保持窗口中原来内容的大小不变</li>
+</ul>
+
+![填充模式](../images/Window_Dance_fill.gif)
+![适应模式](../images/Window_Dance_fit.gif)
+![无模式](../images/Window_Dance_none.gif)
+
+> 如果你的窗口在大小发生变化前后长宽比不变，那么**填充**和**适应**在效果上没有区别。
+
+**轴点模式：** 有**默认**和**锚点边缘**两种模式，选择**默认**即和房间移动的轴点没有区别，选择**锚点边缘**则表示选择一条边缘固定不动的情况下进行大小的缩放。
+
+> 实际上选择锚点边缘的情况下就是由系统计算轴点的位置，因此在锚点边缘选择左或右时不要把`x`设置为`0%`，在锚点边缘选择上或下时不要把`y`设置为`0%`，否则会出现bug，表现为对应窗口会消失且**无法被任何方式**移动回来，即使通过事件恢复了窗口的大小和轴点。
+
+**轴点：** 设置位置和缩放的基准点，类似于精灵图和房间的轴点，此处不再赘述。
+
+**动画时长和缓速：** 见过多次了，不再赘述。
+
+> 如果你想直观地看看各种移动方式的速度区别，可以[看看这里](https://easings.net/zh-cn)。
+
+### 轴点的使用技巧
+我们知道，在窗口大小发生变化时，调整轴点可以改变其缩放的中心。但是实际上，即使窗口不需要缩放，我们也可以通过调整轴点来改变窗口的位置，那么这种操作从效果上看和直接使用窗口移动看似没有什么区别，实际上在一些特殊的需求中，这个方法可以被很巧妙地使用。
+
+窗口在移动时，使用的坐标是相对整个屏幕的，而由于不同设备的屏幕分辨率不同，导致有些效果如果用窗口移动来做会在不同分辨率下有不同效果，尤其是当多个窗口之间的位置有配合的时候（如两个窗口紧贴的效果）。
+如在16:9的分辨率下制作的两个窗口紧挨着的效果：
+![16:9分辨率下两个窗口紧贴](../images/Window_Dance_169ratio.png)
+在其他分辨率下，即使不改变窗口的位置，也可能会有不同的效果（如在22:9分辨率下）：
+![在更宽的屏幕下，两个窗口无法紧贴](../images/Window_Dance_229ratio.png)
+如果想要做出在类似`2-XN`中两个窗口相撞的效果，窗口中间有距离会导致表演效果大打折扣。这时我们可能会想，能不能不以屏幕为基准定位，而是以窗口的大小为基准定位，是不是就可以做到了呢？事实上，**轴点**就解决了这样的问题。
+试想，如果两个窗口在同一个位置，而一个窗口的轴点在左边缘，另一个窗口在右边缘，就可以保证无论在什么样的分辨率下，这两个窗口都一定是紧挨着的。
+![](../images/Window_Dance_169ratio_pivot.png)
+![使用轴点后，无论在哪个分辨率下两个窗口都是紧挨的](../images/Window_Dance_229ratio_pivot.png)
+所以当你的动画需要多个窗口之间的位置配合时，不妨试试用轴点的移动来代替直接移动窗口。
+
+## 设置窗口数量
+
+首先需要纠正一个翻译问题，这个事件的正确翻译应为**设置窗口内容**(英文原文: Set Window Content)。真正可以设置窗口数量的事件是前面提到的**隐藏窗口**事件(显示或者隐藏窗口)，请大家不要搞错了。
+
+这个事件的设置项目是这样的：
+![](../images/Window_Content.png)
+**内容模式：** 可以选择**一个房间**或**全部房间**，在选择**一个房间**时，下面会出现**房间目录**选项，可以从4个房间里面选择一个，随后这个窗口中只会显示这个房间的内容。在选择全部房间时，这个窗口将会像平常一样显示全部4个房间的内容。
+
+> 注意，在选择**一个房间**时，这个房间中的所有房间事件都不会在这个窗口中生效，包括房间移动，淡入淡出房间，房间遮罩等。
+
+![左侧窗口是全部房间，右侧房间是一个房间(房间1)，可以发现房间移动和房间遮罩在右侧房间都没有生效](../images/Window_Dance_All_or_One.png)
+
+**位置，缩放和角度：** 类似于摄像头移动的对应参数。在内容模式为**一个房间**时，位置是对应房间区域的对应坐标(左下角是`(0%, 0%)`，右上角是`(100%, 100%)`)，在选择**全部房间**时，位置是在一个**长宽均为一个房间默认长宽的2倍的大区域**中的位置(如果需要定位到一个处于默认位置和默认大小的房间的左下角，位置是`(25%, 25%)`，右上角则是`(75%，75%)`，正中心依然是`(50%, 50%)`)，但是由于窗口默认大小和一个窗口的默认大小是相同的，因此如果不改变窗口的大小，依然只能显示一个房间大小的区域。
+![上图中黄色区域是一个处于默认位置和默认大小的房间，蓝色区域是全部房间的坐标区域](../images/Window_Dance_Coordinate_of_All_Room.png)
+无论选择哪种内容模式，超出区域范围的内容都会被裁剪。
+
+**时长和缓速：** 略
+
+## 重新排列窗口
+类似于房间板块的**重新排列房间**，可以设置窗口的上下关系。
+
+## 设置主窗口
+将对应的窗口设置为主窗口，对话，顶部护士灯光，状态牌等内容将在主窗口显示。
+
+## 设置窗口名称
+修改窗口的标题。在动作选择**设置**的时候，会直接设置窗口的标题；在动作选择**增补**的时候，会在原来标题的后面增加内容；在动作选择**重置**的时候，会将标题重置为`Rhythm Doctor`。
+
+## 设置桌面颜色
+修改模拟移动时桌面的颜色，如果不打开起始颜色，则表示从当前颜色渐变为结束颜色，如果打开起始颜色，效果将类似于**自定义闪烁**。