第四步：制作页面遮罩转场动画
第四步比前几步会稍微复杂一点，不过我相信也难不倒大家。
1. 添加点击事件
选中 Moments 画板中的浮窗元素，点击闪电图标后，选择「Tap」 并按住鼠标左键不放，将蓝色的链接线指向 Article 画板后松开鼠标，这样就实现了点击跳转效果。不过这样的跳转非常生硬和突然，需要给它加上过渡效果。
2. 遮罩动画
遮罩进场
首先，选中 Article 画板中的 Page2 图层，将其移动到 Window 组里的 Base 图层内部，从而形成父子关系；然后将属性面板中的「Clip Sublayers」选项勾选上，这也是遮罩动画的关键一步。接下来，将带有遮罩的 Base 图层从 Article 画板复制粘贴到 Moments 画板，替换 (删除) 原来的 Base 图层。选中 Base 内的 Page2 图层，将其 不透明度改为 0%。最后，选中 Article 画板中的 Base 图层，在属性面板里将它的圆角 (Radius) 改为 500 后，按住 alt+shift 将 Base 原位等比例放大，直至可以完全显示其内部的 Page2 内容即可，并将 Eleme Logo 图层的 不透明度改为 0%，这样就形成了遮罩动画，可在预览窗口中操作预览。
为了便于观察，我们点开 Base 图层的调色面板，将其不透明度改为 0%，这时 Base 的大圆就被隐藏起来了。(注意：这里一定要从调色面板里修改不透明度，否则图层将会失效)
遮罩出场
选中 Moments 画板，command+d 原位复制，将 Moments2 画板至于最底部。为了避免交互错乱的情况出现，我们选中 Moments2 画板与其他画板的链接线 (Window Tap 和 Window Drag Begins)，依次右击选择「Delete Event」删除它们。
在 Article 画板中新建一个矩形 (快捷键 R)，将它移动到导航栏中的 “X” 图标位置，点击矩形旁的闪电图标后，选择「Tap」 并按住鼠标左键不放，将蓝色的链接线指向 Moments2 画板后松开鼠标，这样就实现了关闭/返回的交互。
为了不影响视觉效果，我们同样点开矩形图层的调色面板，将其不透明度改为 0%，可在预览窗口中操作预览。
第五步：制作取消浮窗交互
如果大家前几步都做得没问题，这步就会非常容易。
1. 触摸按下
选中 Cancel 画板，command+d 原位复制，将 Cancel2 画板至于最底部。选中 Cancel2 与其他画板的链接线 (Window Drag Ends)，右击选择「Delete Event」删除它。在 Moments2 画板中选中浮窗元素 (Window)，点击浮窗旁的闪电图标后，选择「Touch Down」 并按住鼠标左键不放，将蓝色的链接线指向 Cancel2 画板后松开鼠标，这样就实现了触摸按下的效果。
2. 触摸抬起
选中 Moments2 画板，command+d 原位复制，将 Moments3 画板至于最底部。选中 Moments3 与其他画板的链接线 (Window Touch Down)，右击选择「Delete Event」删除它。
在 Cancel2 画板中选中浮窗元素 (Window)，点击浮窗旁的闪电图标后，选择「Touch Up」 并按住鼠标左键不放，将蓝色的链接线指向 Moments3 画板后松开鼠标。将 Moments3 画板中的浮窗元素 (Window) 移动到画板右下角的位置 (也就是取消浮窗的位置) ，然后把它的不透明度改为 0%。这样就实现了触摸抬起的效果，可在预览窗口中操作预览。
细节调整
通过预览会发现，浮窗消失的瞬间显的有些卡顿，这是因为「浮窗元素」消失的速度比「取消浮窗元素」稍慢了一些。解决的方法是：先选中「Window Touch Up」这条链接线，在它的 Animate 面板中，找到 Window 图层的 Opacity (不透明度) 属性关键帧，将 Opacity 的「结束关键帧」左移到 0.05 的位置，表示加快浮窗的消失速度。
通过再次操作预览发现，浮窗消失的过程就比之前要流畅自然很多。如果想让取消浮窗动画更细腻，也可以再加入由 1-0 的缩放变化 (Scale)，因为篇幅有限，就不再展开叙述了。最后，整体预览下最终的效果，没有问题就可以准备导出了。
