彻底解决动效开发痛点问题，优酷跨平台方案来了

一、背景

在优酷客户端开发的日常工作中，存在着大量动效场景需求，如 ToastView 显示与消失、页面推入的轨迹动效、Pop 弹出等。虽然 iOS、Android 都提供了多种友好的动效开发方案，但由于要进行大量的参数配置及调优，面对动效开发工作，大多数开发同学的第一反应是头疼。

动效设计需求产出后，在与研发对接过程中，存在如下一些问题：

1）同一动画，不同的开发人员实现的效果有差别；

2）同一动画，iOS 端和 Android 端实现的效果有差别；

3）Anticipate、Overshoot、Bounce 曲线，设计师无法提供准确参数给开发，实现出来的效果随机性强；

4）部分开发人员对系统自带曲线函数不熟悉，会导致降级应用线性或减速曲线，影响动态效果。

为了彻底解决上述痛点问题，优酷应用心中开发团队与设计团队共同研发推出了优酷跨平台动效解决方案——画眉，目的是从设计标准化、研发组件化、配置工具化三个方向，使得动效从设计-研发-验收-上线的全链路上实现统一、提效。

优酷跨平台动效方案，底层基于算法策略，后续会陆续开放源代码，对于广大的客户端场景动效快速上线，具有广泛的意义。

二、什么是画眉

“画眉”是一种小巧又灵动的鸟类，优酷动效跨平台解决方案以此取名，也因为方案本身的轻量化特性，业务方只需要通过极少量的代码接入，即可完成复杂的动效还原编码工作。

画眉-优酷跨平台动效解决方案由两部分构成：设计侧可视化动效编辑工具、研发侧跨平台 SDK，目标是彻底打通研发与设计链路，降低沟通成本，缩短验收周期，统一多端体验。

（图 1 画眉全链路保障）

三、技术方案

1. 架构路线

（图 2 画眉整体架构）

2. 技术实现

考虑到性能以及平台特性，在 iOS 端与 Android 端进行 SDK 策略落地时，均基于 AOP 的思想，提供了最为轻量化的技术方案。由于目前优酷客户端底层通过 OneService 提供服务， ThrushSDK 在优酷业务内落入 OneService 体系内，便于各业务的无缝接入。

1）iOS 端技术方案

SDK 接口层采用 Category 方案，通过 AOP 思想来简化调用复杂度。

CALayer + MotionCurveX 为 CALayer 的所有可动画属性，按照动效曲线能力提供支持，且在动画完成后，无需再次设置目标值。ThrushSDK 将常用的 7 种动效曲线，进行底层算法实现，使用者只需指定曲线枚举，即可实现标准化的动效。

（图 3 画眉动效曲线 iOS 端枚举定义）

底层 C 函数算法库，可以通过标准曲线实现代码来一探究竟，如图所示：

（图 4 标准曲线算法实现）

2）Android 端技术方案

为了降低 java 调用 C 的性能损耗，Android 端采用差值器 Interpolator 来实现曲线动效。

（图 5 画眉动效曲线 Android 端插值器）

3. 可视化动效编辑工具

1）功能架构

（图 6 功能架构示意图）

2）体感

（图 7 画眉动效曲线可视化编辑工具）

3）工具介绍

ThrushEditor 目前基于 iOS 平台开发，目标使用人群为动效设计师。编辑器对于动效创作最大的提效点在于：动效可视化预览、简化参数调优、动效代码导出。设计师在确认动效参数后，使用导出工具，一键导出 iOS | Android 代码，完成与开发工程师的无缝对接。

四、总结

画眉-优酷跨平台动效解决方案推出后，目前已经在优酷 APP 内多个场景投入使用，在双端体验上也完全达到了设计初的各项预期。

1. 优酷 APP 内场景落地

2. 近期规划

（图 8 画眉技术方案规划）

1）开源：由于画眉 SDK 本身是纯算法实现，没有任何底层库强依赖，因此，后续会推进画眉 SDK 以及可视化编辑工具的集团内开源及外部开源，让其能效在更大的场景发挥作用；

2）多平台：以 iOS、Android 双端的效果验证作为底座，针对其他业务同学的需求，画眉会推出针对 weex 及 H5 的解决方案，让更广泛的开发同学受益；

3）品牌化：画眉跨平台动效解决方案会与设计中台联动，以大文娱技术品牌的方式将标准化、模块化、工具化三位一体的整套策略进行行业宣发。

作者 | 阿里文娱无线开发专家 祁序