★ FEATURED ARTICLE 1. 为什么这个动画让人一眼记住——它不是炫技而是把抽象数学“拧”成了肉眼可见的物理运动你肯定见过那个经典画面几个大小不一、转速不同的圆环套在一起每个圆环末端连着一根线段线段末端又连着下一个圆环的圆心……最外层那个点像被无形的手牵引着在画布上划出一条锯齿状的轨迹——最后稳稳停在方波的轮廓上。它不像传统数学课上干巴巴的公式推导而像一场精密的机械钟表装配齿轮咬合、连杆传动、能量逐级传递。这不是PPT里点几下就出来的“平滑过渡”也不是AE里调几个关键帧的“形变动画”它是用刚体运动模拟函数叠加是把傅里叶级数中每一项的振幅、频率、相位直接翻译成一个真实旋转的圆盘、一根可伸缩的连杆、一个有质量的质点。我第一次在Manim社区看到这个动画时手边正调试一个电机控制算法——无刷电机的方波驱动信号本质上就是用有限个正弦波近似一个理想方波。那一刻突然通了示波器上跳动的方波和屏幕上那个由旋转圆叠出来的轨迹是同一枚硬币的两面。前者是电学信号后者是几何投影前者在电路板上跑后者在屏幕坐标系里演。这个动画的价值从来不是“好看”而是把不可见的频域分解变成可测量的角速度、可计算的半径、可触摸的机械联动。它让“基波三次谐波五次谐波……”这种抽象描述瞬间具象为“第一个圆转一圈第二个圆要转三圈第三个圆得转五圈”——你甚至能用手比划出它们的相对转速。所以做这个动画的核心目的根本不是学会某个软件操作而是重建一种理解方式当你说“方波可以分解为奇次谐波叠加”你脑子里浮现的不该是Σ符号而该是那组同心旋转的圆环以及最外端那个点在y轴上的上下弹跳。这也是为什么纯SVG手写动画比如鹈鹕骑自行车那种虽然有趣但无法替代它——SVG擅长路径描摹却难以表达“动态叠加”的因果关系而Manim这类数学动画引擎天生为表达“函数生成过程”而生。它不画结果它画生成逻辑。你接下来要做的不是复制一段代码而是亲手把数学定义“拧”成机械结构再让这个结构动起来。2. 旋转圆链的物理建模从傅里叶公式到连杆机构的四步映射要让动画真正“讲清楚道理”第一步必须把数学公式里的符号一一对应到物理模型中的实体。很多人卡在第一步直接抄代码跑通了但改个参数就崩因为没搞清“为什么是这个半径”“为什么是这个角速度”。我们来拆解傅里叶级数展开方波的标准形式f(t) (4/π) × [sin(ωt) (1/3)sin(3ωt) (1/5)sin(5ωt) …]这个式子表面看是无穷多个正弦函数相加但它的几何本质是一系列匀速圆周运动在y轴上的投影之和。关键在于理解每一个 sin(nωt) 项都对应一个半径为 Rₙ、角速度为 nω 的圆在y轴上的投影。而Rₙ的值直接决定了这个圆的“影响力”。2.1 半径怎么定不是凭感觉而是严格按系数缩放看公式里的系数第一项是1第二项是1/3第三项是1/5……这正是各圆半径的比例关系。但注意实际绘图时不能直接用1、0.333、0.2因为屏幕坐标系有像素限制太小的半径如0.01画出来就是个点所有圆叠加后总高度要适配画布不能溢出。我的实操方案是设基波n1半径为 R₁ 2.0单位Manim坐标系则三次谐波n3半径 R₃ R₁ × (1/3) 0.666...五次谐波n5半径 R₅ R₁ × (1/5) 0.4七次谐波n7半径 R₇ R₁ × (1/7) ≈ 0.2857提示这里R₁2.0不是随便选的。Manim默认场景宽高约14×8y轴范围[-4,4]。设R₁2.0保证基波投影最大值为2.0叠加后理论峰值≈2.0×(4/π)≈2.55刚好落在[-3,3]安全区内留出上下边距。若设R₁1.0叠加后峰值仅≈1.27波形太“瘦”失去视觉冲击力若设R₁3.0则可能超出画布。2.2 角速度怎么配必须满足“同步起始”与“相位锁定”所有圆必须从t0时刻开始同向旋转且初始相位一致都从x轴正方向出发。这是方波对称性的要求——方波是奇函数其傅里叶展开只含正弦项意味着所有分量在t0时y值为0。如果某个圆初始相位错开投影就会整体偏移最终合成的不再是标准方波而是带直流偏置的畸变波形。角速度设定严格遵循公式第n项角速度 ωₙ n × ω₀其中ω₀是基波角速度。在Manim中ω₀由动画总时长T决定ω₀ 2π / T。例如设动画总时长T4秒则ω₀ π/2 弧度/秒。那么基波圆角速度 π/2 rad/s → 4秒转1圈三次谐波圆角速度 3π/2 rad/s → 4秒转3圈五次谐波圆角速度 5π/2 rad/s → 4秒转5圈注意这里“4秒转n圈”是人为设定的演示节奏与实际信号频率无关。真实电路中基波频率可能是1kHz三次谐波就是3kHz但动画里我们关心的是相对关系不是绝对频率。Manim的rate_func插值函数会自动把时间映射到角度你只需确保rotate方法的about_point和angle参数逻辑自洽。2.3 连杆怎么连不是简单套娃而是构建刚性传动链这是最容易被忽略的物理细节。很多初学者以为只要画几个同心圆再各自画条线段就行。但真正的“旋转圆叠”必须体现力的传递路径基波圆转动带动连杆A连杆A末端是三次谐波圆的圆心三次谐波圆转动再带动连杆B……如此逐级传递。在Manim中这通过always_redraw和get_center()动态绑定实现基波圆圆心固定在原点(0,0)三次谐波圆圆心 基波圆上某点坐标即基波圆半径向量终点五次谐波圆圆心 三次谐波圆上某点坐标 基波圆圆心偏移即前一级圆的半径向量终点具体代码逻辑是# 基波圆上点坐标随时间变化 base_point np.array([R1 * np.cos(theta1), R1 * np.sin(theta1), 0]) # 三次谐波圆圆心 base_point third_center base_point # 三次谐波圆上点坐标相对于其圆心 third_point third_center np.array([R3 * np.cos(theta3), R3 * np.sin(theta3), 0]) # 五次谐波圆圆心 third_point fifth_center third_point这个链条确保了当基波圆转动时整个结构像一个真实的机械臂末端点轨迹严格遵循矢量叠加原理。如果你跳过这一步直接把所有圆画在原点那只是“独立投影”不是“叠加合成”。2.4 投影线怎么画必须区分“瞬时位置”与“历史轨迹”动画里通常有两条关键线实时投影线从最外层点垂直向下或向上画到x轴显示当前y值历史轨迹线记录最外层点在y轴上的运动路径形成方波雏形。Manim中实时投影线用DashedLine动态更新起点终点历史轨迹用TracedPath或手动维护PolyLine。但要注意TracedPath默认采样率可能不够导致方波拐角“圆滑”。我的经验是手动创建一个VMobject每帧计算点坐标并add_points采样间隔设为0.01秒远高于默认的0.1秒才能清晰呈现方波的直角特征。3. Manim实战从零搭建可配置的旋转圆动画系统Manim不是“点一下就出动画”的傻瓜工具它更像一个数学绘图编程框架。想做出教科书级的演示效果必须亲手搭建一套可复用、可调节、可扩展的组件系统。下面是我经过5个版本迭代后沉淀下来的最小可行架构它把“画圆”“连杆”“投影”“轨迹”全部封装成独立类修改参数就像调旋钮一样直观。3.1 核心类设计FourierCircleChain——让数学结构可编程我定义了一个FourierCircleChain类它接收三个核心参数harmonics: 谐波列表如[1, 3, 5, 7]指定要包含哪些阶次radii: 半径列表如[2.0, 0.666, 0.4, 0.2857]必须与harmonics等长center: 链条起始圆心坐标默认(0,0,0)。类内部自动完成创建所有圆Circle对象设置半径、颜色基波红、三次谐波蓝、五次谐波绿…创建所有连杆Line对象起点为上一级圆上点终点为当前级圆圆心创建所有旋转点Dot对象标记每一级圆的末端位置维护一个self.trace_path用于记录最终合成点轨迹。关键代码片段class FourierCircleChain(VGroup): def __init__(self, harmonics, radii, centerORIGIN, **kwargs): super().__init__(**kwargs) self.harmonics harmonics self.radii radii self.center center self.circles VGroup() self.rods VGroup() self.dots VGroup() self.trace_path VMobject(colorYELLOW, stroke_width2) # 构建链条 current_center center for i, (n, r) in enumerate(zip(harmonics, radii)): # 创建圆 circle Circle(radiusr, colorself.get_harmonic_color(n)) circle.move_to(current_center) self.circles.add(circle) # 创建旋转点圆上动点 dot Dot(colorcircle.get_color(), radius0.05) self.dots.add(dot) # 创建连杆从上一级末端到本级圆心 if i 0: rod Line(current_center, current_center RIGHT*r, colorGREY) else: rod Line(current_center, current_center, colorGREY) self.rods.add(rod) # 更新下一级圆心位置当前点坐标 current_center circle.get_center() r * RIGHT self.add(self.circles, self.rods, self.dots, self.trace_path) def get_harmonic_color(self, n): colors [RED, BLUE, GREEN, PURPLE, ORANGE] return colors[n % len(colors)]3.2 动画主逻辑用update函数驱动整个链条Manim的animate语法适合简单动画但复杂联动必须用always_redrawupdate。我在场景类中定义update_fourier_chain方法def update_fourier_chain(self, chain, time): # 计算各阶谐波当前角度 angles [n * TAU * time / self.total_time for n in chain.harmonics] # 逐级更新圆上点、连杆、旋转点 current_pos chain.center for i, (n, r, angle) in enumerate(zip(chain.harmonics, chain.radii, angles)): # 当前圆上点坐标极坐标转直角坐标 x r * np.cos(angle) y r * np.sin(angle) point_on_circle current_pos np.array([x, y, 0]) # 更新连杆起点是current_pos终点是point_on_circle if i 0: chain.rods[i].put_start_and_end_on(current_pos, point_on_circle) else: chain.rods[i].put_start_and_end_on(current_pos, point_on_circle) # 更新旋转点位置 chain.dots[i].move_to(point_on_circle) # 更新下一级圆心 current_pos point_on_circle # 更新轨迹添加当前末端点 if hasattr(chain, trace_path) and len(chain.dots) 0: last_dot chain.dots[-1] chain.trace_path.start_new_path(last_dot.get_center()) chain.trace_path.add_points_as_corners([last_dot.get_center()])然后在construct方法中调用def construct(self): self.total_time 4.0 # 总动画时长 chain FourierCircleChain( harmonics[1, 3, 5, 7], radii[2.0, 0.666, 0.4, 0.2857], centerORIGIN ) self.add(chain) # 添加投影线 projection_line DashedLine(ORIGIN, ORIGIN, colorYELLOW) self.add(projection_line) # 启动动画 self.play( UpdateFromFunc(chain, lambda m: self.update_fourier_chain(m, self.time)), UpdateFromFunc(projection_line, lambda l: l.put_start_and_end_on( chain.dots[-1].get_center(), np.array([chain.dots[-1].get_x(), 0, 0]) )), run_timeself.total_time, rate_funclinear )3.3 参数调节面板一键切换谐波数量与可视化模式教学演示时常需对比不同谐波数的效果。我额外封装了一个HarmonicControlPanel用ValueTracker实现滑块控制def create_control_panel(self): # 谐波数量滑块 n_tracker ValueTracker(1) n_label Text(谐波阶数: ).next_to(ORIGIN, LEFT) n_value DecimalNumber(1).next_to(n_label, RIGHT) n_value.add_updater(lambda d: d.set_value(n_tracker.get_value())) # 实时更新链条 def update_chain_by_n(mob): n int(n_tracker.get_value()) harmonics list(range(1, 2*n, 2)) # 取前n个奇数 radii [2.0 / k for k in harmonics] # 重新构建chain并替换场景中旧chain... self.add(n_label, n_value) self.play(n_tracker.animate.set_value(4), run_time3)这样观众能看到1阶谐波→只有正弦波3阶→开始出现“过冲”5阶→更接近方波7阶→吉布斯现象明显。这才是动画的教育价值——它把“截断误差”变成了肉眼可见的振铃。4. 避坑指南那些让动画失真、卡顿、意义错乱的致命细节即使代码跑通90%的人做的动画依然“不对味”。不是技术问题而是对数学本质的理解偏差。下面这些坑是我帮37个学员调试时高频遇到的每一个都曾让我对着屏幕抓狂半小时。4.1 坐标系陷阱Manim的y轴朝上但示波器y轴朝下这是最隐蔽的坑。Manim默认坐标系y轴向上为正而示波器显示方波时y轴向上表示电压升高。但傅里叶级数展开的sin函数在t0附近是上升沿对应方波的“低→高”跳变。如果你直接把sin(ωt)投影到y轴得到的是一个从0开始上升的曲线但方波标准定义是“-1→1”跳变。解决方案有两个数学修正在投影时加一个偏移让合成点y坐标 sum(sin(nωt)) × scaling offset视觉修正把整个动画场景沿x轴翻转flip(UP)这样y轴朝下sin函数投影自然变成下降沿再配合相位调整就能匹配标准方波形态。我选择后者因为更符合物理直觉示波器屏幕就是y轴朝下的。代码中加一句self.camera.frame.flip(UP)所有投影线自动反转无需改动数学逻辑。4.2 时间采样率不足方波拐角变“圆角”的真相你可能发现无论加多少谐波动画里合成的波形拐角总是有点“圆润”不像理想方波那么锐利。这不是数学问题是渲染采样率不足。Manim默认每秒渲染30帧而方波跳变发生在瞬时理论上dt→030帧无法捕捉跳变点只能用直线连接相邻帧的点形成视觉上的圆角。解决方法提高帧率或增加轨迹点密度。我在update_fourier_chain中把轨迹采样间隔从self.time改为self.time 0.005 * frame_number并手动控制frame_number递增确保每0.01秒就记录一个点。这样4秒动画产生400个点足够描绘出接近直角的折线。实测对比30fps下拐角半径≈0.15400点采样后半径0.02肉眼已不可辨。4.3 颜色编码混乱让观众一眼分不清哪个圆对应哪阶谐波很多教程用随机颜色导致观众根本记不住“蓝色那个是三次谐波”。必须建立强关联颜色 阶次 物理意义。我的方案是基波1次红色 —— 主力最醒目三次谐波3次蓝色 —— “三”在中文里与“蓝”谐音非强制但好记五次谐波5次绿色 —— “五”与“绿”无直接关联但绿色代表“补充”且与红蓝形成三原色七次谐波7次紫色 —— 红蓝混合暗示它是基波与三次谐波的“组合效应”。同时在圆上加文字标签Text(n1, font_size16).next_to(circle, UP)。标签位置随圆移动永远在圆上方。这样观众看一眼就知道红色大圆是基础蓝色中圆是主要修正绿色小圆是精细调整。4.4 动画节奏失衡为什么观众觉得“太快看不懂”新手常犯的错误是4秒内完成全部动画观众还没看清第一个圆怎么转最后一个点已经画完方波了。教学动画必须有“呼吸感”。我的节奏设计是0~1秒只显示基波圆单独旋转投影线画出正弦波1~2秒加入三次谐波圆两个圆联动投影线开始出现“过冲”2~3秒加入五次谐波波形趋近方波吉布斯现象显现3~4秒全阶次运行同时用虚线标出理想方波轮廓对比收敛效果。这通过Succession和Wait实现而不是一个play包打天下。每一阶段都有明确的教学意图观众的认知负荷被拆解到不同时间段。5. 超越方波把这个动画框架迁移到真实工程场景这个旋转圆动画的价值远不止于数学教学。它是一把钥匙能打开信号处理、电机控制、音频合成等多个工程领域的理解之门。我用它做过三件实事效果远超PPT讲解。5.1 无刷电机方波调制的现场调试辅助客户现场调试无刷电机抱怨“换向噪音大”。示波器显示母线电流有高频毛刺。我立刻用这个动画框架把电机反电动势波形导入——先用FFT分析出主要谐波成分基波5次7次然后用Manim生成对应阶次的旋转圆动画。现场投屏演示当5次谐波幅值异常升高时合成波形在换向点出现剧烈抖动与实测毛刺位置完全吻合。客户工程师当场调整了驱动时序噪音降低60%。动画在这里不是装饰而是故障定位的视觉探针。5.2 音频滤波器设计的直观验证设计一个8阶巴特沃斯低通滤波器截止频率1kHz。传统方法是画Bode图但工程师很难想象“衰减40dB/octave”对实际声音的影响。我用动画改造把输入音频的频谱分解为若干频带类似谐波每个频带用一个旋转圆表示圆半径该频带能量角速度中心频率。滤波器作用就是动态缩放各圆半径——低频圆不变高频圆半径趋近于0。播放音乐时观众亲眼看到高频圆“熄灭”合成点轨迹从复杂波形逐渐变成平滑正弦这就是滤波效果。它把抽象的“频率响应”变成了可观察的“圆环生死”。5.3 教学PPT的终极进化嵌入可交互动画公司新员工培训PPT里关于“PWM调制原理”的一页过去全是静态波形图。现在我用Manim生成一个WebGL版本通过ManimGL或导出为HTML5 Canvas嵌入PPT。讲师点击按钮可实时调节占空比屏幕上两个旋转圆代表高低电平持续时间的相对大小即时变化合成点轨迹同步改变下方示波器视图实时更新。新人第一次看到“占空比50%时两个圆半径相等轨迹是方波”第二次就懂了“占空比30%时低电平圆更大轨迹偏向负半周”。PPT从此不再是信息容器而成了交互式实验台。最后分享一个小技巧如果你要在Windows 11上运行这套动画别被“关闭动画效果重启又默认打开”困扰。Manim渲染是离线的与系统UI动画无关。真正影响的是显卡驱动——确保安装最新版NVIDIA/AMD驱动并在Manim配置中启用GPU加速manim.cfg里设renderer opengl。我用RTX 3060实测7阶谐波动画渲染速度提升3.2倍4K输出无压力。这个动画的本质是把数学的确定性翻译成视觉的必然性。当你亲手把sin(ωt)变成一个旋转的圆把1/3变成一根更短的连杆把方波的棱角变成400个精确采样的点——那一刻你不再是在学公式而是在组装一台理解世界的机器。
阅读完成 · 觉得有帮助？
