manim边做边学--文字创建销毁的打字机效果

对于Manim的用户来说，创建富有表现力的文本动画是其核心功能之一。
最近，Manim的官方文档中悄然增加了两个新的动画类：TypeWithCursor 和 UntypeWithCursor。
它们为我们带来了带有光标的打字和删除效果，极大地丰富了文本动画的可能性。
本文将深入探讨这两个新动画类的特性和应用。
1. 动画概要

TypeWithCursor和UntypeWithCursor 的核心作用是模拟真实的打字和删除文本的过程。
相比于Manim中已有的Write和UnWrite等动画，它们最大的特点是引入了“光标”这一视觉元素，使得动画效果更加生动和贴近现实。
TypeWithCursor 类似于 AddTextLetterByLetter，可以逐个字符地显示文本，并在当前输入的最后一个字符后面显示一个光标。
这非常适合用于以下场景：

• 代码演示: 在教学视频或技术分享中，模拟实时编写代码的过程，让观众更清晰地看到代码的输入流程。
  
• 对话模拟: 模拟聊天对话框、终端输入等场景，增强动画的代入感。
  
• 逐字稿展示: 配合旁白，以打字机的方式逐字显示字幕或关键信息，引导观众的阅读节奏。
  

UntypeWithCursor 则与TypeWithCursor相反，它类似于RemoveTextLetterByLetter，可以逐个字符地删除文本，并且光标会跟随删除的进度移动。
其应用场景包括：

• 文本修正: 模拟删除并修改错误文本的过程，可以用于展示“纠错”或“优化”的概念。
  
• 信息擦除: 动态地擦除屏幕上的信息，为新的内容腾出空间。
  
• 倒计时效果: 通过删除数字来实现倒计时的视觉效果。
  

这两个类的主要参数类似：
参数名称类型说明time_per_charfloat字母出现的频率cursorVMobjectNonebufffloat控制光标在最后添加的字母右侧的距离。keep_cursor_ybool光标的 y 坐标设置是否为文本的中心，并在整个动画中保持不变leave_cursor_onbool是否在动画后显示光标需要注意的是：目前这两个动画类仅支持对Text对象进行操作，暂时还不支持MathTex。
2. 使用示例

下面，我们将通过两个实际的应用场景，来展示TypeWithCursor和UntypeWithCursor的使用方法。
2.1. 模拟代码输入与修正

这个例子将模拟一个在终端中输入Python代码，然后发现错误并进行修正的过程。
我们将使用TypeWithCursor来输入代码，然后用UntypeWithCursor删除错误部分，最后再用TypeWithCursor输入正确的代码。

1. cursor = Rectangle(
2.     height=0.5, width=0.05, fill_color=WHITE, fill_opacity=1, stroke_width=0
3. )
5. # 错误的Python代码
6. wrong_code_line = Text("prtin('Hello, Manim!')", font="Monospace").scale(0.7)
7. # 正确的代码部分
8. correct_part = (
9.     Text("print", font="Monospace")
10.     .scale(0.7)
11.     .move_to(wrong_code_line[0:5], aligned_edge=LEFT)
12. )
14. # 设置光标初始位置
15. cursor.move_to(wrong_code_line.get_left() + LEFT * 0.1)
17. # 动画过程
18. self.play(TypeWithCursor(wrong_code_line, cursor, time_per_char=0.15))
19. self.wait()
20. # 删除错误的 'prtin'
21. self.play(UntypeWithCursor(wrong_code_line[0:5], cursor, time_per_char=0.1))
22. self.wait()
23. # 输入正确的 'print'
24. self.play(TypeWithCursor(correct_part, cursor, time_per_char=0.15))

复制代码

在这个例子中，我们自定义了一个白色的细长矩形作为光标。
通过time_per_char参数，我们控制了打字和删除的速度，使得动画更具节奏感。
同时，通过对Text对象进行切片，我们精确地控制了需要删除和重新输入的文本部分。
2.2. 动态标题展示

这个例子将展示如何使用TypeWithCursor和UntypeWithCursor来制作一个动态的、引人注目的标题。
我们将先用打字效果展示一个标题，然后将其删除，再展示另一个标题，并在动画间隙播放光标闪烁动画。

1. # 自定义一个黄色的下划线作为光标
2. cursor = Line(DOWN * 0.1, RIGHT * 0.2 + DOWN * 0.1, color=YELLOW)
4. # 第一个标题
5. title1 = Text("Welcome to My Channel", font_size=30)
7. # 第二个标题
8. title2 = Text("Let's Learn Manim!", font_size=30, color=BLUE)
10. # 动画过程
11. # 播放打字动画
12. self.play(TypeWithCursor(title1, cursor, keep_cursor_y=True, time_per_char=0.1))
13. # 在等待期间播放光标闪烁动画
14. self.play(Blink(cursor, blinks=3))
15. # 播放删除动画
16. self.play(
17.     UntypeWithCursor(
18.         title1,
19.         cursor,
20.         keep_cursor_y=True,
21.         time_per_char=0.05,
22.         leave_cursor_on=True,
23.     )
24. )
25. # 再次播放光标闪烁
26. self.play(Blink(cursor, blinks=3))
27. # 播放第二个标题的打字动画
28. self.play(TypeWithCursor(title2, cursor, buff=0.2, time_per_char=0.12))
29. # 结束时再次闪烁
30. self.play(Blink(cursor))

复制代码

在这个例子中，我们使用了一个黄色的Line作为光标，并通过Blink动画使其闪烁。
在动画中，我们设置keep_cursor_y=True来确保光标在y轴方向上保持稳定，这在处理多行文本时非常有用。
我们还通过调整buff参数增大了光标和文字的间距，并通过leave_cursor_on=True让光标在删除动画后依然停留在屏幕上，为接下来的输入动画做好了衔接。
3. 附件

文中的代码只是关键部分的截取，完整的代码共享在网盘中（type_cursor.py），
下载地址: 完整代码 (访问密码: 6872)

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

分享、互助 让互联网精神温暖你我

前排留名，哈哈哈

感谢，下载保存了