Simple Editor - 高效智能地设计动效

在当今数字化时代，动效设计已成为用户体验设计中不可或缺的一环。它不仅显著提升了用户体验，增强了用户粘性，还为业务带来了可观的收益。一个好的动效自然离不开专业且实用的动效设计工具，本文将为大家介绍一款我们自研的动效编辑器，旨在为动效设计师以及相关业务合作的同学提供一个高效、便捷且功能强大的创作平台，让设计师可以高效智能地设计动效。

目前 Lottie 动画作为常见的动效资产格式，广泛应用于体验交互和活动设计中。通常这类动效资产的生产流程是，设计师将 Figma/Illustrator/Photoshop 之类图形软件中的图像资源导入到 Adobe After Effects 工具中进行动效制作，再通过插件 Bodymovin 进行 Lottie 动画的渲染输出。

Lottie 提供了基础的动画渲染能力，但在实际应用中仍存在诸多问题，主要表现是在 AE 中设计的效果往往和 lottie 运行时效果不一致。

AE 中许多效果（渐变、遮罩等）在 lottie 上渲染不一致

不支持 3d 图层，卡片的透视效果无法渲染

在客户端和 web 上使用不同的方式渲染，动画效果不一致

通过文档文件形式交付，存在资产复用、管理等问题

既然 Lottie 存在着这些问题，那么大家都是如何来解决的呢？

公司内外存在各式各样的设计工具，我们筛选出了 3 个主要用于动效制作的工具，从多个维度与 AE 进行了比较。

通过比较，我们发现，Rive 和 Galacean Effect 均解决了动效渲染不一致的问题，尤其 Rive，凭借强大的状态机和事件交互能力，能够创作出众多富有趣味性和可玩性的动效。同时 Galacean 也有其特色的地方，其支持了简单的 AI 动效的能力，为设计动效降低了门槛。

那么我们能否直接使用 Rive 和 Galacean Effect 来制作业务中的动效呢？答案是否定的，主要原因是：

除此之外，设计师在日常工作中也积累了许多提升效率的想法，例如通过 AI 生成关键帧、将过往的动效设计保存为模板以便复用等。然而，使用第三方设计工具往往无法支持这些定制化的提效需求，导致设计师的想法方案难以落地。

基于以上痛点和挑战，同时我们团队有自研的高性能渲染引擎 Simple Engine（具有优异的渲染性能、支持 h5、lynx 的 webgl 跨端一致性渲染），自研一款动效编辑器成为可能。自研编辑器不仅可以保证设计阶段和线上效果一致，解决现有工具的局限性，还能为设计师和开发者提供更高效、更灵活的动效设计与交付解决方案。

下面是使用 SimpleEditor 制作动画的一个案例，其中用到了 AI 生成动效的功能，同样的动效从开始设计到完成交付，和 AE 比，耗时从 0.5d 左右 降低到 10min 左右。

研发编辑器存在着很多技术难点，主要集中在高效的数据管理、流畅的交互控制、复杂的图形变换算法、解耦的撤销回退机制、图层关键帧同步、贝塞尔曲线应用及状态机等。

本文仅介绍编辑器的技术架构，后续会逐步发布详细的技术方案相关的文章，敬请期待。

在介绍功能之前，让我们先一同了解一下本编辑器的整体布局。

我们借鉴了 Rive 编辑器的排版。顶部为功能区，其中包含一些常用操作；中间为图层节点树、资源、画布、属性及配置区域；底部为状态机、时间线、曲线编辑、曲线快捷设置等。

在动效设计领域，关键帧的设置往往是创作过程中最需要精雕细琢的环节——它不仅依赖设计师对节奏和细节的敏锐把控，还需耗费大量时间逐帧调整。即便是经验丰富的设计师，面对新项目时也不得不从零开始反复调试，导致效率瓶颈和创意重复。为此，我们推出了关键帧预设功能，这一能力不仅大幅缩短了基础动画的搭建周期，更将设计师从重复劳动中解放，使其能够专注于创意表达与效果创新，真正实现“效率与