打字机效果与光标闪烁（Typewriter Effect with Blinking Cursor）
一种多功能的打字文本动画，逐步显示字符，并带有可自定义的闪烁光标，为任何文本图层创建真实的打字效果。
// 使用图层直接的文本 txt = value; speed = 10; // 每秒字符数 cursor = "|"; // 自定义光标字符: "|", "_", "█" 等 blink = true; // 如果想要非闪烁的光标并在结束时消失，设为 false keepBlinking = true; // 如果为 true，打字完成后光标保持闪烁 charsShown = Math.floor((time - inPoint) * speed); // 计算当前应显示多少字符 typed = txt.substr(0, charsShown); // 获取已打字的文本部分 // 每 0.5 秒闪烁状态切换 blinkingState = Math.floor(time * 2) % 2 == 0; // 如果开启闪烁，则使用闪烁状态; 如果关闭闪烁，则仅在文本打字过程中显示光标 cursorVisible = blink ? blinkingState : (charsShown < txt.length); // 仅在打字期间显示静态光标 // 最终可见性检查 showCursor = keepBlinking ? cursorVisible // 始终遵循闪烁设置 : (charsShown < txt.length ? cursorVisible : false); // 打字完成后停止显示光标 typed + (showCursor ? cursor : ""); // 组合文本和光标
应用位置
将此表达式应用于任何文本图层的“源文本”（Source Text）属性。它适用于任何具有秒表的属性，包括文本和效果。
工作原理
让我们逐行分析这个表达式，从上到下，详细解释每个部分发生了什么及何时发生：
获取当前文本
txt = value;
这一行获取图层的当前文本。它使用你手动输入的任何内容。无需在表达式内定义文本，表达式会自动读取。
控制字符出现速度
speed = 10;
这控制字符出现的速度，以每秒字符数计算。值为 10 意味着每秒会输入 10 个字符。你可以提高或降低此值以加快或减慢动画。
设置光标字符
cursor = "|";
这里选择用于光标的字符。它可以是你想要的任何字符，比如“|”、“_”或“█”。光标将出现在文本末尾。
控制光标闪烁
blink = true;
这控制光标是否应该闪烁。如果设置为 true，光标将在每半秒内切换显隐。如果为 false，光标保持稳定，但正如我们稍后会看到的，仅在打字时是这样的。
控制打字后光标状态
keepBlinking = true;
这告诉表达式在文本打字完成后该怎么做。
如果为 true，光标将继续闪烁（或保持不动），即使文本已经完全输入。
如果为 false，则文本输入完成后光标将消失。
计算可见字符数
charsShown = Math.floor((time - inPoint) * speed);
这一行引入了时间的计算。
它通过以下步骤计算在当前时刻应显示多少个字符：
取自图层可见以来的时间（time - inPoint）
乘以速度值
然后使用 Math.floor() 向下取整
例如，在 1.6 秒时，速度为 10，会看到 16 个字符。
获取当前文本
typed = txt.substr(0, charsShown);
现在我们知道应该显示多少个字符，使用 substr 截取原始文本。
这只显示从位置 0 到当前 charsShown 数量的字符。因此，文本会逐字构建。
设置闪烁状态
blinkingState = Math.floor(time * 2) % 2 == 0;
这一行设置闪烁的节奏。
它检查时间，乘以 2（所以每秒检查两次），并在 true 和 false 之间切换。
每 0.5 秒，结果会翻转：
如果为 true，光标可见
如果为 false，光标隐藏
这仅在启用闪烁的情况下生效。
确定光标可见性
cursorVisible = blink ? blinkingState : (charsShown < txt.length);
这行决定光标是否可见，基于你的闪烁设置。
如果闪烁为 true，那么我们遵循 blinkingState，光标闪烁。
如果闪烁为 false，光标不闪烁，但仅在输入进行中显示。一旦全文本显示完，光标就消失了。
这一行很重要，因为它解决了老问题：如果关闭闪烁，光标会永久可见。
最终光标状态
showCursor = keepBlinking ? cursorVisible : (charsShown < txt.length ? cursorVisible : false);
这是最后的决策点。我们检查：
如果 keepBlinking 为 true，则遵循正常的 cursorVisible 逻辑。这意味着光标在动画结束后继续闪烁或保持可见。
如果 keepBlinking 为 false，那么在所有字符显示完后，无论闪烁设置如何，光标都会完全消失。
这让你完全控制光标在动画后是否继续显示。
构建显示文本
typed + (showCursor ? cursor : "");
最后这一行构建将在屏幕上出现的实际字符串。
将当前已显示的文本（typed）添加到字符串中。
然后检查光标是否应该显示。
如果是，则在末尾添加光标字符。
如果不是，则简单地添加一个空字符串。
这样随着时间推移，你会得到类似的效果：
"H|" "He|" "Hel|" "Hell|" "Hello|"
"Hello" （光标消失，取决于设置）
这个非常灵活的打字机效果表达式，结合了闪烁光标，可以为文本动画增添真实感。
评论0