中秋还有 10 天。这两天我打开微信,看到 4 个朋友转发了同一个公众号的推文——点进去,是一只卡通月兔沿着云层跑,跑过桂花树,跑到月亮底下,落地时还弹了一下,接着出现"中秋团圆"的标题。
朋友转发时附了一句:"这个动效好牛,是怎么做出来的?"
我本来想随手回"这是 SVG 路径动画",打到一半又删了——回完这三个字,对方大概率不会懂,只会问"路径动画是什么、贵不贵、好不好学"。所以我打算写一篇,把这件事讲清楚。讲清楚之后,你要是也想给中秋稿加一段这样的动效,可以照着下面的 5 步走,不用会代码。
一、路径动画到底是什么:别被"动画"两个字吓住
公众号里能动起来的图,基本就两类。
一类是 GIF。GIF 你拖到编辑器里,它就动了,你改不了它的速度,也改不了它的交互。
另一类叫 SVG交互动效。SVG兼容性好，代码小巧，而且——这是关键——你可以让图里的某一个元素,沿着你画的一条线,自己走过去。
"沿着一条线自己走过去",就是路径动画。
你画一条曲线,告诉微排版:"这只月兔,从这条线的起点,走到终点,中间速度先慢后快。"月兔就真的沿着那条线跑过去了,不是 GIF 那种无限循环的假跑,是它真的从 A 点移动到了 B 点。
二、为什么大多数编辑器做不了这件事
大多数公众号编辑器,工作方式是"给你一个模版或组件,你去修改图和文字"。你可以调整颜色、样式、字号,但如果想要改动本身的动效，就会很受限制，微排版提供路径动画功能，使得用户真正可以做到，自己动手让元素动起来。
路径动画不是这几种之一。路径动画要求编辑器自己当容器——你画一个 SVG,SVG 里有一个元素,这个元素有一个"路径属性",你得让编辑器把这三个东西绑在一起。
这件事在过去的公众号编辑器里,只有少数几家敢做,原因不是技术难,是大多数编辑器是没有"画布"这个概念的——它们主要的编辑区域是编辑器本身,如果没有画布,就无法"在舞台上画曲线"。
微排版从第一天起就是"画布即容器"。这也是他和一些老牌编辑器最不一样的地方。
三、5 步路径动画工作流:从"一只月兔 + 一张桂花图"开始
假设你手里有一张月兔的 PNG,一张桂花的 PNG,一张中秋圆月的背景图。我们要做"月兔沿曲线跑到月亮底下"。
第 1 步:把图先传到画布上
打开微排版编辑器(https://weipaiban.cn),新建一篇空白推文,在画布上依次拖入"背景月相图""桂花 PNG""月兔 PNG"。
这一步你会发现一件事——月兔和桂花可以随便拖动,放大缩小、旋转、叠在背景上,跟你在 PPT 里调整图片一样方便简单。
这一点,讲真话,大多数编辑器是做不到这样。而微排版因为原生注入了“自由，可拖拽画布编辑功能”的基因，天生就适合干这个。
第 2 步:画一条曲线
在画布右侧工具栏添加"路径动效",就可以开始绘制动画路径了，也非常简单，在画布内点一下,在月兔现在的位置上点一下作为起点,然后鼠标沿着你想让月兔跑的轨迹点几下,最后点终点，哪怕你画的运动轨迹不是那么规整，也没关系，点击一键平滑，让你的路径瞬间完美。
月兔从左边开始,往上斜着跑过桂花树,再斜着往下到月亮底下,这是最常见的中秋预热路线——起点到终点中间你可以打 5 到 8 个点,曲线会自动平滑成一条贝塞尔曲线。
画路径的时候,不用着急,慢慢拖一下每个锚点,看曲线的弧度顺不顺。就算有画错的，或者不完善的，也没关系，因为微排版的路径功能提供了强大的绘制辅助功能，方便你轻松做出调整。
第 3 步:给月兔的这条曲线动画设置好参数
我们已经设置好了路径，接着选中月兔的路径动画,在右侧打开这个动画的属性面板：
然后你会看到一组参数。我们来依次进行设置:
- 时长:3 秒(从跑到月亮底下用 3 秒,不急不慢)
- 缓动:缓入缓出(意思是起步慢、中间快、停下也慢,看起来像真的在跑,不像瞬移)
- 循环:不循环(只跑一次,落地就停)
- 触发方式:自动或点击（看你的场景）
第 4 步:让月兔落地时,标题淡入
月兔跑到终点(月亮底下)那一刻,你希望"中秋团圆"四个字从下面慢慢浮起来。
做法是在画布上拖入一个富文本或文字组件,内容写"中秋团圆",字号调成 32,字体选一个衬线字(比如思源宋体)。然后在右侧动效面板找"渐现"或者"其他出现动画"。
这个参数的意思是:月兔动画开始之后,等 3 秒,也就是月兔落地那一刻,文字再开始淡入。淡入时长 0.5 秒。
第 5 步:导出 + 插件导入公众号
安装微排版浏览器插件(Chrome / Edge 都有)。装了以后,你打开公众号文章，你点插件,会直接弹一个作品列表,点一下你要导入的那个作品,代码自动填到后台,你不用复制粘贴,不用切换窗口,不用怕复制丢字符。
四、5 个路径动画的真实案例,可以直接套
刚才那只月兔是我编的。但微排版模板库里有 6 个真的路径动画模板,你可以打开编辑器直接套,改一改图就能发。下面这几个,你去 weipaiban.cn 搜关键词能找到:
- 「中秋」——本文里那只月兔的原型,入门级路径动画
- 「点击滑动追光灯」——读者点一下,一束光沿着预设路径照过去,适合做"卖点走光"
- 「描绘路径动画」——一个元素沿着路径画出来的同时,自己"长出"轮廓,适合做"品牌 logo 亮相"
- 「撕纸翻页」——读者从下往上撕开一张图,撕开后是新的一页,本质也是路径动画
- 「模拟微信群聊」——群聊里每条消息从下往上"冒"出来,本质是消息按时间轴依次出现的路径动画
第 5 个不是路径动画,但是和路径动画一脉相承——微排版里所有"按时间轴依次出现"的效果,底层都是路径动画的逻辑,只是把"位置路径"换成了"时间路径"。
五、3 条踩过的坑,提前告诉你
我帮几个编辑部配过中秋稿,3 个坑今年上半年见过 4 次,写下来你省得再踩:
坑一:曲线画太短,月兔"瞬移"。 起点到终点之间至少 5 个锚点,曲线总长建议是月兔自身宽度的 8 到 12 倍。太短的话,即使你配了 3 秒时长,月兔也会"嗖"地一下就过去,看起来像 bug 不像动画。
坑二:多只月兔同时跑,参数却不一样。 如果你做了 多只月兔前后跑,2 只的效果必须设成一样的——否则,读者会觉得画面在打架。
坑三:导出后 SVG 的图丢失。 通常可能由于微信服务器繁忙，解决办法:可以尝试再次导入，或者检查下图片是否过大，适当压缩。
六、最后说点掏心窝的话
我做了 多年公众号编辑器。这几年里,后台问得最多的不是"怎么写代码",是"动效能不能简单点"。
2026 年的今天,我可以告诉你:动效已经简单到"画一条线 + 选一个图 + 配几个参数"这三步。难的不是动效本身,是动效之外的选题、文案、和读者什么时候想停。停得对,跑过去 3 秒;停得不对,你给读者 30 秒路径动画,他滑走了。
所以我建议你要么不跑,要跑就跑 3 秒,跑完立刻接标题,不要让读者等。
中秋快乐。去画第一条曲线吧。
—— 大派 / 微排版 weipaiban.cn / 写于 2026 年中秋前 10 天
相关阅读
- 微排版首页 · 在线编辑器,不用下载
- 模板库 · 节日 / 品牌 / 教育 / 政企 4 大类
- 2026 中秋国庆专题 · 中秋预热稿专题模板