如何解决Manim中VGroup逐词生成文本的基线对齐问题？

在制作展示语言模型自回归文本生成的Manim动画时，使用VGroup添加新预测Token后出现基线对齐参差不齐的问题。以下是复现问题的最简代码：

from manim import *

class textConcat(Scene):
    def construct(self):
        # List of tokens to predict
        tokens = "The cat is hungry".split(" ")

        # Initial token setup
        text = Text(tokens.pop(0), font="Helvetica", font_size=20).set_color(BLUE)
        text_group = (
            VGroup(text).arrange(RIGHT, aligned_edge=DOWN).to_corner(UL, buff=1.0)
        )

        self.play(Write(text_group))

        for token in tokens:
            # machine outputs the next token to the right
            prediction = Text(token, font="Helvetica", font_size=20).set_color(BLUE)

            # Instantiate the prediction behind the machine
            self.play(FadeIn(prediction), run_time=0.01)

            # Create an arc path from the right of the machine to the left
            start_point = prediction.get_left()
            end_point = text_group.get_right() + RIGHT * 0.3
            arc_path = ArcBetweenPoints(
                start_point, end_point, angle=-PI
            )  # Negative for an arc underneath

            # Animate the prediction following the arc path
            self.play(MoveAlongPath(prediction, arc_path), run_time=1.0)

            # Update the VGroup with the new prediction token # TODO: Fix alignment of baseline
            text_group.add(prediction)
            self.play(
                prediction.animate.next_to(text_group[-2], RIGHT),
                run_time=0.5,
            )

        # Finish animation
        self.wait(2)

if __name__ == "__main__":
    from manim import *
    textConcat().render()

曾尝试通过调整y坐标强制对齐（如下代码），但未生效：

text_group.shift(UP * (text_group.get_y() - text_group[0].get_y()))

使用版本：ManimCommunity v0.18.1

解决方案 #

核心问题是仅用next_to让新Token靠近前一个元素，没有统一对整个VGroup基于基线（DOWN边缘）重新排列。修正后的代码如下：

from manim import *

class textConcat(Scene):
    def construct(self):
        # List of tokens to predict
        tokens = "The cat is hungry".split(" ")

        # Initial token setup
        text = Text(tokens.pop(0), font="Helvetica", font_size=20).set_color(BLUE)
        text_group = VGroup(text).arrange(RIGHT, aligned_edge=DOWN, buff=0.3).to_corner(UL, buff=1.0)
        self.play(Write(text_group))

        for token in tokens:
            prediction = Text(token, font="Helvetica", font_size=20).set_color(BLUE)
            # 初始化到屏幕右侧外，避免与文本组重叠
            prediction.to_corner(UR, buff=2.0)
            self.play(FadeIn(prediction), run_time=0.01)

            # 计算弧线路径：从右侧到当前文本组的右侧
            start_point = prediction.get_left()
            end_point = text_group.get_right() + RIGHT * 0.1
            arc_path = ArcBetweenPoints(start_point, end_point, angle=-PI)
            
            # 沿弧线移动Token到文本组右侧
            self.play(MoveAlongPath(prediction, arc_path), run_time=1.0)

            # 添加到组并重新排列（强制基线对齐）
            text_group.add(prediction)
            # 动画化组的重新排列，保持整体位置不变
            self.play(
                text_group.animate.arrange(RIGHT, aligned_edge=DOWN, buff=0.3),
                run_time=0.5,
            )

        self.wait(2)

if __name__ == "__main__":
    textConcat().render()

关键改动说明 #

• 移除单独的next_to动画，改为对整个text_group执行arrange(RIGHT, aligned_edge=DOWN)，确保所有Token始终以基线对齐
• 使用buff=0.3参数统一控制Token之间的间距，替代手动添加的偏移量
• 调整新Token的初始位置到屏幕右侧外，避免与现有文本组重叠
• 动画化整个组的重新排列过程，保证视觉流畅性

内容的提问来源于stack exchange，提问作者tannonk