承接方式：自研渲染引擎 Crab；实现满足业务需求的渲染和编辑功能，提升功能覆盖度和开发效率；对比其他开源渲染引擎，要做到性能更优、开发效率更高。

示例：如下图

因此，我们整个平台的演进路线如下：

四、Vision动效平台的核心功能

截至目前，我们已经圆满完成了阶段一与阶段二的核心功能构建，而阶段三关于动效生产的部分仍在紧锣密鼓地推进中。在此过程中，我们已经积累了超过3000个高质量的动效资产，成功规避了30多项可能引发线上崩溃的潜在风险，累计导出代码次数达3900余次。更令人高兴的是，借助我们的平台，一个动效的开发周期最短可缩短至15秒，这一成就显著降低了动效开发的成本。

这篇文章会大致讲解一下各个核心功能，对于其中的技术细节不会有很深入的讲解，会在之后通过其他的文章再详细分析。

1.动效的准入与准出

在动效的交付阶段，为了确保动效能够高质量地上线，我们同样实施了准入准出的管理机制，这一机制涵盖了动效资产的准入检测、单动效的性能准出检测以及多动效的性能集成测试三大关键环节。

动效资产的静态准入检测：

以上是 Vision 进行动效检测的一个大致流程，设计师使用 AE 等工具生产完动效后，需要把相应的产物导出后上传到 Vision 平台。首先，系统会对上传的入口文件进行初步校验，这包括检查文件的后缀名以及文件内容，以确保文件格式的正确性。这一步是确保后续检测能够顺利进行的基础。紧接着，系统会调用Vision的检测服务，对动效资产进行更为详尽的静态检测。

静态检测的目的有三个：

单动效的性能准出检测：

当设计师上传的动效通过静态检测，并在平台预览验收通过后，研发同学希望能尽快对动效的一些性能指标做验收，以防动效开发完成后，发现动效性能有问题再返工到生产环节。

此外，我们还根据公司稳定团队所设定的性能红线，为动效的准出环节增加了严格的校验机制。一旦某个动效的性能指标超出了预设的红线范围，系统将会立即向用户发出预警，提示其关注并优化该动效的性能表现。

多动效的性能集成测试：

对于多动效的集成测试，用户需要自主构建测试用例（Test Case），并在页面级别上执行检测。检测的项目与单动效性能测试时保持一致，以确保整体动效集成后的稳定性和性能表现。此外，鉴于不同设备性能差异对动效体验的影响，特别是在低端机上，为保证基本可用性，往往需要对动效进行降级处理。因此，在进行性能测试时，用户可以选择高端机和低端机进行有针对性的测试，并依据各自设备的性能特点设定不同的通过标准。通过这样的测试策略，我们能够更全面地评估动效在不同设备上的表现，确保其在各种环境下都能提供稳定且流畅的用户体验。

1.动效开发提效

统一的 Runtime 和格式转换工具

在日常动效需求的开发中，我们深刻体会到，该领域涉及的概念繁多且复杂，这对我们的开发工作构成了不小的挑战。其中，最为突出的有以下三个方面：

动效类型与工具繁多导致的研发选型难的问题

工具API差异带来的学习成本增加

动效格式转换工具的混乱使用风险

为了解决这些问题，我们需要建立更加清晰、系统的动效开发流程和选型标准，同时加强对各种工具和API的学习和培训，以及审慎选择和使用动效格式转换工具，确保动效开发的顺利进行和高质量交付。

针对动效开发中所遇到的诸多问题，我们采取了一系列创新措施，其中**最为核心的是开发了一个统一的Runtime环境。**这一环境在多个层面上发挥了关键作用，有效解决了选型困难、学习成本高以及格式转换混乱等问题。在适配层，我们通过适配器针对不同的开发工具提供了统一的 API，减少了选型和学习成本。在功能层，我们实现了动效类型的工具透明化。我们可以随时根据技术的发展替换最佳实践方案。在最上层的应用层，我们提供针对不同平台的组件、Cli，以便用户快速在项目中使用。

此外，针对格式转换的需求，我们提供了标准化的格式转换能力。我们确保导出的格式与我们的Runtime环境完全兼容。这种配套的编码和解码工具不仅提高了动效的兼容性和稳定性，还为用户提供了更多的灵活性和便利性。

动效内容的动态替换和动效代码生成

动效内容的动态替换：

先看一段动效：

在动效内容的实际应用中，我们经常会遇到需要将设计师导出的Lottie动效与业务数据相结合的场景。例如，动效中的文字、头像图片等可能需要根据服务端下发的动态数据进行实时更新。虽然理论上可以通过手动修改Bodymovin导出的JSON文件来实现这一需求，但在实际操作中却面临着两大难题：

修改成本高且易出错：并非所有开发者都熟悉Bodymovin的schema结构，因此手动修改JSON文件不仅成本高，而且容易引入错误。

Lottie数据不支持实时更改：原生的Lottie库并不支持在播放过程中实时更改动效数据。

为了解决这些问题，我们对lottie-web进行了深度定制和优化，实现了图层内容的动态替换功能。这一功能允许开发者在播放过程中实时替换文字图层的文字内容、图片图层的图片地址，甚至可以直接将某个图层替换为自定义的DOM元素。此外，为了支持更丰富的交互行为，还在图层上添加点击事件。

仅需两步即可完成具体操作：

1、用户在平台上选中图层后，就可以添加占位符：

2、使用 Runtime 提供的替换能力快速替换内容：

就可以做到使用动态的内容进行动效播放，极大减少了过去需要开发组件 + 动效内容的开发成本。

动效代码生成：

用 CSS 开发过贝塞尔曲线运动的读者可能会有体会，这类曲线运动效果实现起来还是比较困难的，因为无法直接用关键帧动画去实现。

类似的这类动效开发难题很多，而且不同水平的开发者还原程度也会有差异。那么我们想到，是不是可以通过系统直接生成代码的方式来解决这个问题？

答案是肯定的，我们系统提供了 Code Gen 的能力，设计师使用 Lottie 进行交付，Vision 会解析 Bodymovin 里的各种 transform 信息，并转换成动画代码片段。在平台上选中一个图层，用户可以复制使用。

例如这是一个复制了代码后实现的曲线运动效果。

这里我们还针对三种不同的场景，提供三种不同的代码生成方式：

通过平台提供的代码生成能力，就避免了人工对参数“翻译”不准确的问题，规避了开发者能力导致的差异。

以上便是 Vision 动效平台的设计思路和一些核心功能的分享，其中有很多功能还有很多值得分享的技术细节，后续会有更多的文章来讲解，欢迎大家关注。

- END -