使用公式和变量创建秒表计时器

在用户体验设计策略中，基于时间的 UI 偶尔会被忽视，但秒表样式的计时器在运动、烹饪和效率类应用中是常见功能。想一想你使用的那些包含任务时间要素的应用，以及你如何将秒表计时器整合到你正在设计的应用原型中。

ProtoPie 允许设计师通过使用公式、Detect 函数和变量来创建可运行的秒表计时器。借助这些强大的工具，ProtoPie 能够读取并响应数据变化。虽然这看起来可能有些复杂，但学习这些技能会证明 ProtoPie 是一个面向数据（和时间）设计的强大工具！

你将学到什么

1. 使用变量自动化百分之一秒

2. 使用 Detect 和条件增加秒数

3. 使用 Detect 和条件增加分钟数

4. 停止并重置秒表

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

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

开始原型制作之前

在资源中，你会注意到 开始/停止按钮 的交互已经创建好了。这是使用 Condition 功能实现的。如果你想学习如何基于 Condition 创建按钮，请查看如何使用 Condition 制作切换按钮。

分步说明

1. 使用变量自动化百分之一秒

　1. 你将从最后两位数字（百分之一秒）开始，并让它们通过按钮开始和停止。创建一个新的 变量，命名为 centisecond。保持变量默认设置，使其为数字类型并从 0 开始。将调试器拖到预览界面上，以便测试你的操作。

　2. 在 start 条件下，添加一个关联到 centisecond 变量 的 Assign。公式为 centisecond+1。打开重复（repeat）并启用 Infinite Repeat。interval 为 0.01

　3. 在 Stop 条件下，为 centisecond 变量添加一个 Stop 响应。在预览中测试开始和停止按钮时，你会注意到数字会持续增长，并可通过按钮停止。

　4. 百分之一秒只有 两 位数字，因此你需要让数字在 99 时重置。为此，添加一个新的触发器，并选择关联到 centisecond 变量的 Detect。

　5. 创建一个条件：当 centisecond ≥ 99 时触发。然后添加一个 Reset。将 duration 改为 0，并将 start delay 改为 0.01。这个延迟很难察觉，但对后续步骤很重要。使用调试器你会看到值到达 99 后会从 0 重新开始。

　6. 现在，我们希望将这个值赋给文本。在 detect 触发器下，添加一个 Text 响应。将其关联到 centisecond 并输入公式 lpad(centisecond,2,"0")。该公式通过在个位数前补 0，确保百分之一秒始终显示两位数字。

💡 lpad(): 使用另一段文本在左侧补齐文本到指定长度。

• lpad(source:TEXT,length:NUMBER,pad:TEXT) → TEXT

2. 基于百分之一秒增加秒数

　1. 当百分之一秒到达 99 时，我们希望秒数增加 1。为此，添加一个变量并将其重命名为 second。保持变量默认设置，使其为数字类型并从 0 开始。将调试器拖到预览场景中。

　2. 在 Detect 触发器下，在我们刚创建的条件中添加一个 Assign，并将其关联到 second 变量。公式输入 second+1，这样每次百分之一秒达到 99 时，秒数就会增加 1。将 start delay 改为 0.01。不要设置为重复。

　3. 添加一个关联到“second”文本的 Text 响应，将变量赋给文本。与之前一样，公式为 lpad(second,2,"0")，会为所有个位数前补 0。

　4. 请确保将 start delay 改为 0.01，并且 second 变量的 Text 响应位于 Assign 响应之后。交互组件的顺序同样重要。请确保 Assign 响应在 Text 响应上方。这样做是因为你希望 ProtoPie 先触发 Assign 响应，然后再触发 Text 响应。

3. 基于秒数增加分钟数

　1. 添加一个关联到 second 变量的 Detect 触发器。然后，添加一个关联到 second 变量的条件：当 second 变量 ≥ 59 时。

　2. 在该条件下，创建一个关联到 second 的 Reset 响应，并将 start delay 设为 1。

这意味着当秒数达到 59 时，会延迟 1 秒后再重置为 0。

　3. 除了重置变量外，你还需要重置文本。再添加一个关联到 second 文本的 Reset，并将 start delay 改为 1。

　4. 要将 minute 变量关联到文本，创建一个变量并重命名为“minute”。在最后一个 Reset 响应下添加一个 Assign 响应，并将其关联到你刚创建的 minute 变量。公式为 minute+1。start delay 设为 1。

　5. 在 assign 下创建一个 Text 响应，将其关联到 minute 文本，并使用公式 lpad(minute,2,"0")。将 start delay 改为 1。

　6. 在预览窗口中，当秒数达到 59 时，分钟应增加 1，并且秒数重置为 0。

4. 让重置按钮可操作

　1. 为重置按钮创建一个 Tap 触发器。创建一个关联到 centisecond 变量的 Stop 响应。

　2. 然后，你需要重置所有变量（centisecond、second、minute），接着重置它们对应的文本。创建三个重置响应，分别关联这三个变量。再创建三个重置响应，分别关联这三个变量对应的文本。

　3. 你还需要将开始/停止按钮重置为初始状态。选择 Stop 图层并创建一个重置响应。然后，再对 Start 和 Base 图层创建重置响应。

　4. 请参考下图。

恭喜！你的秒表计时器已经准备就绪

在本教程中，你探索了许多高级技巧，包括使用 Formulas、Detect 和 Variables！现在你已经学会了这些技巧，不妨思考如何结合其他策略，为你的独特设计制作秒表计时器！

准备好让你的想法变为现实了吗？立即下载 ProtoPie，开始构建你的下一个原型，别忘了在 LinkedIn、X 或 Instagram 上使用 #MadeWithProtoPie 分享你的精彩作品。我们迫不及待想看到你的创作！

[下载 ProtoPie]