那个让你停不下来的双击点赞动画，到底藏着多少小心机？

品鉴达人 · 发表于 2026-8-7 16:36

去年剪一个探店vlog，甲方突然来一句：“结尾那个点赞能不能做个动画？就是那种……嘭一下弹出爱心！”我嘴上说ok，心里mmp。因为我知道他要的绝不只是素材库里拖个粉色小心心——得是抖音上那种，手指一碰就炸开，粒子飞溅，还带震动的那种。说实话，那会儿我真没做过。但硬着头皮弄完，发现这玩意儿就是个纸老虎。

你以为双击点赞只是闪一下？大错特错

很多人觉得点赞动画就是两张图切换——灰色心变红色心。要真是这样，UI设计师早失业了。一个能让人上瘾的点赞动效，至少拆成三阶段：预备动作→高潮爆发→惯性余震。预备动作往往只有0.1秒，图标微微缩小再弹回，给手指一个“按到了”的反馈；高潮就是爱心爆裂那一下，通常0.3-0.5秒，必须有形状变形和粒子系统；余震则是那些碎屑飘落、波纹扩散，让你觉得这个赞“还没结束”。

但这里有个反直觉的点：很多人拼命堆粒子，结果手机卡成ppt。其实流畅感的核心根本不是粒子数量，而是缓动曲线。对，就是那个 AE 里调曲线图表的噩梦。有人用线性运动，那个爱心爆得跟机械战警似的，死硬死硬的。💡 正确做法：Scale 属性给个 overshoot 表达式，或者直接拽手柄拉出急剧的加速度，到达顶点后快速衰减，过冲一点再回弹——这才是人类肌肉的惯性模拟。

After Effects 关键帧缓动曲线调整截图双击点赞动画

说到表达式，我踩过坑。有一次复制网络上的万能弹性代码，结果预览时直接卡死。后来才发现那代码每秒执行60次，每个粒子都算一遍，不死才怪。❗ 所以现在我全部用关键帧助手里的“回弹”预设，再手动微调，效率高得多。不过话说回来，如果你要做那种不规则爱心碎片飞舞，表达式又绕不过去了。比如用 sin 函数让碎片旋转，随机种子控制方向……这又是另一个深坑。

动手做一个，其实比想象中简单

好，不扯虚的。就说最常用的 After Effects。新建一个合成，画个爱心形状图层——别用系统自带的心形，那个太肥了，像屁股。自己用钢笔勾一个瘦长款的。然后给“缩放”K帧：0帧80%，第4帧120%，第7帧100%，第10帧又到105%再回100%。这就有了弹一弹的感觉。关键一步：选中所有关键帧，按F9缓入缓出，然后进曲线编辑器，把靠中间那个帧的把手拉到最夸张的弧线上。看到了吧，那个爱心一下就有了肉感。

粒子部分更简单。新建一个纯色层，加 Particular 效果（中文版叫粒子），发射器选“图层”，指定那个爱心形状层，速度给到800，粒子生命1秒，尺寸随机50%。然后把粒子替换成自定义的碎心小三角——你提前画好一个20x20的三角形图层，替换进去。对了，记得开运动模糊！这个细节值钱，不开的话粒子像塑料片，开了才有动感模糊的力道。

AE粒子插件Particular制作点赞爱心碎片参数面板

我用这招做过一个美食号的片尾，配合音效——那个“啵”一声以后紧接碎玻璃声，甲方当场发朋友圈夸“高级”。😄 你要是用剪映，也别觉得LOW。剪映专业版现在有“关键帧动画”和“粒子素材”叠加，无非是灵活性差点。但如果你赶时间，直接搜“爱心粒子”贴纸，调整出现时机和位置，再给主爱心加个入场动画“弹入”，效果足够糊弄非专业客户了。千万别学某些教程让你用无数个文字图层手摆爱心雨，那叫行为艺术。

别人不会告诉你的隐藏玩法

别人不会告诉你的隐藏玩法

你以为这就完了？哼，真正的骚操作在交互感。我们剪视频是死的，但你可以把点赞动画做成“仿佛有手指在点”。怎么做？在动画前面加一个半透明的圆圈指引，位置精确对应点击区域，然后圆圈向内缩聚并消失——这其实是 UI 设计里的“空间映射”原理，让观众潜意识里觉得自己的手指按下了那个位置。很多人看的时候会真的用拇指去碰一下屏幕，虽然碰的是视频播放器，哈哈。

还有更绝的：震动。震动不是真的让设备震，是画面的瞬间位移。在爱心爆发的那一帧，把整个画面图层缩放至101%并快速复位，或者仅仅水平摇晃2个像素。时长不到0.08秒。这招是从游戏视频里扒来的，知道的人要么是资深UI动画师，要么就是游戏特效师转行。我第一次在竖屏信息流广告里用这个效果时，点击率涨了17%——没有A/B测试，我就这么一猜，但肯定有效。

最后啰嗦一句：别滥用。如果你的内容本身就靠安静说话，比如ASMR或者知识类长视频，一顿花里胡哨的点赞特效反而像小区门口旋转的理发店灯柱。但要是快节奏的卡点混剪、旅游短片，甚至产品展示——放心大胆造。动画时长控制在0.8秒以内，让它在下一波节奏前刚好收住，那种“意犹未尽”会让你点赞量起码肉眼可见地上涨。不说了，我去给新单子做爆炸爱心的渐变避障了，客户要的是赛博朋克风，爱心得带电子线路……活着真难。