1. 从“李峋同款”说起爱心代码飘散效果到底是个什么东西如果你最近刷到过《点燃我温暖你》里李峋那段在屏幕上敲出爱心代码的片段大概会注意到一个细节——他敲出来的爱心不是静止的而是带着一种粒子飘散、缓缓上升的动效配合背景的深色终端界面视觉冲击力相当强。很多人第一次看到就想着自己动手复现一个于是“爱心代码飘散效果”这个关键词就慢慢热了起来。我最早接触这类效果是在做终端可视化的小工具时当时想给一个命令行程序加一点“仪式感”试过几种方案后发现爱心代码飘散效果本质上是一个字符粒子系统用字符比如*、♥、.、作为基本粒子给每个粒子赋予位置、速度、生命周期再通过逐帧刷新把它们画在终端或画布上。听起来简单但要做到“比李峋那个还好看”就得在粒子分布、运动轨迹、颜色渐变、刷新节奏这几个维度上花心思。这篇文章面向的读者很明确会一点编程基础Python、C 或 HTML/JS 任意一种都行想做出一个能直接跑起来、能发给朋友看、能贴到社交平台的爱心飘散效果。我会把三种主流实现路径——Python 终端版、C 语言控制台版、HTML 网页版——都拆开讲清楚包括参数怎么算、粒子怎么生成、飘散轨迹怎么设计以及我在实际调试中踩过的坑。你不需要有图形学基础跟着做就能复现。先给一个整体判断如果你只是想快速看到效果、方便复制粘贴分享HTML 版最省事如果你想在终端里跑、追求那种“黑客感”Python 版最合适如果你在学 C 语言、想练手控制台绘图C 语言版最有教学价值。三条路线我都会给出可直接运行的代码和逐段解释。2. 核心思路拆解飘散效果背后的粒子系统逻辑2.1 为什么是“粒子”而不是“画一个爱心”很多人第一反应是爱心不就是个形状吗画出来不就行了确实静态爱心用数学公式就能画——经典的心形线参数方程x 16sin³ty 13cos t - 5cos2t - 2cos3t - cos4t在坐标系里描点连线就是一个标准爱心。但“飘散效果”的关键在于动而且是大量小元素各自独立地动这就不是一条曲线能解决的了。粒子系统的思路是把爱心看作一个“发射源”在爱心轮廓或内部随机撒下几百个粒子每个粒子有自己的初始位置、速度向量、生命值。每一帧里粒子位置按速度更新生命值递减生命值归零就让它消失或重置。这样自然就形成了“从爱心上飘散出去、逐渐消散”的观感。这个思路和游戏里的火焰、烟雾、爆炸特效是同一套逻辑只是把贴图换成了字符。我试过直接对爱心曲线做缩放动画效果很生硬像在拉伸一张图换成粒子之后因为每个粒子的运动带一点随机性整体就有了“呼吸感”。这也是为什么标题里强调“飘散”而不是“跳动”——跳动是整体位移飘散是粒子级的离散运动。2.2 三种实现路径的选型对比在动手之前先想清楚你要在哪个环境里跑。我把三条路线的关键差异列成表方便你对号入座。维度Python 终端版C 语言控制台版HTML 网页版运行环境任意带 Python 的终端任意 C 编译器任意现代浏览器视觉效果字符粒子颜色可选字符粒子颜色受限可做渐变、发光、3D上手难度低中低分享便利度需对方装 Python需对方编译发个文件就能看性能上限中高高适合场景终端仪式感、练手学 C、理解底层社交分享、展示选型逻辑很简单看你的最终用途。要发给不懂编程的朋友看HTML 是唯一选择双击就能打开要在自己终端里跑着玩、顺便练 Python那就 Python如果是课程作业或者想搞懂字符刷新的底层原理C 语言版能让你把printf和sleep用到极致。提示三条路线的核心算法是相通的都是“粒子生成—位置更新—渲染—清理”四步循环。建议先吃透一套再迁移到其他语言会快很多。2.3 飘散轨迹的数学设计为什么有的效果“飘”得好看飘散效果好不好看八成取决于轨迹设计。我一开始用的是最简单的“向上匀速 左右随机抖动”结果看起来像一群虫子在爬很乱。后来调整成带阻尼的上升 正弦横向摆动 生命周期衰减观感立刻不一样了。具体来说每个粒子的速度向量可以这样设计垂直方向初始速度vy为负值向上每帧加上一个小的重力加速度g让上升逐渐减速模拟“飘上去又慢慢落下”的感觉水平方向用一个正弦函数sin(phase t * freq)控制左右摆动phase是每个粒子的随机初相freq是摆动频率这样粒子之间不会同步看起来更自然透明度/字符变化粒子生命值从 1 衰减到 0映射到字符上就是从♥变成*再变成.最后消失或者用颜色从亮到暗过渡。这套参数不是拍脑袋定的。以垂直方向为例如果初始速度太大粒子一瞬间就飞出屏幕太小又飘不起来。我的经验值是终端高度约 30 行时初始vy取-0.3到-0.6行/帧重力g取0.02到0.05这样粒子大约在 15 到 25 帧内完成一次完整的上升下落节奏刚好。3. Python 终端版从零写出可复制的爱心飘散代码3.1 环境准备与依赖选择Python 版我推荐用标准库加一个轻量颜色库的组合。核心依赖只有两个random生成随机粒子参数标准库自带time控制帧率标准库自带colorama可选让终端支持彩色输出Windows 下尤其需要。安装 colorama 就一行pip install colorama如果你不想装任何第三方库纯用标准库也能做只是颜色只能用终端默认色视觉上会朴素一些。我个人的建议是装上 colorama因为它跨平台处理 ANSI 转义序列很省心Windows 的 cmd 和 PowerShell 都能正常显示颜色。关于终端尺寸代码里需要动态获取用shutil.get_terminal_size()就行这样不管你在多大的窗口里跑爱心都能自适应。这一点很重要我见过不少示例代码把宽高写死成 80x24换个窗口就错位了。3.2 粒子类的设计与关键参数我用一个简单的类来管理粒子字段不多但每个都有用import random import math class Particle: def __init__(self, x, y): self.x x self.y y self.vx random.uniform(-0.3, 0.3) self.vy random.uniform(-0.6, -0.3) self.phase random.uniform(0, 2 * math.pi) self.freq random.uniform(0.1, 0.3) self.life 1.0 self.decay random.uniform(0.01, 0.03)逐个解释这些参数为什么这么取vx取-0.3到0.3水平初始速度给一个小范围随机让粒子一出生就有轻微散开但不会横向飞太远vy取-0.6到-0.3负值代表向上范围控制上升快慢的差异避免所有粒子同步上升phase和freq正弦摆动的初相和频率phase全范围随机保证不同步freq取小值让摆动缓慢优雅life和decay生命值从 1 开始每帧减去decaydecay随机让粒子消失时间错开形成层次感。这里有个细节decay如果统一取固定值所有粒子会在同一帧集体消失看起来像“闪断”。加上随机后粒子是逐渐稀疏的观感柔和很多。这是我调试了三四版才定下来的。3.3 爱心轮廓的生成与粒子撒点爱心轮廓用参数方程生成然后沿着轮廓撒粒子。参数方程前面提过这里给出 Python 实现def heart_points(n, scale, cx, cy): points [] for i in range(n): t 2 * math.pi * i / n x 16 * math.sin(t) ** 3 y 13 * math.cos(t) - 5 * math.cos(2*t) - 2 * math.cos(3*t) - math.cos(4*t) points.append((cx x * scale, cy - y * scale)) return pointsscale是缩放系数终端字符是“高瘦”的一个字符宽约是高的两倍所以横向缩放要比纵向小一些通常scale_x取scale_y的一半左右爱心才不会被拉扁。cx、cy是爱心中心在终端里的坐标一般取屏幕宽高的一半。撒点的时候我建议轮廓上密一点、内部稀一点。纯轮廓撒点看起来像个空心圈内部加一些随机点才有“实心爱心在飘散”的感觉。我的做法是70% 的粒子撒在轮廓附近加一点随机偏移30% 撒在爱心内部随机位置。3.4 逐帧渲染与刷新技巧渲染部分是最容易出问题的地方。终端里做动画核心是光标归位 重绘而不是清屏。清屏os.system(cls)或clear会闪得厉害正确做法是用 ANSI 转义序列把光标移到左上角import sys def move_cursor_home(): sys.stdout.write(\033[H) sys.stdout.flush()每一帧的流程是先把光标移到左上角然后用一个二维字符缓冲区记录这一帧所有粒子的位置最后一次性打印整个缓冲区。为什么要用缓冲区因为如果每个粒子单独print光标会乱跳而且性能差。用一个list of list存字符最后\n.join拼起来输出效率高且不闪。帧率控制用time.sleep(0.03)左右大约 30 帧每秒。太快了终端刷新跟不上会撕裂太慢了动画卡顿。这个值我在不同终端上试过0.03 是比较稳的。注意Windows 的旧版 cmd 对 ANSI 转义支持不完整如果发现光标没归位先执行colorama.init()或者用 Windows Terminal 跑。3.5 完整可运行代码与逐段说明把上面的部分拼起来就是一份可以直接复制运行的代码。我把它整理成完整版关键行都加了注释import random import math import time import sys import shutil try: from colorama import init, Fore init() COLORS [Fore.RED, Fore.LIGHTRED_EX, Fore.MAGENTA, Fore.LIGHTMAGENTA_EX] except ImportError: COLORS [] class Particle: def __init__(self, x, y): self.x x self.y y self.vx random.uniform(-0.3, 0.3) self.vy random.uniform(-0.6, -0.3) self.phase random.uniform(0, 2 * math.pi) self.freq random.uniform(0.1, 0.3) self.life 1.0 self.decay random.uniform(0.01, 0.03) self.color random.choice(COLORS) def update(self): self.vy 0.02 self.x self.vx math.sin(self.phase self.life * 10) * 0.1 self.y self.vy self.life - self.decay def heart_points(n, scale, cx, cy): points [] for i in range(n): t 2 * math.pi * i / n x 16 * math.sin(t) ** 3 y 13 * math.cos(t) - 5 * math.cos(2*t) - 2 * math.cos(3*t) - math.cos(4*t) points.append((cx x * scale, cy - y * scale * 0.5)) return points def main(): size shutil.get_terminal_size() W, H size.columns, size.lines cx, cy W // 2, H // 2 scale min(W / 40, H / 20) particles [] for (px, py) in heart_points(120, scale, cx, cy): for _ in range(2): particles.append(Particle(px random.uniform(-1, 1), py random.uniform(-1, 1))) for _ in range(80): t random.uniform(0, 2 * math.pi) x 16 * math.sin(t) ** 3 * random.uniform(0, 1) y (13 * math.cos(t) - 5 * math.cos(2*t) - 2 * math.cos(3*t) - math.cos(4*t)) * random.uniform(0, 1) particles.append(Particle(cx x * scale, cy - y * scale * 0.5)) sys.stdout.write(\033[2J) while True: buf [[ for _ in range(W)] for _ in range(H)] for p in particles: ix, iy int(p.x), int(p.y) if 0 ix W and 0 iy H and p.life 0: ch ♥ if p.life 0.7 else (* if p.life 0.4 else .) buf[iy][ix] ch sys.stdout.write(\033[H) for row in buf: sys.stdout.write(.join(row) \n) sys.stdout.flush() for p in particles: p.update() particles [p for p in particles if p.life 0] while len(particles) 300: t random.uniform(0, 2 * math.pi) x 16 * math.sin(t) ** 3 * random.uniform(0, 1) y (13 * math.cos(t) - 5 * math.cos(2*t) - 2 * math.cos(3*t) - math.cos(4*t)) * random.uniform(0, 1) particles.append(Particle(cx x * scale, cy - y * scale * 0.5)) time.sleep(0.03) if __name__ __main__: main()这段代码里有两个设计点值得单独说。第一粒子消失后不是简单丢弃而是补充新粒子这样爱心会持续“发射”形成源源不断的飘散感而不是飘完就没了。第二字符随生命值变化♥→*→.模拟淡出比直接消失自然得多。4. C 语言控制台版理解字符动画的底层逻辑4.1 为什么用 C 语言再写一遍有人会问Python 版都跑通了为什么还要折腾 C我的理由是C 语言版能让你真正理解“帧”是什么。Python 里time.sleep和列表操作把很多细节藏起来了而 C 里你得自己管数组、自己算坐标、自己控制输出缓冲做完一遍你对字符动画的理解会上一个台阶。而且 C 版性能好粒子数可以开到上千效果更密。C 版的核心难点在于没有现成的动态数组得用固定大小的数组没有shutil获取终端尺寸得用ioctl或者干脆写死一个合理值颜色输出要用 ANSI 转义码手动拼。这些听起来麻烦但都是很实在的底层技能。4.2 粒子数组与坐标映射C 里我用一个结构体数组存粒子大小开到 2000 足够#include stdio.h #include math.h #include stdlib.h #include unistd.h #include time.h #define WIDTH 80 #define HEIGHT 30 #define MAX_PARTICLES 2000 typedef struct { double x, y; double vx, vy; double phase; double life; double decay; } Particle; Particle particles[MAX_PARTICLES]; int particle_count 0;坐标映射要注意终端字符格子的宽高比不是 1:1所以爱心参数方程算出来的y要乘一个系数我取 0.5再映射到行号否则爱心会被拉长。这个系数和 Python 版里的scale * 0.5是一个道理。4.3 帧缓冲与光标控制C 里做无闪烁刷新同样要用帧缓冲。我开一个char buffer[HEIGHT][WIDTH1]每帧先全部填空格再把粒子画进去最后一次性printf出来。光标归位用\033[H和 Python 版一致。void render() { char buffer[HEIGHT][WIDTH 1]; for (int y 0; y HEIGHT; y) { for (int x 0; x WIDTH; x) buffer[y][x] ; buffer[y][WIDTH] \0; } for (int i 0; i particle_count; i) { int ix (int)particles[i].x; int iy (int)particles[i].y; if (ix 0 ix WIDTH iy 0 iy HEIGHT particles[i].life 0) { char ch particles[i].life 0.7 ? : (particles[i].life 0.4 ? * : .); buffer[iy][ix] ch; } } printf(\033[H); for (int y 0; y HEIGHT; y) printf(%s\n, buffer[y]); fflush(stdout); }这里用、*、.三个字符表示不同生命阶段因为 C 控制台输出 Unicode 爱心字符在不同系统上兼容性不一用 ASCII 字符最稳。如果你确定环境支持 UTF-8把换成♥的字节序列也行但我不建议容易乱码。4.4 编译运行与性能调优编译命令很简单gcc heart.c -o heart -lm ./heart-lm是链接数学库因为用了sin、cos。运行前把终端窗口调到 80x30 左右效果最好。性能调优方面C 版可以轻松跑到 60 帧每秒usleep(16000)粒子数开到 1500 也不卡。但要注意printf每帧输出 30 行字符串如果终端本身刷新慢还是会闪。我的经验是减少每帧的输出量比提高帧率更重要。可以把帧率降到 25 左右反而更稳。注意usleep在部分新标准里被标记为过时如果编译报错换成nanosleep或者加-D_DEFAULT_SOURCE宏。5. HTML 网页版最容易分享的爱心飘散实现5.1 Canvas 还是 DOM选型分析HTML 版有两条路用 Canvas 画或者用 DOM 元素堆。我强烈推荐Canvas原因有三一是性能好几百上千个粒子用 Canvas 的fillRect或fillText画毫无压力二是控制精细每个粒子的位置、透明度、颜色都能单独设三是代码集中不用管一堆 div 的样式。DOM 方案虽然写起来直观每个粒子一个 span但粒子一多浏览器的重排重绘开销就上来了而且做透明度渐变很麻烦。我早期用 DOM 做过一版200 个粒子就开始卡换成 Canvas 后 1000 个粒子依然流畅。5.2 粒子生成与 requestAnimationFrame 循环HTML 版的核心循环用requestAnimationFrame它比setInterval更贴合浏览器刷新节奏动画更顺滑。粒子生成逻辑和前面一致只是渲染换成 Canvas APIconst canvas document.getElementById(c); const ctx canvas.getContext(2d); canvas.width window.innerWidth; canvas.height window.innerHeight; const particles []; function heartPoint(t) { const x 16 * Math.pow(Math.sin(t), 3); const y 13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t); return { x, y }; } function spawn() { const t Math.random() * Math.PI * 2; const p heartPoint(t); const scale Math.min(canvas.width / 40, canvas.height / 40); const cx canvas.width / 2; const cy canvas.height / 2; const r Math.random(); particles.push({ x: cx p.x * scale * r, y: cy - p.y * scale * r, vx: (Math.random() - 0.5) * 0.6, vy: -Math.random() * 0.8 - 0.2, life: 1, decay: 0.005 Math.random() * 0.01, size: 1 Math.random() * 2, hue: 330 Math.random() * 30 }); }hue取 330 到 360 是红色到粉色的范围配合hsla颜色模式能做出很漂亮的渐变。r是随机半径系数让粒子在爱心内部也有分布不是只有轮廓。5.3 颜色渐变与发光效果的实现Canvas 里做发光最简单的方式是用shadowBlur和shadowColorctx.shadowBlur 8; ctx.shadowColor hsla(${p.hue}, 100%, 60%, ${p.life}); ctx.fillStyle hsla(${p.hue}, 100%, 70%, ${p.life}); ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fill();shadowBlur会让每个粒子周围有一圈光晕整体看起来就像在发光。这个属性有性能开销粒子数控制在 500 以内比较稳。如果嫌卡可以把shadowBlur去掉改用两层圆叠加外层大而透明内层小而亮来模拟发光性能更好。5.4 移动端适配与分享注意事项HTML 版最大的优势是分享方便但要注意移动端适配。canvas.width和height要跟随窗口变化监听resize事件重新设置。另外移动端浏览器的requestAnimationFrame在页面不可见时会暂停这是好事省电。分享的时候把 HTML、CSS、JS 写在一个文件里最省事对方双击就能打开。如果想让爱心上带字比如“某某某”可以在 Canvas 上用fillText在爱心中心画一行文字字体选粗体、颜色用白色带阴影效果不错。提示微信内置浏览器对shadowBlur支持良好但部分旧版安卓机可能掉帧建议把粒子数降到 300 左右。6. 常见问题与排查技巧实录6.1 终端版闪屏、错位、乱码怎么办闪屏是终端动画最常见的问题九成是因为用了清屏而不是光标归位。检查你的代码里有没有os.system(clear)或cls有的话换成\033[H。如果还是闪看看是不是每帧输出太慢把帧率降一点试试。错位通常是坐标计算的问题。终端字符宽高比不是 1:1爱心纵向要乘 0.5 左右的系数。另外shutil.get_terminal_size()返回的lines可能比实际可显示行数少一行因为最后一行打印换行会滚动建议H size.lines - 1。乱码基本是字符编码问题。Windows 终端默认可能是 GBK输出 Unicode 爱心字符会乱。解决办法是用colorama.init()或者干脆用 ASCII 字符。我在 Windows 上测试时用 Windows Terminal 跑 UTF-8 最稳。6.2 粒子消失太快或飘不起来的参数调整粒子消失太快调小decay飘不起来调大vy的绝对值更负飘得太高飞出屏幕调小vy或者加大重力g。这几个参数是联动的我建议一次只调一个观察效果。有个经验值可以参考终端高度 30 行时vy初始-0.5、g取0.02、decay取0.015粒子大约 20 帧完成一次生命周期节奏比较舒服。你可以在这个基础上微调。6.3 网页版卡顿与性能优化网页版卡顿先看粒子数。超过 800 个还开shadowBlur中低端机必卡。优化顺序是先减粒子数再关shadowBlur最后考虑用离屏 Canvas 预渲染粒子贴图。离屏 Canvas 的思路是先把一个发光圆画到小 Canvas 上主循环里用drawImage贴上去比每次arc fill快很多。另一个容易忽略的点是clearRect。每帧要清空画布但不要用fillRect填背景色那样会覆盖掉透明效果。用clearRect(0, 0, w, h)最干净。6.4 常见问题速查表现象可能原因解决办法终端闪屏用了清屏命令改用\033[H光标归位爱心被拉长宽高比未校正纵向乘 0.5 系数字符乱码编码不匹配用 colorama 或改 ASCII粒子集体消失decay 固定decay 加随机网页卡顿粒子过多/发光开销减粒子、关 shadowBlur移动端错位未监听 resize重新设置 canvas 尺寸飘散方向乱vx 范围过大收窄 vx 到 ±0.37. 让效果更高级的几个进阶思路7.1 加入文字与爱心结合纯爱心看久了会腻加一行字立刻不一样。做法是在爱心中心位置用fillText画文字字体选bold颜色用白色或浅粉加一点shadowBlur让它和粒子融合。文字不要太大占爱心宽度的三分之一左右比较协调。如果想做“文字从爱心里浮现”的效果可以让文字的透明度随帧数从 0 渐变到 1。7.2 3D 旋转与透视的简化实现3D 爱心听起来复杂其实有个取巧的办法给每个粒子的x坐标乘一个随时间变化的cos(angle)模拟绕 Y 轴旋转同时根据sin(angle)调整粒子的亮度和大小近大远小。这样不用真的建 3D 坐标系也能做出旋转的观感。我试过这个方案效果比纯 2D 惊艳不少代码量只多了十几行。7.3 多种粒子形状混合只用一种字符或圆点视觉上比较单调。可以混合几种大部分是圆点少量是爱心字符再少量是星形。不同形状的粒子用不同的颜色和速度整体层次感会强很多。这个思路在游戏特效里很常见叫“粒子多样性”是提升观感性价比最高的手段之一。7.4 参数调优的个人经验最后分享几个我调参时总结的经验。第一随机不等于均匀random.uniform是均匀分布但自然效果往往需要高斯分布比如粒子速度用random.gauss(0, 0.2)会比均匀分布更自然。第二颜色不要超过三种色相红、粉、紫这个组合最稳加太多颜色会显得廉价。第三帧率不是越高越好25 到 30 帧的“轻微卡顿感”反而更有复古终端味60 帧太顺滑了反而少了那种味道。我在实际使用中发现把粒子的生命周期和字符变化绑定♥→*→.比单纯用透明度淡出更有“字符动画”的特色这也是终端版比网页版更有味道的地方。如果你要做的是发到社交平台的效果网页版的渐变发光更讨喜如果是自己终端里跑着玩字符变化那套更有感觉。两条路都走一遍你就知道哪种更适合你的场景了。