概述
什么是打字机效果？
你今天将学到什么
开始之前
打字机效果的分步说明
解锁更多原型设计技能
什么是打字机效果？
打字机效果会营造出文本正在被逐字输入到屏幕上的错觉，这能让应用或网站对用户更具吸引力。它可用于多种场景，例如制作落地页、行动号召元素、个人网站/应用，以及代码演示。
在 ProtoPie 中，可以使用预定义公式、变量以及如 “left” 和 “length” 这样的文本函数轻松实现该效果。在本教程结束时，你将熟练掌握打字机效果。
你可以按照文字教程完成基础步骤，或观看下方视频教程来实现带光标闪烁的增强版本，从而获得更逼真的打字机效果。
你今天将学到什么
在本节原型设计课程中，你将：
理解公式 “left” 和 “length”
创建变量以存储文本字符串并统计字符数
逐步显示文本以实现打字机效果
最后，你将能够做出这样的效果！
开始之前
在进入教程之前，让我们先了解一下 公式 “left” 和 “length” 以及它们为何会被使用。
“Left” 用于根据指定的字符数量，从左侧提取文本的一部分。
left(source:TEXT,count:NUMBER)→ TEXT
在下面的示例中，“left” 公式从左侧提取前 3 个字符。
left("hello", 3)→ “hel”
“Length” 用于统计文本中的字符数量。
length(source:TEXT)→ NUMBER
在下面的示例中，“length” 公式显示该文本有 5 个字符。
length("hello")→ 5
了解更多关于公式的信息。
打字机效果的分步说明
1. 创建变量以存储文本字符串并统计字符数
💡 为什么还要使用变量？
你可以把变量看作存放值的“篮子”。把你之后可能会用到的任何数据都存进去，比如姓名、密码或账户余额。
在这个案例中，为文本字符串创建变量可以帮助你在未来快速复用或修改值。用于计数字符的变量可以帮助你了解已经显示了多少个字符。
首先，创建一个仅用于此场景的变量，命名为 “textToType”。将类型从 Number 改为 Text。
该变量用于存储你将要输入的文本。
创建一个仅用于此场景的变量，命名为 “characterCount”。
该变量帮助你统计文本中已显示的字符数。
为你的变量设置默认值。
textToType: 让我们烘焙美味的派吧！:)
（或根据你的原型填写任何你想要的内容）characterCount: 0
💡 我们将 characterCount 设为 0，因为我们希望它从 0 开始，并每次加 1，直到达到 textToType 的长度值。
了解更多关于变量的信息。
2. 逐步显示文本
创建一个 Start 触发器。创建一个与变量 “characterCount” 关联的 Assign 响应。
将 Assign 响应设置为以下属性：
使用公式： characterCount+1
这会帮助你显示下一个字符
开始延迟： 2s
这会在文本显示前提供一个短暂延迟，使效果看起来更真实。
重复次数： length(textToType)
这能让你持续显示下一个字符，直到所有字符都显示出来。这里，文本 “Let's bake delicious pies! :)” 需要显示的字符数是 29 个。换句话说，Assign 响应将重复 29 次。
间隔： 0.1s
这会将每个字符之间的显示间隔保持为 0.1s。
为变量 textCount. 创建一个 Detect 触发器。
由于 textCount 的值会持续变化，我们可以利用这个变化来触发 Detect 触发器，从而改变文本。
为文本图层添加一个 Text 响应。使用公式
left(textToType,characterCount)。
这里公式会依次呈现为
left("Let's bake delicious pies! :)", 1),left("Let's bake delicious pies! :)", 2), ...., 直到left("Let's bake delicious pies! :)", 29)
💡 通过结合公式和变量，你可以根据 characterCount 变量的值，从左侧提取文本字符串的一部分。随着 characterCount 的值变化，文本图层会被重复更新。这样，你就实现了打字机效果！做得好！
解锁更多原型设计技能
现在你已经通过这些简单技巧掌握了使用变量和公式实现打字机效果，是时候掌握全部原型设计基础了。报名 ProtoPie School 的免费课程并获得证书吧！
