一、概述
在当今数字化时代，动效设计已成为用户体验设计中不可或缺的一环。它不仅显著提升了用户体验，增强了用户粘性，还为业务带来了可观的收益。一个好的动效自然离不开专业且实用的动效设计工具，本文将为大家介绍一款我们自研的动效编辑器，旨在为动效设计师以及相关业务合作的同学提供一个高效、便捷且功能强大的创作平台，让设计师可以高效智能地设计动效。
二、问题分析
动效设计流程
目前 Lottie 动画作为常见的动效资产格式，广泛应用于体验交互和活动设计中。通常这类动效资产的生产流程是，设计师将 Figma/Illustrator/Photoshop 之类图形软件中的图像资源导入到 Adobe After Effects 工具中进行动效制作，再通过插件 Bodymovin 进行 Lottie 动画的渲染输出。
Lottie 存在的问题
Lottie 提供了基础的动画渲染能力，但在实际应用中仍存在诸多问题，主要表现是在 AE 中设计的效果往往和 lottie 运行时效果不一致。
- 效果存在差异： AE 中许多效果（渐变、遮罩等）在 lottie 上渲染不一致功能存在缺陷： 不支持 3d 图层，卡片的透视效果无法渲染平台渲染差异： 在客户端和 web 上使用不同的方式渲染，动画效果不一致资产管理低效： 通过文档文件形式交付，存在资产复用、管理等问题
市场调研
既然 Lottie 存在着这些问题，那么大家都是如何来解决的呢？
公司内外存在各式各样的设计工具，我们筛选出了 3 个主要用于动效制作的工具，从多个维度与 AE 进行了比较。
通过比较，我们发现，Rive 和 Galacean Effect 均解决了动效渲染不一致的问题，尤其 Rive，凭借强大的状态机和事件交互能力，能够创作出众多富有趣味性和可玩性的动效。同时 Galacean 也有其特色的地方，其支持了简单的 AI 动效的能力，为设计动效降低了门槛。
那么我们能否直接使用 Rive 和 Galacean Effect 来制作业务中的动效呢？答案是否定的，主要原因是：
- 无法私有化部署，存在数据安全的风险企业版授权费用高昂，采购审批未通过资产格式无法与lynx兼容，难以在公司内项目广泛推广使用
自研动效编辑器
除此之外，设计师在日常工作中也积累了许多提升效率的想法，例如通过 AI 生成关键帧、将过往的动效设计保存为模板以便复用等。然而，使用第三方设计工具往往无法支持这些定制化的提效需求，导致设计师的想法方案难以落地。
基于以上痛点和挑战，同时我们团队有自研的高性能渲染引擎 Simple Engine（具有优异的渲染性能、支持 h5、lynx 的 webgl 跨端一致性渲染），自研一款动效编辑器成为可能。自研编辑器不仅可以保证设计阶段和线上效果一致，解决现有工具的局限性，还能为设计师和开发者提供更高效、更灵活的动效设计与交付解决方案。
下面是使用 SimpleEditor 制作动画的一个案例，其中用到了 AI 生成动效的功能，同样的动效从开始设计到完成交付，和 AE 比，耗时从 0.5d 左右 降低到 10min 左右。
三、技术架构
研发编辑器存在着很多技术难点，主要集中在高效的数据管理、流畅的交互控制、复杂的图形变换算法、解耦的撤销回退机制、图层关键帧同步、贝塞尔曲线应用及状态机等。
本文仅介绍编辑器的技术架构，后续会逐步发布详细的技术方案相关的文章，敬请期待。
四、核心功能
在介绍功能之前，让我们先一同了解一下本编辑器的整体布局。
我们借鉴了 Rive 编辑器的排版。顶部为功能区，其中包含一些常用操作；中间为图层节点树、资源、画布、属性及配置区域；底部为状态机、时间线、曲线编辑、曲线快捷设置等。
关键帧预设
在动效设计领域，关键帧的设置往往是创作过程中最需要精雕细琢的环节——它不仅依赖设计师对节奏和细节的敏锐把控，还需耗费大量时间逐帧调整。即便是经验丰富的设计师，面对新项目时也不得不从零开始反复调试，导致效率瓶颈和创意重复。为此，我们推出了关键帧预设功能，这一能力不仅大幅缩短了基础动画的搭建周期，更将设计师从重复劳动中解放，使其能够专注于创意表达与效果创新，真正实现“效率与灵感并重”的设计体验。
1.AI 关键帧预设
我们采用了提示工程方案，通过设计、优化和管理输入提示（prompt），引导大语言模型（LLM）生成符合需求的动画数据，然后转化为关键帧，方便设计师再次对动画精调。
2.通用关键帧预设
通过对动效设计师日常工作中的常用设计进行梳理和提炼，我们将这些高频使用的动效效果整合为通用预设库，开放给所有设计师直接调用。这一功能不仅减少了重复设计的繁琐，还能帮助设计师快速实现高质量的动效效果，显著提升工作效率，同时确保设计风格的一致性。无论是新手还是资深设计师，都能从中受益，轻松打造出符合预期的动效作品。
状态机
前文已介绍，Rive 最显著的优势在于支持强大的状态机功能，能够使设计同学在设计阶段实现动画衔接的状态切换。 至此，我们已实现状态机的能力，支持以可视化方式连接动画，并可定义驱动状态转换的逻辑。这为设计团队和研发团队创建了一种全新的协作模式，使两个团队在开发过程中能够进行深度迭代，而无需进行复杂的对接工作。
1.状态切换
现在先来看个例子，假设需要实现如下动画：
首先让素材从各个方向飞入画布，随后循环播放素材漂浮的动画。循环播放一段时间后，再让其中某个素材图层消失。在通常情况下，应如何实现这样的动画？ 从下面的流程图中可以发现，动画的控制是需要开发程序控制。
然而，引入状态机后情况全然改变。在设计方面，仅需导出一个动画；研发获取动画资源后可直接播放，无需再手写代码逻辑来实现设计所预想的动画逻辑，减少了对接的成本。 下面是在编辑器中实现的效果
2.事件交互
动画通常需添加事件交互，才能展现其灵魂。一般而言，事件绑定与处理需研发人员在工程代码中完成，此过程中需频繁与动效设计师沟通交互细节及切换逻辑。若在状态机切换中融入事件交互功能，则可降低这部分对接成本。
我们参考了 rive 的状态机实现方式，引入了变量输入与事件监听功能。设计师能够定义多个变量和监听器，可以将监听器绑定至图层。当点击图层或进行其他操作触发监听器时，将配置在监听器上的变量值进行派发。而状态机的过渡则定义了与变量匹配的规则，当过渡条件与变量值相匹配时，便会触发当前过渡的切换。以下呈现了一个经典的具备交互功能的状态机示例。
Figma 导入
动效设计的前期工作通常依赖于视觉设计输出的视觉图，设计师需要根据这些视觉图来完成动效制作。
在现代设计流程中，Figma 已成为视觉设计的主流工具，但其导出功能仅支持单张图片，动效设计师不得不将每张图片逐一导出，再导入到 After Effects 或其他动效工具中。不仅如此，设计师还需手动将这些图片重新定位到视觉设计中的原始位置，这一过程耗费了大量时间和精力。
为了解决这一问题并提升效率，我们开发了 Figma 导入功能，直接省去了动效制作中最繁琐的前期准备工作，显著提升了设计师的工作效率。
除此之外，设计师还需要经常替换动效资源，但是动效关键帧保持不变，为此我们也提供了 figma 的资源替换能力，对于换肤场景的动效制作可以快速完成。
3D layer
在动效设计中，想要实现2D图形的3D旋转透视效果，传统做法是先用 AE 制作 3D 动画并导出透明视频或序列帧，但这种方法会导致资源体积过大、内存消耗高、动画无法灵活控制且维护困难。为此我们支持了，直接在编辑器中设计3D图层动画，通过轻量化的运行时实现实时播放，既保持视觉效果又解决了传统流程的痛点。
导出 CSS 动画
Lottie 是基于 JSON 格式的动画，需在 js 层进行解析和渲染（通常采用 canvas 或 svg 方式）。在低端设备上，由于 CPU/GPU 性能欠佳，运行 Lottie 动画会占用大量内存，且计算和渲染主要在主线程执行，会占用有限的线程资源，进而导致设备发热和卡顿，影响交互体验。为解决低端设备的相关问，大型活动通常需准备降级方案，而 CSS 动画成为首选方案。
CSS 动画一般由研发人员依据 lottie 动画手动编写 CSS 代码进行还原。此过程不仅耗费人力，还容易出现错误，并且很难百分之百还原动画效果。若设计方需反复修改动画，还会投入更多的研发人力。为解决这一问题，我们实现了单个 timeline 动画导出 CSS 的功能，基本能够做到百分之百还原动画效果，节省了设计与研发协作沟通的成本以及研发人员手动实现 CSS 动画的人力投入。
下方左侧展示的是编辑器中的 3D 轮盘动画，右侧为导出的 CSS 动画，可见这两个动画完全相同。除 3D 图层动画外，我们还支持将包含预合成的动画导出为 CSS，以最大程度拓展 CSS 动画导出的功能范围。
五、未来规划
动画编排
在动效设计中，设计师常需将多种格式的素材（如Lottie动画、Spine骨骼动画、序列帧动画等）整合到一个动画流程中。这种混合设计的关键在于通过编辑器对各类资产进行动态编排与状态控制。若缺乏状态机或脚本支持，单纯在编辑器中堆叠素材难以实现逻辑连贯的交互效果；而借助状态机，可精准调度不同格式素材的触发时机与切换逻辑。
例如下方农场播撒种子的动效：
在「立即播放」按钮的场景中，按钮的初始状态为帧动画（适用于简单循环动效），点击后触发按钮退场动画，随后播撒种子的 Spine 骨骼动画启动（适合复杂角色动画），最终按钮重新入场。整个过程通过状态机划分阶段，实现多格式资产的无缝衔接，与动效交付中“有序+无序组合”的设计思路一致。这种方案既保留了各格式的技术优势（如Lottie的小文件体积、序列帧的高还原度），又通过状态逻辑整合提升了整体动效的可控性与用户体验。
多人协作
在数字化协作工具快速迭代的当下，以Figma、Rive为代表的云端设计编辑器正通过实时多人协同功能重塑创作流程。与传统单机设计软件（如Adobe After Effects）的"文件孤岛"模式相比，这类工具允许团队成员以"多光标并行编辑"的形式介入同一份设计文件——产品经理可在画布旁标注交互逻辑，UI设计师调整组件样式的同时，开发工程师已通过内置代码面板提取参数，甚至客户也能通过链接直接插入反馈批注。
技术层面，这类编辑器依赖OT算法（Operational Transformation）或CRDT（Conflict-Free Replicated Data Type）实现毫秒级操作同步，确保即便百人同时操作也不会出现图层覆盖或数据丢失。例如Figma采用动态增量更新机制，用户每处笔触变化都会以差分数据包广播至协作者终端，配合分层版本树（Version Tree）自动归并冲突修改。这种设计让团队如同置身虚拟工作室，既能在设计稿中看到协作者的实时光标轨迹与头像标识，又能通过时间旅行（Time Travel）功能回溯任意历史版本，彻底告别"final_final_v3.psd"式的版本混乱。
资产交付和管理
目前的资产交付主要通过飞书文档的形式，流程相对繁琐，效率较低。未来，我们计划对资产交付和管理进行优化，构建一个统一的资产交付平台。设计师可以在该平台上方便地发布、管理和分享动效资产。同时，平台将提供详细的资产信息和版本管理功能，确保团队成员能够清晰了解资产的使用情况和更新记录。此外，平台还将支持与研发系统的对接，实现资产的快速更新，减少交付过程中的人为错误和时间成本。
其他规划
六、团队介绍
我们是「抖音前端架构-互动体验技术」团队，主要为字节跳动业务提供互动技术解决方案。
技术产品包含面向互动 / 小游戏研发场景的 SAR Creator、高效智能的动效设计编辑器 Simple Editor、互动场景端能力套件 AnnieX 互动容器。
在这些技术建设与业务落地上，和 TikTok 创意设计团队、抖音直播多媒体动效团队一同推进，不断探索字节跳动应用生态下的创新业务形态。
