如何让一张静态图片沿 8 字轨迹动起来

SVGA DIY 的大多数教程都是从一个现成的 .svga 文件出发，改动里面的某个东西。 这一篇不一样：起点是一张空白画布和一张普通的 PNG。设计师丢过来一张礼物图， 然后有人问「动效版本呢」——没有源动画，只有一张图，说的就是这个场景。

而且目标不只是「让它动起来」，而是一个具体、非常好复用的运动：素材沿着一条 8 字轨迹运动——一边上下起伏，一边左右摆动，一个循环正好画出一个数字 8。 这是让悬浮礼物显得「活」而不是「机械」的关键运动，而它只需要两个普通效果， 外加一个正确的周期比。

三个效果各司其职：

• 浮动（Float）——垂直方向的位移，也就是 8 字的上下分量。
• 摇摆（Sway）——绕图层底边的旋转，会把素材主体甩向左右两侧，这就是 8 字的 水平分量。
• 扫光（Sweep）——一道从画面上扫过的高光，礼物图标和 logo 上常见的那种反光。

演示素材

本文用的是一枚玫瑰金心形宝石戒指——社交语音房里那种高价礼物的样子。它就是一张 背景透明的普通 PNG：

你可以下载这张戒指 PNG，用完全相同的 素材跟着做，也可以换成自己的图。不管用哪张图，有两点要注意：一是背景必须 透明（要抠过图，而不是白底照片），二是要裁到内容边界——文件里不要留大片 空白边距，那些空白会被当成图层的一部分，直接影响扫光高光扫过的范围。

第 1 步：新建空白 SVGA

打开修改器。还没有文档时，预览面板会给出两个入口——New SVGA（新建）和 Open SVGA（打开）。点 New SVGA。

弹窗里要填文档名、画布尺寸、帧率和总帧数。选 750 × 750 这个预设——礼物动效 的常用尺寸——帧率和帧数保持默认的 20 fps / 60 帧，正好是三秒一个循环。 点 Create 创建。

60 帧这个长度后面有用：两个运动效果的周期都必须能整除它，8 字才能首尾闭合。

第 2 步：切换到暗色模式

点顶部工具栏的主题按钮，选 Dark（暗色）。

这不只是审美问题。后面要加的扫光是一道明亮的暖色高光，在浅色主题的浅色画布 背景上几乎看不出来；换到暗色棋盘格上立刻就清楚了——而且暗色更接近这些礼物 实际播放时的 App 背景。

第 3 步：导入 PNG 素材

顶部工具栏的 Open SVGA 只接受 .svga 文件，所以 PNG 要走另一条路：点 Import Materials（导入素材），停在 Local assets（本地素材）标签页，用 右边的 Import PNG files 选择文件。

图片会以 ring.png 的形式出现在左边的素材面板里。此时它已经进了文档的素材库， 但还没有放到画布上。

第 4 步：把素材放到画布上

在素材那一行点 Add to layers（加入图层）。戒指出现在画布上，图层面板里也 多了一个 ring 图层。

注意它进来时是铺满整个画布的。这一点直接关系到下一步。

第 5 步：把图层缩小一点

点 ring 图层上的编辑（铅笔）图标打开属性页，把 Scale X 和 Scale Y 都拖到 0.8。

这一步最容易被跳过，也正是很多人第一次做出来觉得「怎么怪怪的」的原因。画布 边界是硬的：缩放为 1.0 时戒指四边贴边，每一次起伏都会被上下边切掉，每一次摆动 都会削掉一个角——你根本看不到 8 字轨迹，只会看到一块素材在遮罩下面滑来滑去。 缩到 0.8 之后四周各留出约 75 像素余量，比下面这套动效实际用到的还多。

拖动时预览会实时更新，能直接看到留白出现：

第 6 步：加浮动做垂直分量

往下滚动属性页，点 Effects（动效），再点 Add effect（添加动效）。目录 分两类：Basic loop（基础循环：浮动、摇摆、呼吸、旋转、透明度脉冲）和 Light Effects（光效：扫光、发光）。

选 Float（浮动）。它添加后轴向默认就是 Vertical（纵向），正合我们要的。 改两个数字：

• Amplitude（振幅）→ 45。默认的 12 只是很轻微的漂浮；45 像素能让 8 字的 垂直行程明显看得出来。
• Duration frames（周期帧数）→ 60。也就是一个文档循环走完一次完整的上下往返。

第 7 步：先只播浮动看看

先别急着加下一个，现在就点 Play（播放）。此时看到的是纯粹的垂直起伏—— 戒指沿一条直线上下移动：

这一眼值得看，因为下一步要做的，就是把这条直线变成一个 8 字。

第 8 步：加摇摆，周期取一半

点 Back to effects 回到效果列表，再点 Add effect，选 Sway（摇摆）。 设置：

• Angle（角度）→ 5 度。
• Duration frames（周期帧数）→ 30。

这个 30 就是全部诀窍所在。 摇摆是绕图层底边旋转的，所以戒指主体会被甩向 左右两侧——这就是水平方向的运动。把一个水平往复和一个垂直往复叠在一起，得到 什么形状，完全取决于两者的周期比：

• 周期相同（都是 60）——两个方向同步，素材只会沿一条斜线或一个椭圆滑动。
• 水平是垂直的两倍快（30 对 60）——素材在上升的那半程里完成一次完整的左右 摆动，在下降的那半程里再完成一次。两个圈上下叠起来，就是一个 8 字。

这就是李萨如图形（Lissajous curve）那套数学，2:1 正是画出 8 字的比例。而且 30 和 60 都能整除 60 帧的文档长度，所以轨迹首尾严丝合缝，不会在循环点上跳一下。

第 9 步：播放 8 字轨迹

再点一次 Play。第 7 步那条直上直下的线，现在变成了 8 字轨迹——戒指一边上升 一边往一侧摆，从中间交叉回来，再一边下降一边往另一侧摆：

想让 8 字更宽或更窄，调振幅而不是周期：浮动的振幅决定 8 字的高度， 摇摆的角度决定它的宽度。动了任何一个周期，形状就没了。

第 10 步：添加扫光效果

再来一次：Back to effects → Add effect → 这次选 Light Effects 分类 下的 Sweep（扫光）。

扫光和前两个效果的工作方式不一样。浮动和摇摆是在挪动图层；扫光是画在图层 上的——它沿着图层自身的像素范围画出一道明亮的光带。所以它需要一个面积够大、 本身够亮的对象才划算：在一枚大的玫瑰金戒指上，它看起来就是金属上掠过的一道 反光。

第 11 步：调整扫光参数

先把预览停在高光正好扫过画面的那一帧——这个文档大约在第 22 帧附近——然后把 Thickness %（粗细）拖到 32 左右，Feather %（羽化）拖到 55 左右。 光带会实时变宽、边缘变柔：

有一个参数要当心：Brightness %（亮度）。把它推得远高于默认值，高光会糊成 一块纯白，连戒指上的碎钻和花纹一起吃掉。如果你看到的高光像一坨白斑而不是反光， 基本都是亮度推过头了——应该改成把光带调宽、调柔，而不是调亮。

第 12 步：播放最终循环

最后再点一次 Play。三个效果同时跑起来：戒指沿 8 字轨迹运动，每个循环还有 一道高光从它身上扫过。

第 13 步：查看导出检查

点顶部工具栏的 Export（导出）。因为文档里现在有高级效果（扫光属于光效）， SVGA DIY 不会直接导出，而是先弹出一个 Export check（导出检查）对话框，列出 三档兼容性方案和一份播放开销摘要。

默认的 Per-frame clip path export（逐帧裁剪路径导出）兼容性最好，已经预先 选中。如果你的目标播放器比较老或者比较严格，另外两档会用体积或精度换更广的 支持范围。

第 14 步：导出文件

点对话框里的 Export 确认。做好的 .svga 就下载下来了——一张静态 PNG 变成了 一段循环播放的礼物动效，全程没有手画过一帧。

接下来可以试试

8 字这套配方对任何抠好图的素材都适用，而「调周期比」这个思路还能玩出别的轨迹：

• 3:1 代替 2:1（摇摆 20 帧对浮动 60 帧）会得到一条更密、更躁动的编织状轨迹。
• 把浮动换成呼吸（缩放脉冲），适合那种应该「一张一缩」而不是「到处跑」 的物体。
• 在扫光旁边再加一个发光，得到的是柔和的整体光晕，而不是一道移动的光带。
• 给每个效果设置不同的 Start frame（开始帧），让它们不要在同一帧上重启， 短循环看起来会没那么重复。