拓扑导数可视化指南：用Manim动画理解Fréchet空间中的微分

关注

原创 2026-03-02 11:59:43 214 阅读 AI 写同款· GEO 优化 ›

拓扑导数可视化指南：用Manim动画理解Fréchet空间中的微分

你是否曾试图向学生解释，为什么一个函数在无限维空间中的“导数”可能不是一个简单的数字，而是一个线性算子？或者，当课本上写着“Fréchet导数”的定义时，你发现学生们的眼神开始变得迷茫，因为那些抽象的符号和极限操作，在脑海中无法形成任何具体的图像？这正是数学可视化可以大放异彩的地方。我们的大脑天生擅长处理图像和运动，而非一长串的ε-δ语言。对于数学教育工作者和视觉学习者而言，将拓扑向量空间、Gâteaux导数、Fréchet导数这些高阶概念转化为直观的动画，不仅能打破认知壁垒，更能揭示数学结构本身的美感与力量。

本文将带你深入如何利用Manim——那个因3Blue1Brown而闻名遐迩的数学动画引擎——来构建一套关于无限维空间中微分概念的视觉叙事。我们不会止步于复现经典的二维切线动画，而是要将镜头推向更广阔的舞台：有限维与无限维空间的本质差异、Gâteaux导数的非线性“方向性”，以及Fréchet导数所代表的全局线性逼近思想。通过精心设计的场景，我们将让那些“看不见”的数学对象——比如函数空间中的点、线性映射、高阶无穷小余项——在屏幕上生动起舞，把抽象的拓扑和泛函分析概念，变成一段段令人难忘的视觉旅程。

1. 搭建舞台：从欧几里得空间到拓扑向量空间

在打开Manim之前，我们必须先厘清要可视化什么。经典微积分中的导数 f'(x0)，本质是实数轴上某点切线的斜率。在R^n中，它升级为雅可比矩阵，一个线性变换，其图像是切平面或切超平面。但当我们说一个定义在函数空间（比如所有连续函数构成的集合C([0,1])）上的泛函J(f)可微时，事情就变得有趣了。

关键的第一步是理解空间的升级：

有限维空间 (如 R^n)：每个点可以用有限个坐标(x1, x2, ..., xn)表示。邻域是开球，线性映射对应矩阵。
拓扑向量空间：一个同时具有拓扑结构（定义了开集、收敛）和向量空间结构（可加、可数乘）的集合。至关重要的是，加法和数乘运算是连续的。这包括了但不限于：
- 赋范空间：有范数||·||，可以度量长度和距离（如C([0,1])带上确界范数）。
- Fréchet空间：一种更一般的完备拓扑向量空间，其拓扑可由一列半范数或一个准范数诱导，但不一定由单个范数诱导。
- 一般的拓扑向量空间：可能连距离都没有，收敛完全由拓扑（开集族）定义。

为了在Manim中表现这种“空间感”，我们不能只画坐标轴。我们需要创造一种视觉隐喻。

视觉隐喻策略：将整个“空间”本身作为一个背景舞台。对于有限维R^2，舞台就是熟悉的笛卡尔网格。对于无限维函数空间，我们可以将舞台描绘成一个“函数的宇宙”，其中每个“点”是一条完整的曲线。在动画中，我们可以让一条代表函数f的曲线平滑地“变形”为另一条曲线f + h，而h本身也是一条（小的）曲线，代表一个“方向”或“扰动”。

Manim实现示例：创建函数空间舞台

from manim import *

class FunctionSpaceScene(Scene):
    def construct(self):
        # 创建一个坐标轴代表定义域，比如 [0, 1]
        axes = Axes(
            x_range=[0, 1, 0.2],
            y_range=[-1.5, 1.5, 0.5],
            axis_config={"color": BLUE},
        )
        axes_labels = axes.get_axis_labels(x_label="t", y_label="f(t)")

        # 在函数空间中选取一个“点”，即一个基础函数 f0
        # 例如 f0(t) = sin(2πt)
        f0 = axes.plot(lambda t: np.sin(2 * PI * t), color=GREEN, stroke_width=3)
        f0_label = MathTex(r"f_0", color=GREEN).next_to(f0.point_from_proportion(0.7), UP)

        # 创建一个代表“方向”或“扰动”的函数 h，例如 h(t) = 0.3 * t * (1-t)
        h = axes.plot(lambda t: 0.3 * t * (1-t), color=YELLOW, stroke_width=2)
        h_label = MathTex(r"h", color=YELLOW).next_to(h.point_from_proportion(0.5), UP)

        # 展示 f0 和 h 作为空间中的独立“向量”
        self.play(Create(axes), Write(axes_labels))
        self.play(Create(f0), Write(f0_label))
        self.wait(1)
        self.play(Create(h), Write(h_label))
        self.wait(1)

        # 关键动画：展示向量加法 f0 + ε*h，其中 ε 是一个标量
        # 这模拟了在函数空间中从点 f0 沿方向 h 移动
        epsilon = ValueTracker(0)
        f_eps = always_redraw(
            lambda: axes.plot(
                lambda t: np.sin(2 * PI * t) + epsilon.get_value() * 0.3 * t * (1-t),
                color=RED,
                stroke_width=3
            )
        )
        f_eps_label = always_redraw(
            lambda: MathTex(r"f_0 + \varepsilon h", color=RED
            ).next_to(f_eps.point_from_proportion(0.3), UP)
        )

        self.play(TransformFromCopy(f0, f_eps), Write(f_eps_label))
        self.play(epsilon.animate.set_value(1), run_time=3)
        self.play(epsilon.animate.set_value(-0.5), run_time=2)
        self.wait(2)

这段代码构建了一个直观的场景：绿色曲线f0是空间中的一个点，黄色曲线h是一个方向向量。红色曲线展示了当用一个标量ε缩放h并加到f0上时，我们如何在函数空间中移动。这就是拓扑向量空间中加法和数乘运算的可视化。

2. 刻画变化：Gâteaux导数的方向性探针

有了空间的视觉表现，接下来我们聚焦于“变化率”。在无限维中，最自然的起点是Gâteaux导数。它本质上是方向导数在抽象空间中的推广。对于泛函J: X -> R（X是拓扑向量空间）在点f0处沿方向h的Gâteaux导数定义为： dJ(f0; h) = lim_{ε->0} [J(f0 + εh) - J(f0)] / ε 如果这个极限对每个固定的h都存在，我们就说J在f0处是Gâteaux可微的。但请注意，这个导数映射h -> dJ(f0; h)可能不是线性的！ 这是与有限维情形的第一个重大区别。

可视化挑战与策略：

展示极限过程：我们需要动画表现ε -> 0时，差商[J(f0+εh)-J(f0)]/ε的收敛行为。
揭示非线性性：选择两个不同的方向h1和h2，分别计算其Gâteaux导数。然后展示，沿h1+h2方向的导数，未必等于两者之和。这是Gâteaux导数可能非线性的直接证据。

Manim实现示例：对比线性与非线性Gâteaux导数

假设我们有两个有趣的泛函例子：

例A（线性泛函）：J1(f) = ∫_0^1 f(t) dt。它的Gâteaux导数是线性的：dJ1(f0; h) = ∫_0^1 h(t) dt。
例B（非线性泛函）：J2(f) = ∫_0^1 |f(t)|^2 dt。它的Gâteaux导数是dJ2(f0; h) = 2∫_0^1 f0(t)h(t) dt，这个映射h -> dJ2(f0; h)关于h是线性的。等等，这个例子是线性的？为了展示非线性，我们需要一个更“极端”的例子，比如J3(f) = max_{t in [0,1]} |f(t)|在f0=0处的Gâteaux导数。在f0=0处，J3(0+εh) = |ε| * max|h|，因此dJ3(0; h) = max|h|，这关于h不是线性的（它是齐次的，但不是可加的）。

from manim import *

class GateauxDerivativeScene(Scene):
    def construct(self):
        # 设置坐标轴和基础函数 f0 = 0
        axes = Axes(x_range=[0, 1, 0.2], y_range=[-1, 1, 0.5])
        f0 = axes.plot(lambda t: 0, color=GRAY) # 零函数

        # 定义两个不同的方向 h1 和 h2
        # h1(t) = t
        h1 = axes.plot(lambda t: t, color=BLUE, stroke_width=3)
        h1_label = MathTex(r"h_1(t)=t", color=BLUE).to_edge(UL)
        # h2(t) = sin(πt)
        h2 = axes.plot(lambda t: np.sin(PI*t), color=GREEN, stroke_width=3)
        h2_label = MathTex(r"h_2(t)=\sin(\pi t)", color=GREEN).next_to(h1_label, DOWN)

        # 定义泛函 J(f) = max |f(t)|
        def J(f_func): # f_func 是一个函数
            # 简单离散采样求最大值
            ts = np.linspace(0, 1, 100)
            values = np.abs([f_func(t) for t in ts])
            return max(values)

        # 创建数值显示器，展示 ε, J(f0+εh), 差商
        epsilon_tracker = ValueTracker(1.0)
        current_h = [h1] # 当前活动的方向

        # 用于更新显示的函数
        def get_quotient(h_func):
            eps = epsilon_tracker.get_value()
            if abs(eps) < 0.001:
                eps = 0.001 if eps >=0 else -0.001 # 避免除零
            # 计算 J(f0+εh) = max |ε * h(t)| = |ε| * max|h(t)|
            J_eps = abs(eps) * J(h_func)
            J0 = 0 # J(f0)=0
            quotient = (J_eps - J0) / eps
            # 注意：当 eps>0 时，商为 max|h|；当 eps<0 时，商为 -max|h|
            # 所以极限依赖于 eps 从正负两侧趋于0，这里我们只展示 eps->0+
            return quotient

        quotient_text = always_redraw(
            lambda: DecimalNumber(
                get_quotient(lambda t: t) if current_h[0] is h1 else get_quotient(lambda t: np.sin(PI*t)),
                num_decimal_places=3
            ).scale(1.2).next_to(axes, RIGHT)
        )
        quotient_label = Tex(r"差商: $\frac{J(f_0+\varepsilon h)-J(f_0)}{\varepsilon}$").next_to(quotient_text, UP)

        epsilon_text = always_redraw(
            lambda: DecimalNumber(epsilon_tracker.get_value(), num_decimal_places=3
            ).scale(1.2).next_to(quotient_text, DOWN, buff=0.5)
        )
        epsilon_label = Tex(r"$\varepsilon$:").next_to(epsilon_text, LEFT)

        self.add(axes, f0, h1, h1_label, h2, h2_label, quotient_text, quotient_label, epsilon_text, epsilon_label)

        # 动画1：沿 h1 方向观察差商极限
        current_h[0] = h1
        self.play(epsilon_tracker.animate.set_value(0.1), run_time=3, rate_func=linear)
        self.wait(1)
        # 显示极限值 max|h1| = 1
        limit_val1 = MathTex(r"\lim_{\varepsilon \to 0^+} = 1", color=BLUE).next_to(quotient_text, RIGHT)
        self.play(Write(limit_val1))
        self.wait(1)

        # 动画2：沿 h2 方向观察差商极限
        current_h[0] = h2
        self.play(FadeOut(limit_val1), epsilon_tracker.animate.set_value(1.0))
        self.play(epsilon_tracker.animate.set_value(0.1), run_time=3, rate_func=linear)
        self.wait(1)
        # 显示极限值 max|h2| = 1
        limit_val2 = MathTex(r"\lim_{\varepsilon \to 0^+} = 1", color=GREEN).next_to(quotient_text, RIGHT)
        self.play(Write(limit_val2))
        self.wait(1)

        # 动画3：关键对比！计算沿 (h1+h2) 的方向导数
        # 首先，创建 h1+h2 的曲线
        h_sum = axes.plot(lambda t: t + np.sin(PI*t), color=PURPLE, stroke_width=4)
        h_sum_label = MathTex(r"h_1 + h_2", color=PURPLE).next_to(h2_label, DOWN)
        self.play(Create(h_sum), Write(h_sum_label))
        self.wait(1)

        current_h[0] = h_sum
        self.play(epsilon_tracker.animate.set_value(1.0))
        self.play(epsilon_tracker.animate.set_value(0.1), run_time=3, rate_func=linear)
        self.wait(1)
        # 显示极限值 max|h1+h2| ≈ max|t+sin(πt)|，在t≈0.7处约为 1.7
        # 手动计算近似值
        ts = np.linspace(0,1,1000)
        vals = np.abs(ts + np.sin(PI*ts))
        approx_max = np.max(vals) # 约等于 1.7
        limit_val3 = MathTex(rf"\lim_{{\varepsilon \to 0^+}} \approx {approx_max:.2f}", color=PURPLE).next_to(quotient_text, RIGHT)
        self.play(Transform(limit_val2, limit_val3))
        self.wait(2)

        # 打出结论：dJ(0; h1+h2) ≈ 1.7 ≠ 1 + 1 = dJ(0;h1)+dJ(0;h2)
        conclusion = Tex(r"$\therefore dJ(0; h_1+h_2) \neq dJ(0; h_1) + dJ(0; h_2)$",
                        color=RED, font_size=36).to_edge(DOWN)
        self.play(Write(conclusion))
        self.wait(3)

这个动画清晰地展示了，对于泛函J(f)=max|f(t)|在零点处，沿h1和h2方向的Gâteaux导数都是1，但沿它们和的方向的导数却大约是1.7，不等于两者之和。这直观地证明了Gâteaux导数映射h -> dJ(f0; h)可以是非线性的，它仅仅是一个关于方向h的齐次函数。

3. 逼近的艺术：Fréchet导数的全局线性视角

Gâteaux导数探测了各个方向的变化率，但它是一种“逐点”（逐方向）的线性化。Fréchet导数的要求则严格得多：它要求存在一个连续的线性算子 A: X -> Y，使得在f0附近，函数值的变化J(f0+h) - J(f0)可以被A(h)很好地一致逼近，其误差是比||h||更高阶的无穷小。用公式表达就是： J(f0 + h) = J(f0) + A(h) + o(||h||) 其中 o(||h||) 满足 lim_{||h||->0} o(||h||) / ||h|| = 0。

Fréchet导数的核心是“线性逼近”的全局一致性。这意味着，无论扰动h来自哪个方向，线性部分A(h)都能以统一的精度（误差相对于||h||一致地趋于零）来近似函数值的变化。这与Gâteaux导数只要求每个方向极限存在但可能“拼”不成一个线性算子形成对比。

可视化策略：

对比Gâteaux与Fréchet：选择一个在某个点Gâteaux可微但Fréchet不可微的经典例子（如某些非光滑泛函），用动画展示其Gâteaux导数（各个方向的切线斜率）如何无法“拼接”成一个连续的切平面。
可视化“小o”余项：这是理解Fréchet导数的关键。我们需要展示，当扰动h的范数（“长度”）缩小时，误差项J(f0+h) - J(f0) - A(h)的缩小速度比||h||快得多。

Manim实现示例：可视化Fréchet导数的线性逼近

我们以一个简单的、在有限维但能说明问题的例子开始：函数F: R^2 -> R， F(x,y) = x^2 + y^2 在点(1,1)处。它的Fréchet导数（即梯度）是线性函数A(h1, h2) = 2*h1 + 2*h2。我们将同时展示：

真实的函数值变化 ΔF = F(1+h1, 1+h2) - F(1,1)。
线性逼近值 A(h) = 2h1 + 2h2。
误差 error = ΔF - A(h)。

from manim import *

class FrechetApproximationScene(ThreeDScene):
    def construct(self):
        # 设置3D坐标轴
        axes = ThreeDAxes(
            x_range=[-2, 2, 1],
            y_range=[-2, 2, 1],
            z_range=[0, 8, 2],
        )
        self.set_camera_orientation(phi=60 * DEGREES, theta=-45 * DEGREES)

        # 定义函数 F(x,y) = x^2 + y^2
        surface = Surface(
            lambda u, v: axes.c2p(u, v, u**2 + v**2),
            u_range=[-2, 2],
            v_range=[-2, 2],
            resolution=(30, 30),
            fill_opacity=0.6,
            fill_color=BLUE,
            stroke_width=0.5,
            stroke_color=WHITE,
        )

        # 基点 (1,1, F(1,1)=2)
        base_point = axes.c2p(1, 1, 2)
        base_dot = Dot3D(point=base_point, color=RED, radius=0.08)
        base_label = MathTex(r"(1,1,2)", font_size=24).next_to(base_dot, UR, buff=0.1)

        # 切平面：z = F(1,1) + F_x(1,1)*(x-1) + F_y(1,1)*(y-1) = 2 + 2(x-1) + 2(y-1)
        # 化简：z = 2x + 2y - 2
        tangent_plane = Surface(
            lambda u, v: axes.c2p(u, v, 2*u + 2*v - 2),
            u_range=[0, 2],
            v_range=[0, 2],
            resolution=(20,20),
            fill_opacity=0.5,
            fill_color=GREEN,
            stroke_width=0.3,
            stroke_color=WHITE,
        )

        self.add(axes, surface, base_dot, base_label)
        self.wait(2)
        self.play(Create(tangent_plane))
        self.wait(2)

        # 现在，我们引入一个扰动向量 h = (h1, h2)
        # 用一个Vector表示，终点是 (1+h1, 1+h2, 2)
        h1_tracker = ValueTracker(0.5)
        h2_tracker = ValueTracker(0.5)

        # 扰动点
        perturbed_point = always_redraw(
            lambda: axes.c2p(
                1 + h1_tracker.get_value(),
                1 + h2_tracker.get_value(),
                (1+h1_tracker.get_value())**2 + (1+h2_tracker.get_value())**2
            )
        )
        perturbed_dot = Dot3D(point=perturbed_point, color=YELLOW, radius=0.08)

        # 从基点到扰动点的向量（在xy平面投影）
        h_vector_xy = always_redraw(
            lambda: Arrow3D(
                start=axes.c2p(1, 1, 2),
                end=axes.c2p(1+h1_tracker.get_value(), 1+h2_tracker.get_value(), 2),
                color=PURPLE,
                thickness=0.02
            )
        )
        h_label = always_redraw(
            lambda: MathTex(r"\vec{h}", color=PURPLE, font_size=28
            ).next_to(h_vector_xy.get_center(), LEFT+UP, buff=0.1)
        )

        # 真实函数值变化 ΔF (红色垂直线段)
        deltaF_line = always_redraw(
            lambda: Line3D(
                start=axes.c2p(1+h1_tracker.get_value(), 1+h2_tracker.get_value(), 2),
                end=axes.c2p(1+h1_tracker.get_value(), 1+h2_tracker.get_value(),
                            (1+h1_tracker.get_value())**2 + (1+h2_tracker.get_value())**2),
                color=RED,
                stroke_width=6
            )
        )
        deltaF_label = always_redraw(
            lambda: MathTex(r"\Delta F", color=RED, font_size=24
            ).next_to(deltaF_line.get_center(), RIGHT, buff=0.1)
        )

        # 线性逼近值 A(h) = 2h1+2h2 (绿色垂直线段，从切平面到xy平面投影点)
        A_h_val = always_redraw(
            lambda: 2*h1_tracker.get_value() + 2*h2_tracker.get_value()
        )
        A_h_line = always_redraw(
            lambda: Line3D(
                start=axes.c2p(1+h1_tracker.get_value(), 1+h2_tracker.get_value(), 2),
                end=axes.c2p(1+h1_tracker.get_value(), 1+h2_tracker.get_value(),
                            2 + A_h_val()),
                color=GREEN,
                stroke_width=6
            )
        )
        A_h_label = always_redraw(
            lambda: MathTex(r"A(\vec{h})", color=GREEN, font_size=24
            ).next_to(A_h_line.get_center(), LEFT, buff=0.1)
        )

        # 误差 error = ΔF - A(h) (黄色线段，从线性逼近终点到真实函数值点)
        error_line = always_redraw(
            lambda: Line3D(
                start=axes.c2p(1+h1_tracker.get_value(), 1+h2_tracker.get_value(),
                               2 + A_h_val()),
                end=axes.c2p(1+h1_tracker.get_value(), 1+h2_tracker.get_value(),
                            (1+h1_tracker.get_value())**2 + (1+h2_tracker.get_value())**2),
                color=YELLOW,
                stroke_width=6
            )
        )
        error_label = always_redraw(
            lambda: MathTex(r"o(\|\vec{h}\|)", color=YELLOW, font_size=24
            ).next_to(error_line.get_center(), RIGHT+UP, buff=0.1)
        )

        # 信息面板，显示数值
        info_text = always_redraw(lambda: VGroup(
            MathTex(r"\vec{h} = "),
            DecimalNumber(h1_tracker.get_value(), num_decimal_places=2),
            MathTex(r","),
            DecimalNumber(h2_tracker.get_value(), num_decimal_places=2)
        ).arrange(RIGHT).scale(0.7).to_corner(UR))
        info_text2 = always_redraw(lambda: VGroup(
            MathTex(r"\|\vec{h}\| \approx "),
            DecimalNumber(np.sqrt(h1_tracker.get_value()**2 + h2_tracker.get_value()**2), num_decimal_places=3),
            Tex(r",  "),
            MathTex(r"\frac{|o(\|h\|)|}{\|h\|} \approx "),
            DecimalNumber(
                abs(((1+h1_tracker.get_value())**2+(1+h2_tracker.get_value())**2 - 2 - (2*h1_tracker.get_value()+2*h2_tracker.get_value())) /
                    max(1e-6, np.sqrt(h1_tracker.get_value()**2 + h2_tracker.get_value()**2))),
                num_decimal_places=4
            )
        ).arrange(RIGHT).scale(0.6).next_to(info_text, DOWN, aligned_edge=LEFT))

        self.add_fixed_orientation_mobjects(info_text, info_text2) # 保持2D标签朝向屏幕
        self.play(
            Create(h_vector_xy), Write(h_label),
            Create(perturbed_dot),
            Create(deltaF_line), Write(deltaF_label),
            Create(A_h_line), Write(A_h_label),
            Create(error_line), Write(error_label),
            Write(info_text), Write(info_text2)
        )
        self.wait(2)

        # 关键动画：让 h 的范数逐渐缩小到0，观察误差与 ||h|| 的比值如何趋于0
        self.play(
            h1_tracker.animate.set_value(0.2),
            h2_tracker.animate.set_value(0.1),
            run_time=4,
            rate_func=linear
        )
        self.wait(1)
        self.play(
            h1_tracker.animate.set_value(0.05),
            h2_tracker.animate.set_value(0.03),
            run_time=4,
            rate_func=linear
        )
        self.wait(2)

        # 强调结论：误差消失得比 ||h|| 更快
        conclusion_text = Tex(r"当 $\|\vec{h}\| \to 0$ 时，$\displaystyle \\frac{|o(\|\vec{h}\|)|}{\|\vec{h}\|} \to 0$",
                             color=YELLOW, font_size=32).to_edge(DOWN)
        self.add_fixed_orientation_mobjects(conclusion_text)
        self.play(Write(conclusion_text))
        self.wait(3)

这个动画通过三维图形，直观对比了真实函数值变化（红色线段）、线性逼近值（绿色线段）和误差（黄色线段）。当扰动向量h的模长||h||通过动画逐渐缩小时，信息面板会实时计算误差与||h||的比值。观众可以清晰地看到，这个比值确实趋近于零，这就是Fréchet导数定义中o(||h||)项的精髓——误差是比扰动范数更高阶的无穷小。

4. 实战：将抽象证明转化为视觉论证

数学中许多关于导数的抽象证明，本质上可以通过动画获得直观理解。例如，Fréchet导数若存在则必唯一，以及链式法则。我们可以用Manim来“证明”这些命题。

可视化“唯一性”证明：假设有两个连续的线性算子A和B都满足Fréchet导数的定义。那么对于任意小的h，有： J(f0+h) - J(f0) = A(h) + o_A(||h||) = B(h) + o_B(||h||) 相减得 (A-B)(h) = o_B(||h||) - o_A(||h||) = o(||h||)。我们需要展示，对于所有非零的h，(A-B)(h)相对于||h||必须是更高阶无穷小，这迫使A-B必须是零算子。

Manim策略：

创建两个不同的“候选”切平面（代表A和B）。
让一个扰动小球h在原点附近随机游走。
同时画出向量A(h)和B(h)。
展示随着||h||缩小，向量A(h)和B(h)不仅自身缩小，而且它们之间的差向量(A-B)(h)的模长以更快的速度缩小（相对于||h||）。
最终，当h趋于零时，A(h)和B(h)的箭头完全重合，暗示A=B。

可视化“链式法则”：链式法则 (g∘f)'(x0) = g'(f(x0)) ∘ f'(x0) 是微积分的核心。在无限维中，它意味着复合映射的线性逼近等于内部映射的线性逼近与外部映射的线性逼近的复合。

Manim策略：我们可以设计一个场景，其中：

f: R -> R^2（一条空间曲线），其导数f'(t0)是一个切向量（2维）。
g: R^2 -> R（一个曲面），在点f(t0)处的导数g'(f(t0))是一个梯度（协向量），作用在切向量上给出一个数。
g∘f: R -> R是复合函数（曲线在曲面上的高度函数），其导数(g∘f)'(t0)是一个数。动画可以展示：

在t0附近，曲线f被其切向量f'(t0)线性逼近。
将这条线性逼近的曲线（一条直线）输入到g的线性逼近（切平面）中。
得到的结果，正好是复合函数g∘f在t0处的线性逼近（切线斜率）。通过并排对比(g∘f)(t0+Δt)的真实值、通过链式法则计算出的逼近值、以及直接线性逼近的值，可以生动展示等式成立。

实现这样的证明动画需要更复杂的场景搭建和数值计算，但其核心思想是将代数操作（减法、复合）与几何变换（向量的缩放、投影、映射）对应起来。例如，对于链式法则，我们可以用不同颜色的箭头流来代表f的微分和g的微分，然后展示它们如何“串联”起来形成复合函数的微分流。

通过将Manim动画与严格的数学叙述相结合，我们不仅提供了视觉辅助，更构建了一种新的理解路径。对于教育者，这意味着你可以暂停在关键帧，指着屏幕说：“看，这就是o(||h||)的含义——那条黄色的误差线段消失的速度，比紫色扰动箭头缩短的速度快得多。”对于视觉学习者，这意味着那些曾经令人望而生畏的符号Df(x0)，现在变成了一个可以观看、可以操控的变换过程。当抽象的Fréchet空间微分概念，化身为屏幕上优雅舞动的曲线、平面和箭头时，理解的门槛便被极大地降低了。这正是数学可视化在高端教育中的价值：它不是替代严谨，而是为直觉搭建一座通往严谨的桥梁。