常见交互
创建具有波纹效果的可重复使用按钮组件
今天，您将学习如何使用预定义的变量和表达式创建具有波纹效果的可重复使用的按钮组件。
Shilpa Yadav, Design Student @ Monash University
August 13, 2023
介绍
波纹效果是一种设计技巧，通过按钮效果来增强UI的美感。该效果的动画会根据单击的按钮而更改。这种效果在谷歌素材设计语言中被广泛使用，并在许多网站上实现。尽管这听起来可能很有挑战性，但您可以在 ProtoPie 中使用变量，如
$touchX & $touchY，toLayerX & toLayerY 等表达式，轻松实现此效果。现在就让我们开始吧。您将学到什么
- 理解预定义变量：
$touchX和$touchY - 理解表达式：
toLayerX和toLayerY - 创建波纹效果
- 将按钮转换为组件以便使用
开始之前
在开始教程之前，先了解一下预定义变量 $touchX & $touchY 和表达式 toLayerX & toLayerY。
- $touchX 表示触摸位置的x坐标。同样，$touchY 表示触摸位置的y坐标。
- 在教程中，我们使用 $touchX & $touchY 来触发在x和y坐标上单击按钮的波纹效果。
- toLayerX 返回相对于容器层或组件的x坐标，toLayerY 返回相对于容器或组件的 y 坐标。
容器层或组件中的图层遵循相对于它们所在的容器层或组件的坐标。
toLayerX(containerName:LAYER,x:NUMBER,y:NUMBER)→ 数字toLayerY(containerName:LAYER,x:NUMBER,y:NUMBER)→ 数字
尝试这些示例，了解工作原理。
toLayerX(Container 1, 100, 200)→ 相对于画面 x=100 的位置，返回容器层1的 x 坐标。toLayerY("Container 1", 100, 200)→ 相对于画面 y=200 的位置，返回容器层1的 y 坐标。
在 ProtoPie 中，图层的位置是相对于其所在容器层的。如果该图层不处于容器层内，则位置将相对于场景。而 $touchX & $touchY 仅返回相对于场景的位置，在本例中，由于按钮是在一个容器层内，因此这里需要使用 toLayerX & toLayerY。
分步说明
1. 创建波纹效果
- 在 Button 按钮容器层内执行以下操作：
a. 创建一个宽高为0的圆形
b. 将该圆形设为白色（#FFFFFF）且透明（透明度 = 0%）。
c. 将圆形的锚点原点设置为中心（x=50，y=50）。
d. 将图层命名为 Ripple 波纹。
2. 给 Button 按钮容器层添加一个「单击」触发。给 Ripple 波纹图层添加以下反应，以实现波纹效果。
「大小」反应 1（放大圆形）
- 大小变至：600，600
- 延迟开始：0秒
- 持续时间：0.8秒
「大小」反应 2（缩小圆形）
- 大小变至：0，0
- 开始延迟：0.8秒
- 持续时间：0秒
「透明度」反应 1
- 透明度变至：40%
- 延迟开始：0秒
- 持续时间：0.4秒
「透明度」反应 2
- 透明度变至：0%
- 延迟开始：0.4秒
- 持续时间：0.4秒
完成这一步后，圆形将在点击时呈现波纹般的缩放效果。您可以根据喜好选择任何动画效果，但最好选择缓入缓出或贝兹曲线以呈现逼真的波纹效果。
💡 这里为什么使用「大小」和「透明度」反应？
圆形放大并变为透明，可以呈现出波纹效果。缩放和透明度的延迟使其具有逼真的感觉。
- 现在将波纹移动到按钮中被点击的位置。在 Ripple 波纹图层上添加一个「移动」反应。移动值的填写方法有两种。
选项 1：结合 $touchX & $touchY 和 toLayerX & toLayerY
- X 填写：
toLayerX('Button',$touchX,$touchY) - Y 填写：
toLayerY('Button',$touchX,$touchY)
选项 2： 仅使用 $touchX & $touchY
- X 填写：
$touchX - 87 - Y 填写：
$touchY - 378
💡 为什么使用这些表达式？
因为我们想要移动 Ripple 波纹图层。Ripple 波纹图层是 Button 按钮容器层里的子图层，所以在移动Ripple 波纹图层时，需要使用其在 Button 按钮容器层里的坐标。
**($touchX,$touchY)**作为场景坐标，该表达式的作用是将场景坐标位置转换为 Button 按钮容器层的坐标，以使其保持在按钮设置的边界内。- 最后，在 Button 按钮容器层属性中勾选切剪子层。
💡 为什么勾选切剪子层？
Ripple 波纹图层是 Button 按钮容器层里的子图层**。当勾选切剪子层**时， Button 按钮容器层里的任何子图层都不会超出按钮的边界，充当了一个遮罩的作用。
2. 将按钮转换为组件以便使用
- 选中 Button 按钮容器层**，点击工具栏中的组件**按钮将其转换为组件。
- 在场景中，移动按钮组件并查看其如何工作。
- 如果在上一步选择了选项 2（仅使用 $touchX & $touchY），波纹将不会显示在正确的位置。
- 这是因为**
87和378是固定值。随着按钮移动，按钮容器层的位置改变，因此87和378**不是正确的左边，需要更新。
- 现在使用动态值来解决。进入组件编辑界面，将选项 2的移动数值更改如下：
- X：
$touchX - 'Button'.x - Y：
$touchY - 'Button'.y
💡
‘Button’.x 和 ‘Button’.y 是**87和378**的自动更新版本。这就是为什么现在无论 Button 组件在哪里，波纹效果都会自动显示在正确的位置上。太棒了！
正如您所看到的，ProtoPie 可以在无需编写一行代码的情况下，帮助您实现了这种惊人的UI效果。
恭喜您，已经完成了本节教程的学习，对ProtoPie 功能的掌握又更近一步！欢迎扫码加入ProtoPie 官方 QQ用户交流群 (69980214)，和各行各业UI/UX设计师讨论如何用ProtoPie 提高工作效率，一起互相帮助解决问题吧。