简介
扩展式图片遮罩层广泛存在于从社交媒体到电子商务的各类应用中。它是一种非常出色的用户交互模式，能够快速将用户吸引到有趣的媒体内容上，并有助于快速访问分享或评论等功能。
在本文中，我们将结合长按触发器与 toScreen 公式，让你快速做出自己的扩展预览效果。
在本课中，你将学习：
使用 长按 触发器 显示遮罩层
通过使用
toScreen公式将目标图片移动到屏幕上为过渡添加自定义效果
完成本教程后，你将能够做出类似这样的效果！
分步说明
开始之前
打开资源后，进入第二个场景（Profile）。我们的教程将从这里开始。
现在你会看到资源已处于最终状态。因此我们先从整理资源开始。
将 Overlay 图层的不透明度设为 0
将 image 1 copy 和 Menu 按下图移出场景
1. 使用长按创建遮罩层
这里我们将通过创建一个模糊图层来为扩展遮罩效果打基础。
1. 在图片流中，选中与放大图对应的图片（image 1），并为其添加一个 Long Press 触发器。
2. 接着，在图层面板中选择 overlay 形状。回到刚添加的触发器，创建一个 Opacity 响应，并将不透明度设为 100。
试试看！在个人资料页面长按带有长按触发器的图片。
2. 创建扩展图片预览
这一步本质上是将图片从画面外瞬间移动到屏幕上的指定位置。
💡本节有一点需要注意：我们不能使用 Reorder 响应。为什么？
目标图片位于滚动容器内
我们有一个 overlay 图层，它首先在滚动容器外，其次也位于图层层级的顶部。
因此，如果我们使用 Reorder 响应，被重排的图片仍会位于 overlay 图层之下。为了解决这个问题，我们将使用图片的一个副本，让它显示在 overlay 之上，以替代屏幕上的原图。
1. 在本例中，我们将让扩展动画从替换图片的左下角开始。为此，请确保 image 1 copy 的原点设置为 左下角。
2. 由于我们要替换屏幕上的图片 (image 1)，先将屏幕外的图片 (image 1 copy) 调整为与屏幕内对应图片相同的尺寸——226x226。
3. 现在我们希望通过先前创建的 Long Press 来触发 image 1 copy 和 Menu 的移动。但首先，出于良好实践，请将它们编组并将容器重命名为“Image & Menu”。
4. 在 Long Press 触发器下，为 Image & Menu 添加一个 Move 响应。
5. 点击图片并尝试上下拖动。注意，当我们垂直滚动时，image 1 的 X 坐标始终不变，而 Y 坐标会变化。基于这一点，填写 Move 响应的目标位置。你可以通过复制 image 1 (X = 16) 的 X 坐标来得到目标值，因为它会始终保持不变。
6. 这里会稍微有点难！为了无论位置如何都能确定 Y 坐标，我们要使用 toScreen 公式 (fx)。由于我们需要 Y 值，因此使用 toScreenY 公式。代码格式如下：
toScreenY('Scroll Container','image 1'.x,'image 1'.y)``
💡 toScreenY：返回相对于屏幕的 Y 坐标。容器或组件中的图层，其坐标是相对于该容器或组件的。
toScreenY(containerName:LAYER,x:NUMBER,y:NUMBER)→NUMBER
在本例中，该公式将屏幕外 Image & Menu 的 Y 坐标设置为位于 Scroll Container 内的 image 1 的 Y 坐标。
7. 为了创建这种即时替换来模拟 Reorder 响应，将 Move 响应的时长改为 0 秒。这样图片就会在给定的 X、Y 坐标处直接出现在屏幕上。
8. 接着，在 Long Press 触发器中再添加一个 Scale 响应，将 image 1 copy 缩放到其原始尺寸——343x343。
我们还可以应用一个 Radius 响应，将缩放后的圆角半径改为 12，以在缩放后保持视觉一致性。
💡为保持微交互一致性，请确保所有响应的时长一致（本例为 0.2 秒）
9. 最后再添加 1 个 Move 响应。这个移动响应将决定你的图片和菜单在垂直方向上的终点位置。按你的喜好调整 Y 坐标并尝试效果。此示例推荐使用 273，这样图片会居中。
3. 自定义效果
1. 首先，为 Menu 设置初始状态。为此，添加一个 Start 触发器。然后在 Start 触发器内，创建一个附加到 Menu 的 Scale 响应。将菜单缩放为 0x0。
2. 在 Long Press 触发器下，为 Menu 添加一个 Reset 响应。
完成这 2 步后，你将在预览窗口中看到 Menu 的扩展效果。
展开后，我们还需要一种方式来重置遮罩层。遗憾的是，这比仅添加一个 Reset 响应要稍复杂一些，才能实现无缝的微交互效果。
1. 首先，在 overlay 上设置一个 Tap 触发器，并添加一个附加到 image 1 copy 的 Reset 响应。
2. 接着，我们希望在收起时隐藏菜单。可以通过给 Menu 添加一个缩放到 0 的 Scale 响应来实现。
3. 接下来，我们希望 Image & Menu 容器回到 image 1 的位置，以形成反向效果。为此，给该容器添加一个 Move 响应，并将其移回到 Long Press 后的初始目标位置。
x = 16
y =
toScreenY=('Scroll Container','image 1'.x,'image 1'.y)
4. 现在我们希望容器返回到屏幕外的初始位置。做法很简单：先给 Image & Menu 容器添加一个 Reset 响应，将其时长设为 0 秒，并把它放在所有其他交互完成之后，这样微动画结束后它会立即跳回。
5. 最后，再给 overlay 添加一个 Reset 响应以重置其不透明度，从而显示原始的个人资料页面。
恭喜！
你完成了！你已经创建了一个扩展图片预览效果！尝试把它应用到你自己的设计概念中，看看你能实现哪些创意！
我们很想看到你大胆的实验。创建你自己的原型，并在 Twitter 或 Instagram 上带上 #MadeWithProtoPie 分享出来吧。
