如何创建带有动态数字指示器的可拖动滑块

在设计许多体验时，动态展示滑块的值能够带来很大的价值和愉悦感。调节音量、亮度，甚至是文本转语音的速度，都是这样的例子。但这还只是冰山一角—— 想想用于购买存储方案的滑块、点披萨数量的滑块，或者在社交媒体 gram 上对故事做出反应的滑块！合适的实现方式可以让很多体验更易用、更直观。

但这并不是唯一简单的事情——ProtoPie 内置的 Chain 触发器以及对 Variables 的访问，也能帮助你同样轻松愉快地将这种体验做成原型。

概览

• 你将学习的内容

• 创建可拖拽滑块的分步说明

• 1. 让滑块旋钮可拖拽

• 2. 使用 Chain 在旋钮后方显示动态轨迹

• 3. 让数字指示器随旋钮移动

• 4. 使用 Variable 显示旋钮的当前值

• 就是这样，你已经完成了一个可拖拽滑块原型！

在本课中，你将学习如何：

1. 让滑块旋钮可拖拽

2. 使用 Chain 在旋钮后方显示动态轨迹

3. 使用 Chain 让数字指示器随旋钮移动

4. 使用 Variable 显示旋钮的当前值

最后，你将能够做出这样的效果！

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

创建可拖拽滑块的分步说明

1. 让滑块旋钮可拖拽

　1. 选择 Knob 图层，并将 Origin 设置为中心。

💡 为什么要把 Origin 设置为 Center？

我们希望能够基于 Knob 的中心点来显示位置并添加交互，但默认原点位置在左上角。将其改为中心后，随着后续添加交互，我们会更容易获取它的位置。

　3. 选择 Knob 图层，并添加一个 Drag 触发器。点击 +，为其添加一个 Move 响应。将移动 direction 设置为水平。

　4. 将 Move 响应中的 Limit 从 None 改为 Custom Limit。在自定义限制中，将 Min X 设为 0，Max X 设为 212。

💡 为什么使用“Custom Limit”，以及为什么是这些数值？

选择 Custom Limit 后，我们可以将 Knob 的移动限制在屏幕上的特定范围内。否则，该图层可能会在屏幕全宽范围内移动。

在这个例子中，移动应限制在 Track 图层内。由于 Track 的宽度是 212，所以我们将其设为 Knob 可拖拽到的最大值；最小值为 0。这些值之所以可行，是因为 Knob 位于 Slider 容器中，0 和 212 都是相对于该容器的。

　5. 选择 Knob 图层，在属性面板中启用 Touch Area. 四边都设置为 20。这样做是为了提升触控友好性，因为 Knob 图层本身只有 20 ✕ 20。设置 Touch Area 后，Knob 的可触控区域将变为 60 ✕ 60。

2. 使用 Chain 在旋钮后方显示动态轨迹

　1. 选择 Active 图层，并打开属性面板。

　2. 选择 Knob，并添加一个 Chain 触发器。选择 Active，并在同一个 Chain 触发器下添加一个 Scale 响应。

　3. 选择 Scale 响应，在 Range1 中，将 width 设置为：当 X = 0 时为 0，当 X = 212 时为 212。

💡 为什么是这些数值？

由于 Knob 可以在** X = 0 到 X = 212**之间移动，我们在 Range1 中也使用相同的 X 值。随着 Knob 从 0 移动到 212，Active 的宽度应与其位置匹配，即从 width = 0 到 width = 212。

由于我们之前已将 Knob 的 Origin 设为中心，Active 宽度的变化就能与 Knob 的位置完美对应。

3. 使用 Chain 让数字指示器随旋钮移动

　1. 选择 Number 和 Slider 两个容器（在图层面板按住 Shift 并点击它们以同时选中），然后按 Ctrl+G（Mac 上为 Cmd+G）将它们编组为一个新容器。

💡 为什么要把它们放进一个新容器？

这是因为每个对象的坐标都相对于其容器。把 Number 放进一个与 Slider 同宽的容器中，就意味着当 X = 0 时，Number 位于容器左边缘；当 X = 212 时，它位于容器右边缘。后续移动 Number 时，使用这些值会非常方便。

如果不创建这个新容器，我们就必须通过手动拖拽 Number 到 Slider 左右边缘来计算它的 X 值。

　2. 选择 Number 并将 Origin 设为 center —— 原因与之前将 Origin 设为中心相同。这样后续我们就可以使用与 Knob 相同的 X 值。

　3. 在 Knob 的 Chain 触发器下，添加一个 Move 响应。确保这个 Move 响应被分配给 Number 容器。在 Move 的 Range1 中设置以下数值。

💡 为什么要把 Move 响应分配给“Number”？

在 ProtoPie 的 Trigger 与 Response 模型中，我们必须确保为每一步选择正确的图层。这里，Chain 是触发器，应用在 Knob 上；而在 Response 中，我们希望 Move 的是 Number 容器。因此，我们将 Move 的分配对象改为 Number。

💡 为什么是这些数值？

由于 Knob 可以从 X = 0 移动到 X = 212，我们在 Range1 的 X 位置中使用相同数值。随着 Knob 从 0 移动到 212，Number 也应匹配其位置，所以我们也将 **Number **从 X = 0 移动到 X = 212。

同时因为我们也将 Number 的 Origin 设置为中心，它的移动将与 Knob 的移动完美对齐。

4. 使用 Variable 显示旋钮当前值

　1. 创建一个新变量——本例可选择 For All Scenes。在 Chain 触发器下添加一个 Assign 响应。将 Assign 响应的目标选择为 value。使用以下数值：

💡 为什么是这些数值？

由于 Knob 可以从 X = 0 移动到 X = 212，我们在 Range1 的 X 位置中使用这些值。随着 Knob 从 0 移动到 212，我们希望显示的 value 从 0 变化到 100。

这意味着当 Knob 位于 X = 0 时，Value 为 0；当 Knob 位于 X = 212 时，Value 将为 212。

　2. 为了测试变量赋值是否正常，点击变量旁边的 bug icon 查看实时值。打开 Preview window 并尝试拖动—— 你应该能看到值随拖动变化。你会发现显示到小数点后两位。别担心，我们会在 step 6 里处理这个问题。

　3. 点击 Add Trigger，添加一个 Detect 触发器。将其分配给 value.

　4. 选择文本图层 Value.

　5. 在 Detect 触发器下，点击 + 并添加一个 Text 响应。

　6. 对于 Text response，将内容从 Text 改为 Formula. 使用公式 round(value)。

💡 等等，我们刚刚做了什么？

我们刚刚使用了 round(source:NUMBER) function. 它接收一个数值并返回四舍五入后的结果。也就是说，如果传给 round() 函数的数字带有小数，我们会得到一个四舍五入后的整数输出。

• round(source:NUMBER) → NUMBER

我们对 Value 使用了 round()，因为在 step 3 中发现显示了两位小数。我们的设计意图是只显示整数，所以使用了这个公式。

就是这样，你已经完成了一个可拖拽滑块原型！

干得漂亮！你已经学会了如何创建一个可拖拽元素，并为其设置自定义限制。你还学会了如何使用 Chain 来控制不同元素的移动、宽度和动态数值！这已经很多了，但还不止这些—— 你还学会了如何将数值四舍五入为整数，并且动态地赋值到文本图层！

继续在 ProtoPie 中尝试这些方法，创建更加真实的体验。我们很想看到你那些疯狂的实验！创建你自己的原型，并分享到 LinkedIn、X，或 Instagram，带上 #MadeWithProtoPie.

[免费试用 ProtoPie]