← 返回 2026-03-03

OmniLottie:通过参数化Lottie tokens生成矢量动画 OmniLottie: Generating Vector Animations via Parameterized Lottie Tokens

Yiying Yang, Wei Cheng, Sijin Chen, Honghao Fu, Xianfang Zeng, Yujun Cai, Gang Yu, Xingjun Ma 📅 2026-03-02 👍 151 2026-07-13 08:35
Lottie 多模态生成 矢量动画 自回归生成 视觉语言模型

通过参数化Lottie tokens和多模态指令,实现高质量矢量动画的自动生成。

前置知识

Lottie格式

Lottie是一种轻量级的JSON格式,由Airbnb开发,用于在Web、iOS和Android平台上表示矢量动画。它存储所有形状、效果和运动参数在一个JSON文件中,支持分辨率独立渲染和跨平台兼容性。与光栅视频不同,Lottie文件包含参数化描述而非像素数据,因此文件体积小且可编辑。

理解Lottie格式是本文的核心,因为整个方法都围绕如何高效处理和生成Lottie动画展开。

自回归生成

自回归模型是一种生成模型,它根据先前生成的token序列预测下一个token。在视觉生成领域,自回归模型将图像或动画表示为离散token序列,然后通过逐个预测token来生成完整内容。这种方法与扩散模型不同,它直接建模序列的联合概率分布。

本文采用自回归范式生成Lottie tokens,理解这一机制对于把握模型如何工作至关重要。

视觉语言模型(VLM)

视觉语言模型是能够同时处理图像、视频和文本的多模态模型。它们通常基于大型语言模型(LLM)架构扩展而来,通过视觉编码器将视觉信息转换为与文本token兼容的表示。VLM具有强大的指令跟随和多模态推理能力。

本文基于预训练的VLM(Qwen2.5-VL)构建,利用其多模态理解能力处理文本、图像和视频指令。

参数化tokenization

参数化tokenization是将连续参数值映射到离散token的过程。本文提出偏移量化方案,为不同类型的参数(时间、空间、变换、样式)分配不同的词汇表范围,避免token冲突同时保留语义连贯性。这种设计使得模型能够高效学习动画参数的分布。

这是本文的核心技术创新,解决了直接处理冗长JSON格式的低效问题,显著提高了训练效率和生成质量。

矢量动画

矢量动画是使用矢量图形而非光栅图像创建的计算机动画。矢量图形通过数学方程定义形状,因此可以无限缩放而不失真。矢量动画在UI/UX设计、品牌标识和数字出版中广泛应用,因为它们轻量、可编辑且分辨率独立。

本文聚焦于矢量动画生成,理解其优势有助于把握研究动机和实际应用价值。

研究动机

在UI/UX设计、品牌标识和数字出版等专业设计场景中,设计师需要可编辑、轻量且分辨率独立的矢量动画。现有方法主要分为两类:一类是基于优化的方法,如AniClipart和LiveSketch,它们依赖于参考GIF或文本到视频模型来驱动静态矢量图形,但这些方法通常将外观和运动解耦,导致运动表达受限且处理时间长达数百秒(AniClipart需要1200秒,LiveSketch需要780秒)。另一类是直接生成Lottie JSON的方法,如GPT-5和DeepSeek,但这些通用大语言模型对Lottie的严格JSON格式处理不佳,成功率极低(GPT-5在Text-to-Lottie上仅为12.7%),且生成质量不稳定。此外,现有方法生成的动画缺乏可编辑性、跨平台兼容性和分辨率可扩展性,无法满足专业设计工作流的需求。

本文的目标是本文旨在创建一个统一的端到端框架,能够从多模态指令(文本、图像、视频)直接生成高质量Lottie矢量动画。具体目标包括:实现高成功率(目标>80%)、强语义对齐(与多模态输入一致)、高效生成(平均生成时间<100秒)、以及保持矢量动画的可编辑性和跨平台兼容性。此外,还需要构建大规模数据集和标准化评估基准以推动该领域研究。

与已有工作不同的是,本文的独特切入点在于认识到直接生成冗长的Lottie JSON格式是低效的:格式化token和元数据占据了大量token,而模型本应学习有意义的几何和运动特征。因此,本文提出Lottie tokenizer,将JSON文件转换为紧凑的命令和参数序列,从而显著提高学习效率和生成质量。这种参数化表示方法使得复杂动画能够通过序列建模来生成,同时保留了矢量动画的所有优势。此外,本文构建了首个大规模多模态Lottie数据集MMLottie-2M,并建立了标准化评估基准MMLottie-Bench,填补了该领域缺乏训练数据和评估协议的空白。

核心方法

本文的方法可以类比为将复杂的乐高积木组装说明书翻译成简洁的指令序列。Lottie JSON文件就像详细的乐高说明书,包含大量冗余的格式信息(如括号、引号、属性名)。Lottie tokenizer的作用是将这些冗长的说明书提取为紧凑的指令序列(如'放置红色积木在位置(10,20),旋转30度')。然后,基于预训练的视觉语言模型(Qwen2.5-VL)作为'大脑',学习根据多模态指令(文本描述、参考图像、示例视频)生成这些指令序列。最后,将生成的指令序列反向转换回Lottie JSON文件,即可渲染出矢量动画。技术路线包括三个关键组件:1) Lottie tokenizer负责JSON与token序列的相互转换;2) 基于VLM的自回归模型负责根据多模态指令生成Lottie tokens;3) 大规模数据集MMLottie-2M提供训练数据。

本文最本质的创新点是提出Lottie tokenizer,它将冗长的JSON格式转换为紧凑的token序列,同时保留完整的矢量特性。与已有方法相比,这有三个关键区别:首先,与直接生成JSON的方法(如GPT-5)不同,我们的tokenizer移除了冗余的格式信息,使模型专注于学习动画相关的先验知识,而非浪费容量在重现格式token上。其次,与基于优化的方法(如AniClipart)不同,我们采用端到端的自回归生成范式,避免了多阶段流水线中的误差累积和优化不收敛问题。第三,我们的参数化表示支持五种核心图层类型(预合成、纯色、空、形状、文本),通过偏移量化方案为不同参数类型分配不同的词汇表范围,避免token冲突同时保留语义连贯性。这种设计使得模型能够高效学习动画参数的分布,生成成功率从直接JSON方法的0-12.7%提升到88.3-93.3%。

方法步骤详情

方法分为三个主要步骤:第一步是Lottie tokenizer的编码过程。输入Lottie JSON文件,解析器首先提取基础元数据(版本、帧率、时间范围、画布尺寸等),然后遍历每个图层。对于每个图层,根据其类型(预合成、纯色、空、形状、文本)提取特定属性,并将连续参数值通过偏移量化方案映射到离散token。量化公式为 $token(x, t) = \lfloor x \cdot s_t \rfloor + o_t$,其中 $x$ 是参数值,$t$ 是参数类型,$s_t$ 是类型特定的缩放因子,$o_t$ 是词汇表偏移。文本内容使用预训练的VLM分词器进行编码,保持语义一致性。最终输出离散token序列。第二步是自回归模型的训练。基于预训练的Qwen2.5-VL模型,引入额外的Lottie词汇表嵌入。模型学习根据多模态指令(文本、图像、视频)和先前生成的tokens预测下一个Lottie token。训练目标是标准的交叉熵损失:$\mathcal{L} = -\sum_{i} \log P(x_i^s | x_c; x_{<i}^s; \theta)$,其中 $x_c$ 是多模态指令,$x_i^s$ 是生成的Lottie tokens。第三步是解码和渲染。生成的token序列通过反向转换恢复为Lottie JSON文件,然后使用标准Lottie渲染器生成矢量动画。

技术新颖性

本文的技术新颖性体现在三个方面:首先是Lottie tokenizer的设计。与现有工作直接处理JSON不同,我们提出了一种参数化表示方法,将Lottie动画抽象为紧凑的命令和参数序列。这种设计基于对Lottie格式的深入分析,识别出五种核心图层类型及其关键属性,并通过偏移量化方案解决了不同参数类型的token冲突问题。其次是数据集构建。我们创建了MMLottie-2M,这是首个大规模多模态Lottie数据集,包含200万个动画,配有文本描述、关键帧图像和渲染视频。数据收集来自五个主要在线平台,并通过运动迁移管道进行数据增强,显著扩大了动画覆盖范围。第三是评估协议。我们建立了MMLottie-Bench,这是首个标准化评估基准,包含真实子集和合成子集,用于评估文本到Lottie、文本-图像到Lottie和视频到Lottie三个任务。评估指标包括视觉质量(FVD)和语义对齐(CLIP、物体对齐、运动对齐),并通过用户研究验证了自动指标与人类判断的相关性。

OmniLottie是一个多功能自回归生成模型,用于生成高质量Lottie动画。
Figure 1: OmniLottie是一个多功能自回归生成模型,用于生成高质量Lottie动画。
矢量动画数据构建管道概述。
Figure 2: 矢量动画数据构建管道概述。
OmniLottie整体架构。
Figure 3: OmniLottie整体架构。
通过渐进抽象实现token效率。
Figure 9: 通过渐进抽象实现token效率。
MMLottie-2M数据集统计。
Figure 10: MMLottie-2M数据集统计。
MMLottie-2M标注的词汇分析。
Figure 11: MMLottie-2M标注的词汇分析。

实验结果

本文在三个核心任务上进行了全面评估,并与多个强基线进行了比较。在Text-to-Lottie任务中,OmniLottie在真实子集上取得了88.3%的成功率,显著优于GPT-5的12.7%和DeepSeek的9.3%。在视觉质量方面,OmniLottie的FVD分数为202.14,比GPT-5的715.73和DeepSeek的671.80低得多(FVD越低越好)。在语义对齐方面,OmniLottie的物体对齐分数为4.44,运动对齐分数为5.94,而GPT-5分别为0.73和0.71。商业工具Recraft虽然成功率达到77.3%,但其FVD为300.70,运动对齐仅为4.68,且token效率较低(54.1k tokens vs 21.2k tokens)。在Text-Image-to-Lottie任务中,OmniLottie的成功率为93.3%,FVD为180.27,物体对齐为5.10,运动对齐为4.44。优化基线AniClipart和LiveSketch的成功率分别为87.3%和91.3%,但FVD更高(266.46和868.18),且处理时间极长(1212.34秒和723.23秒 vs 88.57秒)。在Video-to-Lottie任务中,OmniLottie的成功率为88.1%,FVD为227.11,PSNR为16.08,SSIM为0.82,DINO为0.92,均优于GPT-5和Gemini3.1-Pro。消融研究进一步验证了关键设计选择:SVG数据混合比例为30%时性能最优,Lottie tokenizer相比直接JSON处理显著提升了所有指标。用户研究也证实了OmniLottie在视觉质量、条件遵循、动画质量和几何保真度方面均获得最高平均排名。

定量评估。
Table 1: 定量评估。
SVG数据混合的消融研究。
Table 2: SVG数据混合的消融研究。
Lottie Tokenizer的消融研究。
Table 3: Lottie Tokenizer的消融研究。
失败案例统计。
Table 4: 失败案例统计。
Lottie动画生成的参与者说明和评估程序。
Table 5: Lottie动画生成的参与者说明和评估程序。
文本到Lottie生成的定性比较。
Figure 4: 文本到Lottie生成的定性比较。
文本-图像到Lottie生成的定性比较。
Figure 5: 文本-图像到Lottie生成的定性比较。
视频到Lottie生成的定性比较。
Figure 6: 视频到Lottie生成的定性比较。
数据组成的定性消融研究。
Figure 7: 数据组成的定性消融研究。
Lottie Tokenizer的定性消融研究。
Figure 8: Lottie Tokenizer的定性消融研究。
查看结构化数据
任务指标本文基线提升
Text-to-Lottie(真实子集) 成功率 88.3% GPT-5: 12.7%, DeepSeek: 9.3%, Recraft: 77.3% 比GPT-5提升75.6个百分点,比Recraft提升11个百分点
Text-to-Lottie(真实子集) FVD↓ 202.14 GPT-5: 715.73, DeepSeek: 671.80, Recraft: 300.70 比GPT-5降低71.7%,比Recraft降低32.8%
Text-Image-to-Lottie(真实子集) 成功率 93.3% GPT-5: 0.0%, AniClipart: 87.3%, LiveSketch: 91.3% 比AniClipart提升6个百分点
Text-Image-to-Lottie(真实子集) FVD↓ 180.27 GPT-5: -, AniClipart: 266.46, LiveSketch: 868.18 比AniClipart降低32.3%
Video-to-Lottie(真实子集) 成功率 88.1% GPT-5: 9.2%, Gemini3.1-Pro: 0.0% 比GPT-5提升78.9个百分点
Video-to-Lottie(真实子集) FVD↓ 227.11 GPT-5: 639.13, Gemini3.1-Pro: 1076.22 比GPT-5降低64.5%

局限与改进

作者承认的局限性包括:自回归解码可能仍然产生无效序列,泛化到多样场景和上下文长度仍是挑战,限制了处理复杂动画的能力。未来工作可以探索约束解码、强化学习与可渲染性奖励,或与专业工具(如After Effects)的集成以提高可靠性和实际适用性。从我的观察来看,本文还存在以下局限:首先,模型在处理非常复杂的动画(如包含大量图层和嵌套结构的动画)时,生成质量可能下降,因为自回归模型的上下文窗口限制。其次,训练数据主要来自五个在线平台,可能存在数据偏差,影响模型对小众或专业设计风格的泛化能力。第三,评估指标虽然全面,但FVD和CLIP等自动指标与人类感知仍有一定差距,用户研究规模相对较小(20名参与者)。第四,模型生成动画的平均时间为33.71-110.77秒,对于实时交互应用可能仍不够快。

独立分析的弱点

经过独立分析,我认为本文存在以下弱点:首先,模型对训练数据中的偏差可能敏感。MMLottie-2M数据集主要来自五个在线平台,这些平台可能偏好特定类型的设计风格(如扁平化图标、简约动画),导致模型对复杂、艺术化或非主流设计风格的泛化能力不足。改进方向是扩大数据收集范围,包括更多专业设计师作品和不同文化背景的设计。其次,对于包含大量图层和复杂嵌套结构的动画,自回归模型的生成质量可能下降。Lottie动画平均有8.6个图层,但最大可达324个图层,而模型在处理长序列时可能面临上下文窗口限制和误差累积。改进方向是探索层次化生成策略或分块生成方法。第三,计算成本较高。虽然比优化基线快很多,但生成一个动画仍需33-110秒,限制了实时应用。改进方向包括模型压缩、缓存机制或并行解码技术。第四,评估协议中使用的LLM-as-judge(Claude-3.5-Sonnet)可能存在偏见,且用户研究规模较小。改进方向是扩大用户研究规模并引入更多样化的评估者。

未来方向

作者提出可以探索约束解码、强化学习与可渲染性奖励,或与专业工具(如After Effects)的集成以提高可靠性和实际适用性。基于本文成果,我认为还可以延伸以下方向:首先是扩展到3D动画生成。当前方法专注于2D Lottie动画,但3D矢量动画在游戏、VR/AR等领域有巨大需求,可以将参数化tokenization思想扩展到3D格式(如Three.js动画)。其次是支持更多动画效果。当前方法主要处理变换、形状和基本效果,未来可以扩展支持粒子系统、物理模拟等高级效果。第三是交互式编辑能力。由于生成的动画保持矢量特性,可以探索支持用户通过自然语言指令对已生成动画进行局部修改和迭代优化。第四是多模态融合的进一步优化。当前方法简单拼接多模态指令,未来可以探索更精细的跨模态注意力机制,提升文本、图像和视频指令的融合理解。第五是实时生成应用。通过模型蒸馏或专用硬件加速,探索在移动端或Web端实现实时矢量动画生成。

复现评估

本文在复现方面提供了良好支持。作者开源了完整代码、预训练模型权重、MMLottie-2M数据集和MMLottie-Bench评估基准,所有资源均可在项目主页获取。数据集包含200万个Lottie动画,配有文本描述、关键帧图像和渲染视频,为研究者提供了充足的训练数据。模型基于预训练的Qwen2.5-VL(3B参数)构建,微调过程相对高效。然而,复现仍需要一定计算资源:训练需要多GPU环境(论文使用NVIDIA A100),单GPU推理也需要约30-110秒生成一个动画。数据预处理包括Lottie清洗、时空归一化和视频渲染,需要一定的工程实现。评估协议使用Claude-3.5-Sonnet作为LLM judge,需要API访问权限。总体而言,对于有ML基础和一定计算资源的团队,复现本文结果是可行的,但需要投入时间处理数据和实现细节。