创建带有涟漪效果的可复用按钮组件

简介

涟漪效果是一种设计技巧，通过为按钮添加按压按钮效果来提升 UI 的美观性。应用于该效果的动画会根据点击的按钮而变化。这种效果广泛用于 Google 的 Material Design 设计语言，并已在许多网站上实现。虽然听起来可能有些挑战，但你可以在 ProtoPie 中使用预定义变量（如 $touchX 和 $touchY）以及公式（如 toLayerX 和 toLayerY）轻松实现该效果。那么，让我们开始吧。

你将在本课中学到什么

1. 理解预定义变量：$touchX 和 $touchY

2. 理解公式：toLayerX 和 toLayerY

3. 制作涟漪效果

4. 将按钮转换为组件以便后续复用

[起始 Pie 文件] [完成的 Pie 文件]

开始之前

在进入教程之前，我们先来理解预定义变量“$touchX/$touchY”和公式“toLayerX/toLayerY”。

1. “$touchX”反映触摸被记录位置的 x 坐标。同样，“$touchY”反映触摸被记录位置的 y 坐标。

• 在本课中，我们使用“$touchX/$touchY”在按钮被点击的 x 和 y 坐标处触发涟漪效果。

2. “toLayerX”返回相对于某个容器或组件的 x 坐标。同样，“toLayerY”返回相对于某个容器或组件的 y 坐标。

容器或组件内的图层，其坐标会被限制为相对于它所在的容器或组件。

• toLayerX(containerName:LAYER,x:NUMBER,y:NUMBER) → NUMBER

• toLayerY(containerName:LAYER,x:NUMBER,y:NUMBER) → NUMBER

请亲自尝试这些示例，以理解其工作方式。

• toLayerX(Container 1, 100, 200) → 基于相对于屏幕的 x 坐标 100，得到相对于 Container 1 的 x 坐标

• toLayerY("Container 1", 100, 200) → 基于相对于屏幕的 y 坐标 200，得到相对于 Container 1 的 y 坐标

请理解在 ProtoPie 中，元素位置是相对于其父容器的。如果没有父容器，则位置相对于场景。“$touchX/$touchY”只会返回相对于场景的位置；而在本例中，我们假设你的按钮被组合在一个容器中。这就是公式“toLayerX/toLayerY”发挥作用的地方。

分步说明

1. 制作涟漪效果

1. 在 Button 容器内，执行以下操作：

   a. 创建一个宽度和高度都为 0 的椭圆。

   b. 将该椭圆设为白色（#FFFFFF）并设置为透明（不透明度 = 0%）。

   c. 将椭圆的原点设置到中间（x=50, y=50）。

   d. 将其命名为“Ripple”。

2. 为 Button 容器添加一个 Tap 触发器。为 Ripple 图层添加以下响应，以实现涟漪效果。

缩放 1（将椭圆放大）

• 缩放到：600, 600

• 开始延迟：0s

• 时长：0.8s

缩放 2（将椭圆缩小）

• 缩放到：0, 0

• 开始延迟：0.8s

• 时长：0s

不透明度 1

• 不透明度：40%

• 开始延迟：0s

• 时长：0.4s

不透明度 2

• 不透明度：0%

• 开始延迟：0.4s

• 时长：0.4s

完成此步骤后，点击时椭圆会像涟漪一样缩放。你可以为以上响应选择任意动画缓动方式，但为了更真实的涟漪效果，建议使用 ease in & out 或 cubic-bezier。

💡 为什么使用 Scale 和 Opacity 响应？

当我们创建的椭圆放大然后变为透明时，就实现了涟漪效果。放大与缩小以及不透明度延迟让它更具真实感。

3. 现在让我们把涟漪移动到按钮被点击的位置。为 Ripple 图层添加一个 Move 触发器。现在你有 2 个选项来填写移动数值。

选项 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 图层的本地坐标位置，从而使其保持在按钮设定的边界内。

4. 最后，勾选“Button”图层的“Clip Sublayers”复选框。

💡 为什么要用“Clip Sublayers”？

Ripple 图层将作为 Button 图层的子图层。当我们为 Button 图层勾选 Clip Sublayers 时，Button 图层的任何子图层都不会显示在按钮边界之外，因为它会充当蒙版。

2. 将按钮转换为组件以便后续复用

1. 选中 Button 容器后，点击工具栏中的 Component 按钮，将其转换为组件。

2. 现在在主场景中，尝试移动该按钮组件并观察其效果。

3. 如果你在上一步中选择了 选项 2（仅使用“$touchX/$touchY”），你会发现涟漪不会出现在正确的位置。

• 这是因为 87 和 378 是固定数字。随着你移动按钮，按钮容器的位置不再相同，因此 87 和 378 不再正确，需要更新。

4. 现在让我们用动态值来修复它。进入组件场景，将 选项 2 的移动数值改为如下内容：

• X: $touchX - 'Button'.x

• Y: $touchY - 'Button'.y

💡 ‘Button’.x 和 ‘Button’.y 是 87 和 378 的自动更新版本。所以现在无论 “Button” 组件在哪里，Ripple 效果都会自动显示在正确位置。

你已经完成了！

恭喜你坚持完成。正如你所见，ProtoPie 可以帮助你在无需编写一行代码的情况下实现这一惊艳的 UI 效果。亲自试试涟漪效果吧！

[这有帮助吗？欢迎告诉我们！]