我第一次看到“旋转圆叠方波”这个动画是在某个数学科普视频里屏幕左边几个大小不一的圆像齿轮一样转着末端拖出一条不断伸长的曲线最后竟然拼出一个方波。当时我的第一反应是“这怕不是后期特效”后来才明白这其实是傅里叶级数在复平面上的直观可视化而它的实现一点也不神秘——用 Python 的 matplotlib 或 Web 的 Canvas 都能做出来。这篇文章就把原理、选型、完整代码和踩坑记录一次讲清楚适合想把这个经典动画做成教学演示、课程作业或者博客配图的人。作为用傅里叶级数做可视化的人我最想告诉你的是这个动画的关键不在“旋转圆”本身而在于“圆”和“正弦波”其实是同一个东西的两种形态。把这条逻辑理清了代码几乎就是顺着手抄一遍的事。1. 拆开原理为什么几个旋转圆能画出方波1.1 方波的底牌一串奇次正弦波先回到傅里叶级数本身。任何一个周期信号都能分解成一系列频率为原始频率整数倍的正弦波和余弦波之和。方波当然也不例外。对于一个幅值从 -1 到 1、占空比 50% 的方波它的傅里叶展开式长这样f(t) (4/π) * [ sin(ωt) (1/3)sin(3ωt) (1/5)sin(5ωt) ... ]注意展开式里只有 1、3、5、7 这样的奇数次谐波没有任何偶数次项。原因可以非常简单地从对称性理解方波函数是一个典型的奇函数而所有偶数次正弦波在半个周期内的对称性决定了它们无法凑出一个中间平台来。换句话说偶数次谐波全部自相抵消了留下来的只有奇次项。这个式子也直接告诉我们两件事第一方波的高频成分很丰富但能量按 1/n 的规律衰减所以低次谐波贡献最大第二如果只取前 N 项得到的是一条带有明显“波动”的近似方波谐波项数越多中间平台越平坦跃变沿越陡峭。这一点在后面做动画时非常重要因为它决定了你该画多少个圆。1.2 圆与正弦波是同一件事的两种看法为什么旋转圆能和正弦波扯上关系核心在于欧拉公式e^(iθ) cos(θ) i·sin(θ)。如果你把一个复数 e^(iθ) 当作平面上的点那么随着角度 θ 从 0 增加到 2π这个点就在单位圆上匀速画圈它的实部是 cos(θ)虚部是 sin(θ)。换句话说一个匀速旋转的圆往 x 轴或 y 轴上一投影就是一个正弦波。旋转圆叠方波的动画本质上是把傅里叶级数展开式中的每一项正弦波都换成对应的一个旋转向量。每个向量有一个振幅对应系数、一个频率对应谐波次数、一个初始相位然后把这个向量首尾相接像舞龙一样连成一条链。最后一个向量的端点轨迹在数学上就是傅里叶级数的部分和如果你单独观察最后一个端点在某一个坐标轴上的投影得到的就是那条不断逼近方波的曲线。你可以这样理解每一个旋转圆就像一个“信号发生器”多个发生器同时输出末端叠加在一起就形成了复杂的波形。圆的半径越大说明对应的那一次谐波能量越强圆转得越快说明谐波频率越高。1.3 有限项近似与吉布斯现象用有限个圆去逼近方波一定会出现一个特别容易被误解的现象即使你把谐波次数加到 50、加到 100方波的“拐角”处总会出现一个固定比例的小尖峰过冲幅度大约是理想值跳变的 9% 左右而且不会随项数增加而消失。这就是吉布斯现象。我第一次看到这个尖峰时以为是代码里某个地方算错了反复检查系数、检查角度、检查叠加顺序折腾了很久。后来才反应过来这是傅里叶级数的固有特性一个在时域上无限陡峭的跃变用平滑的正弦波去逼近必然会在临界点附近“刹不住车”。所以做动画时看到方波边缘有一点过冲和振铃不用慌这说明你的傅里叶系数是正确的数学本身如此。理解了这个原理之后基本上所有实现细节都有了方向画 N 个圆每个圆半径按系数递减圆心是前一个向量的终点然后让函数生成的 y 坐标随时间往前铺就得到了方波逼近轨迹。2. 动手前的准备选哪个工具实现2.1 三条主流技术路线做这种数学可视化动画最常用的方案有三类我分别试过简要对比一下方案上手难度动画流畅度发布分享适合场景Python matplotlib低中等适合演示导出 GIF/视频方便教学演示、论文配图、快速原型JavaScript Canvas中高高浏览器原生流畅可做交互网页在线交互演示、博客嵌入Python manim较高视觉精致适合录屏成视频高质量科普视频数学动画如果你只是想快速复现动画、把原理讲清楚matplotlib 是最省事的。它不需要自己管理渲染循环不需要手动计算每一帧的投影动画模块 Integra FuncAnimation 已经帮你把帧循环和刷新机制封装好了。如果你追求的是可以嵌到网页里的交互版本Canvas 方案更好但代码量会明显上升坐标变换、帧循环、清屏逻辑都要自己处理。manim 视觉效果确实漂亮适合做 3Blue1Brown 那种科普大片但环境安装和渲染调试的时间成本也摆在那里不少人第一次跑 manim 光装依赖就能耗掉一个下午。2.2 我为什么选 matplotlib我最终选择的是 matplotlib原因很直接它在“快速看到结果”这件事上几乎没有对手。你只需要定义好每一帧里每个圆的位置、每个向量端点的位置、右侧轨迹线的新坐标写完一个 update 函数交给 FuncAnimation剩下的交给库去处理。而且 matplotlib 的动画代码有个天然优势逻辑是声明式的。你可以在 update 函数里只更新线条和 patch 的数据不需要像 Canvas 一样手动 clear 整个画布再重绘。这样代码结构更接近数学描述本身别人看你的代码时看到的不是“怎么画像素”而是“怎么更新圆心和端点”理解成本低很多。2.3 环境准备基础环境只需要 Python 3.8 及以上然后安装两个库pip install numpy matplotlib pillow这里有一个容易踩的小坑很多人只装 numpy 和 matplotlib结果保存 GIF 时发现 writer 不可用。因为 matplotlib 默认的 GIF 导出需要额外依赖而 Pillow 提供了一个纯 Python 的 writer装上之后就能一键导出。如果之后想导出 MP4 视频则还需要 ffmpeg那个属于可选配置后面我会专门说。3. 核心代码旋转圆 波形轨迹的实现3.1 先写傅里叶系数方波只需要奇次谐波第一步是生成要叠加的谐波参数列表。根据前面的展开式方波的系数为第 n 项的振幅是 4/(nπ)其中 n 取奇数。写成代码很简单N_HARMONICS 12 coeffs [] for n in range(1, N_HARMONICS 1): if n % 2 1: amp 4 / (n * np.pi) coeffs.append((n, amp))这里我同时保存了 n 和 amp因为后面画圆的时候n 决定旋转角速度amp 决定圆的半径。这里还有一个更优雅的复数写法直接定义第 n 个旋转向量的复振幅 C_n -4i/(nπ)然后用 C_n * e^(i·nθ) 累加实部和虚部分别对应过去的余弦级数和正弦级数。实际代码里我更推荐用最直白的方式做——就是上面这种存 n、amp 的结构数学上等价读起来也很直观。需要注意系数不要写成 1/n 而忘了乘以 4/π。少了这个系数方波的幅值会明显偏小看起来像一条弱弱的波浪线不知道的还以为是代码算错了。4/π 就是把正弦级数归一化到 ±1 方波的那个系数约等于 1.273。3.2 画旋转圆与向量关键在逐级叠加核心逻辑在每一帧中从原点出发依次把每个向量首尾相接。第 k 个圆的圆心是前 k-1 个向量的终点第 k 个圆的半径就是第 k 个谐波的振幅 amp_k而向量以 n·θ 的角度旋转。import numpy as np import matplotlib.pyplot as plt from matplotlib.animation import FuncAnimation from collections import deque N_HARMONICS 12 TAIL_LENGTH 300 theta 0.0 dtheta 0.04 coeffs [] for n in range(1, N_HARMONICS 1): if n % 2 1: coeffs.append((n, 4 / (n * np.pi))) fig, (ax_left, ax_right) plt.subplots(1, 2, figsize(14, 5)) ax_left.set_aspect(equal) ax_left.set_xlim(-1.5, 1.5) ax_left.set_ylim(-1.5, 1.5) ax_right.set_xlim(0, TAIL_LENGTH) ax_right.set_ylim(-1.5, 1.5) circles [] vectors [] for n, amp in coeffs: circ plt.Circle((0, 0), amp, fillFalse, lw0.8, alpha0.6, colorsteelblue) ax_left.add_patch(circ) circles.append(circ) vec, ax_left.plot([], [], lw1.2, colortomato) vectors.append(vec) head, ax_left.plot([], [], o, ms6, colortomato)这是一个很典型的向量链结构。注意我特意给左边子图设置了 set_aspect(equal)这一步不能省。如果不这么做坐标轴会自动伸缩圆形会变成椭圆动画的可信度立刻下降一半。右侧子图不需要 equal因为它的 x 轴是“历史记录长度”不是空间坐标。真正累加向量位置的代码在 update 函数里def update(frame): global theta points [] x, y 0.0, 0.0 for idx, ((n, amp), circ, vec) in enumerate(zip(coeffs, circles, vectors)): prev_x, prev_y x, y angle n * theta x amp * np.cos(angle) y amp * np.sin(angle) circ.center (prev_x, prev_y) vec.set_data([prev_x, x], [prev_y, y]) points.append((x, y)) head.set_data([x], [y])这里有一个很容易被忽视的细节每个圆的圆心不是固定的而是上一级向量的终点。也就是说圆并不是绕原点转而是绕“上级链尾”在转。如果你把圆心全部设成固定原点动画就会变成一堆同心圆同时乱转根本不是向量链效果。另一个细节是相位。我直接用了 cos 和 sin从原点出发这相当于把正弦级数的初始相位定为 0。如果想让动画起始时刻更“顺眼”可以加一个初始相位偏置比如让第一个向量从正上方出发。我建议保留这种最简单版本后续调整视觉风格时再加相位也不迟。3.3 右侧轨迹用队列记录历史波形的 y 值左侧画出来的是向量链右侧则要画一条不断向右延伸的轨迹线。这个轨迹线上的每个点代表某个时刻向量链末端 y 坐标的数值。最简单的实现方式是用一个固定长度的队列来保存最近一段时间的 y 值trace_y deque([0.0] * TAIL_LENGTH, maxlenTAIL_LENGTH) trace_x np.arange(TAIL_LENGTH) trace_line, ax_right.plot(trace_x, list(trace_y), lw1.5, colordarkblue) head_right, ax_right.plot([], [], o, ms6, colortomato)在 update 函数的末尾把当前的 y 值 push 进队列trace_y.append(y) trace_line.set_data(trace_x, list(trace_y)) head_right.set_data([trace_x[-1]], [y])用 deque 的好处是自动溢出当队列长度超过 maxlen 时最左边的旧点会自动被挤掉轨迹就像一块无限向前的“传送带”。这里要注意trace_line.set_data 每次传入的 y 序列必须和 trace_x 长度一致否则 matplotlib 会直接报错或者画出一条乱七八糟的线。我第一版代码就在这里栽过跟头直接把 deque 对象传给了 set_data结果界面直接变空。如果你想让右侧轨迹更有参考性还可以在 ax_right 上画一条方波目标的虚线作为背景用 ax_right.axhline(1, ls--, lw0.8, colorgray) 和 ax_right.axhline(-1, ls--, lw0.8, colorgray) 即可这样观众一眼就能看到当前轨迹正在逼近什么样的目标波形。3.4 驱动动画循环FuncAnimation 的配置最后一步是把 update 函数交给 matplotlib 的动画引擎ani FuncAnimation(fig, update, frames600, interval30, blitTrue) plt.show()FuncAnimation 的三个参数值得展开说frames 是总帧数600 帧配合后面的步长足够跑完几个周期的方波逼近过程interval 是每帧间隔毫秒数interval30 表示理想情况下每秒约 33 帧blit 表示是否只重绘变化的部分开启后帧率会明显提升但要求 update 函数必须返回所有发生变化的绘图对象。如果你的代码里 update 函数之前没有明确 return 对象blitTrue 时会警告甚至不上色。上面第 3.2 节的代码末尾写的是 head.set_data没有 return 完整列表所以我实际使用时会让 update 返回return circles vectors [head, trace_line, head_right]把圆心、向量、红点、轨迹线全部返回blit 才能准确知道哪些元素需要更新。如果嫌这个麻烦直接 blitFalse 也能跑只是性能略差后面第 5 章会专门聊卡顿优化。4. 效果打磨与导出把“能跑”变“好看”4.1 调三个参数动画立刻不一样动画跑通之后真正影响观感的参数只有三个谐波数量、旋转步长、轨迹长度。N_HARMONICS方波的“方”程度完全由它决定。建议从 5 开始试5 个圆时波形已经有明显的方波轮廓但顶部还有明显的正弦纹路加到 12 个圆后平台纹路明显减少边界开始陡峭加到 30 个圆几乎就是一个教科书级别的方波但旋转圆的半径已经小到看不清且渲染压力变大。做演示时我一般取 10-15 个兼顾效果和性能。dtheta每帧旋转角度。取值越小圆转得越慢动画越丝滑但同样的总帧数覆盖的时间周期就越短取值太大则显得“跳帧”。我先用 0.04后来调到 0.02视觉上舒服很多代价是帧数可能要加到 800 才能看到一个完整的周期。TAIL_LENGTH右侧轨迹显示的历史长度。300 比较合适能看出波形在大约 5 个周期内的逼近情况如果只想要最近两三个周期的波形可以降到 150设太短会看不出正弦振荡的全貌设太长右侧又显得“拖尾”严重。矩阵化总结一下参数推荐范围太小的影响太大的影响N_HARMONICS8-15像波纹不像方波卡顿、小圆看不清dtheta0.02-0.05动画慢需增加帧数跳帧、不流畅TAIL_LENGTH150-600看不出周期形态拖尾过长4.2 颜色、线宽与布局细节观感上的第二层优化来自颜色和线宽。圆的数量多如果每个圆都用高饱和粗线画面会非常乱。我习惯把圆设置成半透明细线颜色统一用灰色系或浅蓝把注意力留给最外层的向量和末端轨迹。向量用饱和度高的暖色与圆形成对比这样视觉上能清楚地区分“旋转机构”和“结果波形”。布局上左侧向量链区域和右侧轨迹区域最好用相同或相近的 y 轴范围让观众能够自然地对比“端点高度”和“轨迹位置”。左边子图因为要保证圆形不变形必须 equal右边不需要 equal但 y 轴范围要手动设置成和左边一致比如都是 -1.5 到 1.5。另外左边的坐标轴其实可以隐藏或者用 plt.axis(off) 关掉边框让画面聚焦在旋转圆上。我最后做出的版本里左边只保留圆圈和向量链右侧保留坐标网格整体观感干净很多。如果你想要暗色背景效果可以在图创建后设置fig.patch.set_facecolor(#0e1117) ax_left.set_facecolor(#0e1117) ax_right.set_facecolor(#0e1117)然后把圆改成暗蓝、向量改成亮橙看起来会非常有科技感特别适合录屏分享。4.3 导出 GIF/视频的保存配置动画调试满意后保存导出是刚需。GIF 保存直接用ani.save(square_wave.gif, writerpillow, fps60, dpi100)这里有两个关键点fps 和 interval 不要混淆。interval 控制播放速度fps 控制保存时每秒钟取多少帧画面。一般保持 fps60 可以保证动画在大多数浏览器里流畅播放但如果你的总帧数只有 300而帧间旋转步长又很小那 60fps 会很快播放完毕可能看不清过程。这时候应该把 fps 调成 30 或 20让每一帧停留时间长一点。dpi 直接决定清晰度也决定文件大小。dpi100 时导出的 GIF 在博客里放大看会有一点糊dpi150 清晰很多但文件体积可能从 5MB 涨到 15MB。我一般先在 dpi80 下面跑一遍预览效果确认无误后再用高 dpi 正式导出。如果不想重复跑两遍动画也可以把 ani 对象保存在本地方便导出但注意不能关掉 plt 窗口否则绘图对象被销毁后无法保存。如果要导出 MP4writer 需要换成 ffmpegpip install imageio-ffmpegani.save(square_wave.mp4, writerffmpeg, fps60, dpi150)不过我发现对于这种矢量线条动画GIF 通常就够用了MP4 更适合插入视频剪辑软件进行二次编辑。5. 踩坑记录与常见问题排查5.1 动画卡顿怎么办我自己刚开始做的版本一上来就选了 40 个谐波动画卡成幻灯片。卡顿的原因通常是三个谐波数量太多、dpi 设置太高、blit 未开启。谐波数量属于数学需求不能太省dpi 属于导出需求预览时没必要开高blit 则是纯性能开关。建议预览动画时用 blitTrue每一帧只更新向量和圆的中心点不要整个画布重绘。如果还是卡再看一下是不是每次 update 里重复创建了大量临时对象比如频繁调用 plt.Circle 或者 np.linspace。一个非常容易被忽略的卡顿源是 circle 的更新方式。plt.Circle 对象创建后更新圆心应该用 set_center而不是每次重新 new 一个 Circle 再加到坐标轴里。后者会造成绘图对象无限累积越跑越卡而且由于没有清理旧对象内存占用会持续上涨。这是 matplotlib 动画中典型的三天三夜查不完的 bug。5.2 画面闪烁、圆变形闪烁一般来自 blit 和返回对象列表不匹配。如果你的 update 函数里更新了多个 artist但 return 的时候漏掉了其中一个blit 会保留一帧的旧图形在下一次刷新时出现闪烁或残影。解决方式很简单宁可多返回几个对象也不要少返回。另一种情况是你在循环里给坐标轴重新设置 set_xlim每次强制整体刷新也会导致闪烁。正确的做法是在初始化阶段一次性设好坐标轴范围之后不要再动。圆变成椭圆的原因前面也提到过就是没有设置 set_aspect(equal)。还有一个特殊情况如果两个子图放在同一 figure 中并且右侧子图没有 equal有可能因为子图共享某些布局属性导致左侧的 equal 失效。解决方式是分别在两个子图对象上显式设置 ax_left.set_aspect(equal)不要只设置一次。5.3 保存 GIF 时文件缺失或空白保存 GIF 最常见的问题报错 writer[pillow] 不可用原因是没装 Pillow报错 writer[ffmpeg] 不可用原因是没装 ffmpeg。第二种我一般用 imageio-ffmpeg 兜底先 pip 安装再继续。但如果你对视频不感冒建议直接装 Pillow 走 GIF 路线少折腾。还有一类问题保存出来的 GIF 是空白或者只有第一帧。这种通常是因为在同一个脚本里先运行了 plt.show() 展示了动画窗口窗口关闭后再 ani.save()此时绘图对象已经失效。正确做法是先保存再显示或者把显示和保存分开在两个脚本里跑。我为了省事通常在一个脚本里先注释掉 plt.show()跑一次保存再打开脚本把 plt.show() 打开做交互预览。5.4 常见问题速查表现象可能原因解决办法动画非常卡顿谐波数太多、blit 未开启减少 N_HARMONICS开启 blitTrue圆形变成椭圆未设置 equalax_left.set_aspect(equal)画面闪烁残影update 没有返回全部 artist在 return 中加入所有变量保存 GIF 报 writer 错误缺少 Pillow 或 ffmpegpip install pillow 或使用 GIF writer导出后是空白动画保存前窗口已关闭先保存再显示不要共用一个绘图对象右侧轨迹断线变形deque 长度与 trace_x 不一致每次 set_data 前转换 list 并确保长度一致如果你是用 Jupyter Notebook 跑这个动画还有一个小坑直接执行 FuncAnimation 并展示时可能会看到动画一次性输出所有帧整个 notebook 卡死。正确的做法是使用%matplotlib notebook或者%matplotlib inline加plt.show()。如果是新版 JupyterLab用%matplotlib widget效果更好。Viewer 环境不同表现形式会有差异这一点别照着网上老教程死搬。最后分享一个越到后面越有用的小技巧不要把动画逻辑写死成方波。只需要改 coefficients 的生成方式比如把频率 n 映射为 n²或者把系数换成锯齿波的傅里叶展开式就能做出完全不同的波形逼近动画。这也是很多教程没有提及的扩展方向。我后来就是在这个基础上把方波改成三角波、锯齿波顺便把圆的个数做成可调参数一遍跑下来对傅里叶级数的理解远比只看公式深刻得多。
我第一次看到“旋转圆叠方波”这个动画是在某个数学科普视频里屏幕左边几个大小不一的圆像齿轮一样转着末端拖出一条不断伸长的曲线最后竟然拼出一个方波。当时我的第一反应是“这怕不是后期特效”后来才明白这其实是傅里叶级数在复平面上的直观可视化而它的实现一点也不神秘——用 Python 的 matplotlib 或 Web 的 Canvas 都能做出来。这篇文章就把原理、选型、完整代码和踩坑记录一次讲清楚适合想把这个经典动画做成教学演示、课程作业或者博客配图的人。作为用傅里叶级数做可视化的人我最想告诉你的是这个动画的关键不在“旋转圆”本身而在于“圆”和“正弦波”其实是同一个东西的两种形态。把这条逻辑理清了代码几乎就是顺着手抄一遍的事。1. 拆开原理为什么几个旋转圆能画出方波1.1 方波的底牌一串奇次正弦波先回到傅里叶级数本身。任何一个周期信号都能分解成一系列频率为原始频率整数倍的正弦波和余弦波之和。方波当然也不例外。对于一个幅值从 -1 到 1、占空比 50% 的方波它的傅里叶展开式长这样f(t) (4/π) * [ sin(ωt) (1/3)sin(3ωt) (1/5)sin(5ωt) ... ]注意展开式里只有 1、3、5、7 这样的奇数次谐波没有任何偶数次项。原因可以非常简单地从对称性理解方波函数是一个典型的奇函数而所有偶数次正弦波在半个周期内的对称性决定了它们无法凑出一个中间平台来。换句话说偶数次谐波全部自相抵消了留下来的只有奇次项。这个式子也直接告诉我们两件事第一方波的高频成分很丰富但能量按 1/n 的规律衰减所以低次谐波贡献最大第二如果只取前 N 项得到的是一条带有明显“波动”的近似方波谐波项数越多中间平台越平坦跃变沿越陡峭。这一点在后面做动画时非常重要因为它决定了你该画多少个圆。1.2 圆与正弦波是同一件事的两种看法为什么旋转圆能和正弦波扯上关系核心在于欧拉公式e^(iθ) cos(θ) i·sin(θ)。如果你把一个复数 e^(iθ) 当作平面上的点那么随着角度 θ 从 0 增加到 2π这个点就在单位圆上匀速画圈它的实部是 cos(θ)虚部是 sin(θ)。换句话说一个匀速旋转的圆往 x 轴或 y 轴上一投影就是一个正弦波。旋转圆叠方波的动画本质上是把傅里叶级数展开式中的每一项正弦波都换成对应的一个旋转向量。每个向量有一个振幅对应系数、一个频率对应谐波次数、一个初始相位然后把这个向量首尾相接像舞龙一样连成一条链。最后一个向量的端点轨迹在数学上就是傅里叶级数的部分和如果你单独观察最后一个端点在某一个坐标轴上的投影得到的就是那条不断逼近方波的曲线。你可以这样理解每一个旋转圆就像一个“信号发生器”多个发生器同时输出末端叠加在一起就形成了复杂的波形。圆的半径越大说明对应的那一次谐波能量越强圆转得越快说明谐波频率越高。1.3 有限项近似与吉布斯现象用有限个圆去逼近方波一定会出现一个特别容易被误解的现象即使你把谐波次数加到 50、加到 100方波的“拐角”处总会出现一个固定比例的小尖峰过冲幅度大约是理想值跳变的 9% 左右而且不会随项数增加而消失。这就是吉布斯现象。我第一次看到这个尖峰时以为是代码里某个地方算错了反复检查系数、检查角度、检查叠加顺序折腾了很久。后来才反应过来这是傅里叶级数的固有特性一个在时域上无限陡峭的跃变用平滑的正弦波去逼近必然会在临界点附近“刹不住车”。所以做动画时看到方波边缘有一点过冲和振铃不用慌这说明你的傅里叶系数是正确的数学本身如此。理解了这个原理之后基本上所有实现细节都有了方向画 N 个圆每个圆半径按系数递减圆心是前一个向量的终点然后让函数生成的 y 坐标随时间往前铺就得到了方波逼近轨迹。2. 动手前的准备选哪个工具实现2.1 三条主流技术路线做这种数学可视化动画最常用的方案有三类我分别试过简要对比一下方案上手难度动画流畅度发布分享适合场景Python matplotlib低中等适合演示导出 GIF/视频方便教学演示、论文配图、快速原型JavaScript Canvas中高高浏览器原生流畅可做交互网页在线交互演示、博客嵌入Python manim较高视觉精致适合录屏成视频高质量科普视频数学动画如果你只是想快速复现动画、把原理讲清楚matplotlib 是最省事的。它不需要自己管理渲染循环不需要手动计算每一帧的投影动画模块 Integra FuncAnimation 已经帮你把帧循环和刷新机制封装好了。如果你追求的是可以嵌到网页里的交互版本Canvas 方案更好但代码量会明显上升坐标变换、帧循环、清屏逻辑都要自己处理。manim 视觉效果确实漂亮适合做 3Blue1Brown 那种科普大片但环境安装和渲染调试的时间成本也摆在那里不少人第一次跑 manim 光装依赖就能耗掉一个下午。2.2 我为什么选 matplotlib我最终选择的是 matplotlib原因很直接它在“快速看到结果”这件事上几乎没有对手。你只需要定义好每一帧里每个圆的位置、每个向量端点的位置、右侧轨迹线的新坐标写完一个 update 函数交给 FuncAnimation剩下的交给库去处理。而且 matplotlib 的动画代码有个天然优势逻辑是声明式的。你可以在 update 函数里只更新线条和 patch 的数据不需要像 Canvas 一样手动 clear 整个画布再重绘。这样代码结构更接近数学描述本身别人看你的代码时看到的不是“怎么画像素”而是“怎么更新圆心和端点”理解成本低很多。2.3 环境准备基础环境只需要 Python 3.8 及以上然后安装两个库pip install numpy matplotlib pillow这里有一个容易踩的小坑很多人只装 numpy 和 matplotlib结果保存 GIF 时发现 writer 不可用。因为 matplotlib 默认的 GIF 导出需要额外依赖而 Pillow 提供了一个纯 Python 的 writer装上之后就能一键导出。如果之后想导出 MP4 视频则还需要 ffmpeg那个属于可选配置后面我会专门说。3. 核心代码旋转圆 波形轨迹的实现3.1 先写傅里叶系数方波只需要奇次谐波第一步是生成要叠加的谐波参数列表。根据前面的展开式方波的系数为第 n 项的振幅是 4/(nπ)其中 n 取奇数。写成代码很简单N_HARMONICS 12 coeffs [] for n in range(1, N_HARMONICS 1): if n % 2 1: amp 4 / (n * np.pi) coeffs.append((n, amp))这里我同时保存了 n 和 amp因为后面画圆的时候n 决定旋转角速度amp 决定圆的半径。这里还有一个更优雅的复数写法直接定义第 n 个旋转向量的复振幅 C_n -4i/(nπ)然后用 C_n * e^(i·nθ) 累加实部和虚部分别对应过去的余弦级数和正弦级数。实际代码里我更推荐用最直白的方式做——就是上面这种存 n、amp 的结构数学上等价读起来也很直观。需要注意系数不要写成 1/n 而忘了乘以 4/π。少了这个系数方波的幅值会明显偏小看起来像一条弱弱的波浪线不知道的还以为是代码算错了。4/π 就是把正弦级数归一化到 ±1 方波的那个系数约等于 1.273。3.2 画旋转圆与向量关键在逐级叠加核心逻辑在每一帧中从原点出发依次把每个向量首尾相接。第 k 个圆的圆心是前 k-1 个向量的终点第 k 个圆的半径就是第 k 个谐波的振幅 amp_k而向量以 n·θ 的角度旋转。import numpy as np import matplotlib.pyplot as plt from matplotlib.animation import FuncAnimation from collections import deque N_HARMONICS 12 TAIL_LENGTH 300 theta 0.0 dtheta 0.04 coeffs [] for n in range(1, N_HARMONICS 1): if n % 2 1: coeffs.append((n, 4 / (n * np.pi))) fig, (ax_left, ax_right) plt.subplots(1, 2, figsize(14, 5)) ax_left.set_aspect(equal) ax_left.set_xlim(-1.5, 1.5) ax_left.set_ylim(-1.5, 1.5) ax_right.set_xlim(0, TAIL_LENGTH) ax_right.set_ylim(-1.5, 1.5) circles [] vectors [] for n, amp in coeffs: circ plt.Circle((0, 0), amp, fillFalse, lw0.8, alpha0.6, colorsteelblue) ax_left.add_patch(circ) circles.append(circ) vec, ax_left.plot([], [], lw1.2, colortomato) vectors.append(vec) head, ax_left.plot([], [], o, ms6, colortomato)这是一个很典型的向量链结构。注意我特意给左边子图设置了 set_aspect(equal)这一步不能省。如果不这么做坐标轴会自动伸缩圆形会变成椭圆动画的可信度立刻下降一半。右侧子图不需要 equal因为它的 x 轴是“历史记录长度”不是空间坐标。真正累加向量位置的代码在 update 函数里def update(frame): global theta points [] x, y 0.0, 0.0 for idx, ((n, amp), circ, vec) in enumerate(zip(coeffs, circles, vectors)): prev_x, prev_y x, y angle n * theta x amp * np.cos(angle) y amp * np.sin(angle) circ.center (prev_x, prev_y) vec.set_data([prev_x, x], [prev_y, y]) points.append((x, y)) head.set_data([x], [y])这里有一个很容易被忽视的细节每个圆的圆心不是固定的而是上一级向量的终点。也就是说圆并不是绕原点转而是绕“上级链尾”在转。如果你把圆心全部设成固定原点动画就会变成一堆同心圆同时乱转根本不是向量链效果。另一个细节是相位。我直接用了 cos 和 sin从原点出发这相当于把正弦级数的初始相位定为 0。如果想让动画起始时刻更“顺眼”可以加一个初始相位偏置比如让第一个向量从正上方出发。我建议保留这种最简单版本后续调整视觉风格时再加相位也不迟。3.3 右侧轨迹用队列记录历史波形的 y 值左侧画出来的是向量链右侧则要画一条不断向右延伸的轨迹线。这个轨迹线上的每个点代表某个时刻向量链末端 y 坐标的数值。最简单的实现方式是用一个固定长度的队列来保存最近一段时间的 y 值trace_y deque([0.0] * TAIL_LENGTH, maxlenTAIL_LENGTH) trace_x np.arange(TAIL_LENGTH) trace_line, ax_right.plot(trace_x, list(trace_y), lw1.5, colordarkblue) head_right, ax_right.plot([], [], o, ms6, colortomato)在 update 函数的末尾把当前的 y 值 push 进队列trace_y.append(y) trace_line.set_data(trace_x, list(trace_y)) head_right.set_data([trace_x[-1]], [y])用 deque 的好处是自动溢出当队列长度超过 maxlen 时最左边的旧点会自动被挤掉轨迹就像一块无限向前的“传送带”。这里要注意trace_line.set_data 每次传入的 y 序列必须和 trace_x 长度一致否则 matplotlib 会直接报错或者画出一条乱七八糟的线。我第一版代码就在这里栽过跟头直接把 deque 对象传给了 set_data结果界面直接变空。如果你想让右侧轨迹更有参考性还可以在 ax_right 上画一条方波目标的虚线作为背景用 ax_right.axhline(1, ls--, lw0.8, colorgray) 和 ax_right.axhline(-1, ls--, lw0.8, colorgray) 即可这样观众一眼就能看到当前轨迹正在逼近什么样的目标波形。3.4 驱动动画循环FuncAnimation 的配置最后一步是把 update 函数交给 matplotlib 的动画引擎ani FuncAnimation(fig, update, frames600, interval30, blitTrue) plt.show()FuncAnimation 的三个参数值得展开说frames 是总帧数600 帧配合后面的步长足够跑完几个周期的方波逼近过程interval 是每帧间隔毫秒数interval30 表示理想情况下每秒约 33 帧blit 表示是否只重绘变化的部分开启后帧率会明显提升但要求 update 函数必须返回所有发生变化的绘图对象。如果你的代码里 update 函数之前没有明确 return 对象blitTrue 时会警告甚至不上色。上面第 3.2 节的代码末尾写的是 head.set_data没有 return 完整列表所以我实际使用时会让 update 返回return circles vectors [head, trace_line, head_right]把圆心、向量、红点、轨迹线全部返回blit 才能准确知道哪些元素需要更新。如果嫌这个麻烦直接 blitFalse 也能跑只是性能略差后面第 5 章会专门聊卡顿优化。4. 效果打磨与导出把“能跑”变“好看”4.1 调三个参数动画立刻不一样动画跑通之后真正影响观感的参数只有三个谐波数量、旋转步长、轨迹长度。N_HARMONICS方波的“方”程度完全由它决定。建议从 5 开始试5 个圆时波形已经有明显的方波轮廓但顶部还有明显的正弦纹路加到 12 个圆后平台纹路明显减少边界开始陡峭加到 30 个圆几乎就是一个教科书级别的方波但旋转圆的半径已经小到看不清且渲染压力变大。做演示时我一般取 10-15 个兼顾效果和性能。dtheta每帧旋转角度。取值越小圆转得越慢动画越丝滑但同样的总帧数覆盖的时间周期就越短取值太大则显得“跳帧”。我先用 0.04后来调到 0.02视觉上舒服很多代价是帧数可能要加到 800 才能看到一个完整的周期。TAIL_LENGTH右侧轨迹显示的历史长度。300 比较合适能看出波形在大约 5 个周期内的逼近情况如果只想要最近两三个周期的波形可以降到 150设太短会看不出正弦振荡的全貌设太长右侧又显得“拖尾”严重。矩阵化总结一下参数推荐范围太小的影响太大的影响N_HARMONICS8-15像波纹不像方波卡顿、小圆看不清dtheta0.02-0.05动画慢需增加帧数跳帧、不流畅TAIL_LENGTH150-600看不出周期形态拖尾过长4.2 颜色、线宽与布局细节观感上的第二层优化来自颜色和线宽。圆的数量多如果每个圆都用高饱和粗线画面会非常乱。我习惯把圆设置成半透明细线颜色统一用灰色系或浅蓝把注意力留给最外层的向量和末端轨迹。向量用饱和度高的暖色与圆形成对比这样视觉上能清楚地区分“旋转机构”和“结果波形”。布局上左侧向量链区域和右侧轨迹区域最好用相同或相近的 y 轴范围让观众能够自然地对比“端点高度”和“轨迹位置”。左边子图因为要保证圆形不变形必须 equal右边不需要 equal但 y 轴范围要手动设置成和左边一致比如都是 -1.5 到 1.5。另外左边的坐标轴其实可以隐藏或者用 plt.axis(off) 关掉边框让画面聚焦在旋转圆上。我最后做出的版本里左边只保留圆圈和向量链右侧保留坐标网格整体观感干净很多。如果你想要暗色背景效果可以在图创建后设置fig.patch.set_facecolor(#0e1117) ax_left.set_facecolor(#0e1117) ax_right.set_facecolor(#0e1117)然后把圆改成暗蓝、向量改成亮橙看起来会非常有科技感特别适合录屏分享。4.3 导出 GIF/视频的保存配置动画调试满意后保存导出是刚需。GIF 保存直接用ani.save(square_wave.gif, writerpillow, fps60, dpi100)这里有两个关键点fps 和 interval 不要混淆。interval 控制播放速度fps 控制保存时每秒钟取多少帧画面。一般保持 fps60 可以保证动画在大多数浏览器里流畅播放但如果你的总帧数只有 300而帧间旋转步长又很小那 60fps 会很快播放完毕可能看不清过程。这时候应该把 fps 调成 30 或 20让每一帧停留时间长一点。dpi 直接决定清晰度也决定文件大小。dpi100 时导出的 GIF 在博客里放大看会有一点糊dpi150 清晰很多但文件体积可能从 5MB 涨到 15MB。我一般先在 dpi80 下面跑一遍预览效果确认无误后再用高 dpi 正式导出。如果不想重复跑两遍动画也可以把 ani 对象保存在本地方便导出但注意不能关掉 plt 窗口否则绘图对象被销毁后无法保存。如果要导出 MP4writer 需要换成 ffmpegpip install imageio-ffmpegani.save(square_wave.mp4, writerffmpeg, fps60, dpi150)不过我发现对于这种矢量线条动画GIF 通常就够用了MP4 更适合插入视频剪辑软件进行二次编辑。5. 踩坑记录与常见问题排查5.1 动画卡顿怎么办我自己刚开始做的版本一上来就选了 40 个谐波动画卡成幻灯片。卡顿的原因通常是三个谐波数量太多、dpi 设置太高、blit 未开启。谐波数量属于数学需求不能太省dpi 属于导出需求预览时没必要开高blit 则是纯性能开关。建议预览动画时用 blitTrue每一帧只更新向量和圆的中心点不要整个画布重绘。如果还是卡再看一下是不是每次 update 里重复创建了大量临时对象比如频繁调用 plt.Circle 或者 np.linspace。一个非常容易被忽略的卡顿源是 circle 的更新方式。plt.Circle 对象创建后更新圆心应该用 set_center而不是每次重新 new 一个 Circle 再加到坐标轴里。后者会造成绘图对象无限累积越跑越卡而且由于没有清理旧对象内存占用会持续上涨。这是 matplotlib 动画中典型的三天三夜查不完的 bug。5.2 画面闪烁、圆变形闪烁一般来自 blit 和返回对象列表不匹配。如果你的 update 函数里更新了多个 artist但 return 的时候漏掉了其中一个blit 会保留一帧的旧图形在下一次刷新时出现闪烁或残影。解决方式很简单宁可多返回几个对象也不要少返回。另一种情况是你在循环里给坐标轴重新设置 set_xlim每次强制整体刷新也会导致闪烁。正确的做法是在初始化阶段一次性设好坐标轴范围之后不要再动。圆变成椭圆的原因前面也提到过就是没有设置 set_aspect(equal)。还有一个特殊情况如果两个子图放在同一 figure 中并且右侧子图没有 equal有可能因为子图共享某些布局属性导致左侧的 equal 失效。解决方式是分别在两个子图对象上显式设置 ax_left.set_aspect(equal)不要只设置一次。5.3 保存 GIF 时文件缺失或空白保存 GIF 最常见的问题报错 writer[pillow] 不可用原因是没装 Pillow报错 writer[ffmpeg] 不可用原因是没装 ffmpeg。第二种我一般用 imageio-ffmpeg 兜底先 pip 安装再继续。但如果你对视频不感冒建议直接装 Pillow 走 GIF 路线少折腾。还有一类问题保存出来的 GIF 是空白或者只有第一帧。这种通常是因为在同一个脚本里先运行了 plt.show() 展示了动画窗口窗口关闭后再 ani.save()此时绘图对象已经失效。正确做法是先保存再显示或者把显示和保存分开在两个脚本里跑。我为了省事通常在一个脚本里先注释掉 plt.show()跑一次保存再打开脚本把 plt.show() 打开做交互预览。5.4 常见问题速查表现象可能原因解决办法动画非常卡顿谐波数太多、blit 未开启减少 N_HARMONICS开启 blitTrue圆形变成椭圆未设置 equalax_left.set_aspect(equal)画面闪烁残影update 没有返回全部 artist在 return 中加入所有变量保存 GIF 报 writer 错误缺少 Pillow 或 ffmpegpip install pillow 或使用 GIF writer导出后是空白动画保存前窗口已关闭先保存再显示不要共用一个绘图对象右侧轨迹断线变形deque 长度与 trace_x 不一致每次 set_data 前转换 list 并确保长度一致如果你是用 Jupyter Notebook 跑这个动画还有一个小坑直接执行 FuncAnimation 并展示时可能会看到动画一次性输出所有帧整个 notebook 卡死。正确的做法是使用%matplotlib notebook或者%matplotlib inline加plt.show()。如果是新版 JupyterLab用%matplotlib widget效果更好。Viewer 环境不同表现形式会有差异这一点别照着网上老教程死搬。最后分享一个越到后面越有用的小技巧不要把动画逻辑写死成方波。只需要改 coefficients 的生成方式比如把频率 n 映射为 n²或者把系数换成锯齿波的傅里叶展开式就能做出完全不同的波形逼近动画。这也是很多教程没有提及的扩展方向。我后来就是在这个基础上把方波改成三角波、锯齿波顺便把圆的个数做成可调参数一遍跑下来对傅里叶级数的理解远比只看公式深刻得多。
核心思想与竞赛应用解析)
