写点什么

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

  • 2020-05-07
  • 本文字数:1610 字

    阅读完需:约 5 分钟

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

一、背景

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


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


1)同一动画,不同的开发人员实现的效果有差别;


2)同一动画,iOS 端和 Android 端实现的效果有差别;


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


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


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


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

二、什么是画眉

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


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



(图 1 画眉全链路保障)

三、技术方案

  1. 架构路线



(图 2 画眉整体架构)


  1. 技术实现


考虑到性能以及平台特性,在 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 端插值器)


  1. 可视化动效编辑工具


1)功能架构



(图 6 功能架构示意图)


2)体感



(图 7 画眉动效曲线可视化编辑工具)


3)工具介绍


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

四、总结

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


  1. 优酷 APP 内场景落地


业务场景
首页搜索转场动效iOS|Android
语音搜索文案动画iOS|Android
热点弹性动效iOS|Android
个人中心消息气泡iOS|Android
播放页臻享切换动效iOS|Android


  1. 近期规划



(图 8 画眉技术方案规划)


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


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


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


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


2020-05-07 18:572453

评论

发布
暂无评论
发现更多内容

小红书冲上热搜,大家都听说了吗?

王中阳Go

Go 面试 小红书

benchANT 性能榜单技术解读 Part 2:查询优化

KaiwuDB

数据库 分布式多模

Topaz Video AI:一键提升视频画质,让回忆更清晰!

Rose

获取1688商品SKU信息API接口及实战应用

科普小能手

数据挖掘 数据分析 电商 API 接口 1688 API

什么是DNS缓存?DNS缓存有什么用?

国科云

HashData 数智一体化平台:践行「数据+AI」策略,助力企业释放数据价值

酷克数据HashData

Vector Magic for Mac:一键将图片转为矢量图,设计更高效!

Rose

【极致观影】Movist Pro:重新定义你的家庭影院体验!

Rose

人与AI协作的未来:共存还是竞争?

天津汇柏科技有限公司

AI 人工智能

2024央国企十佳上云典型案例,拿下!

天翼云开发者社区

云计算 AI 公有云 混合云 大模型

HarmonyOSNext 端云一体化(1)

万少

HarmonyOS NEXT

爆肝整理!一文带你吃透软件测试

测吧(北京)科技有限公司

测试

ELB UDP健康检查常见故障分析

天翼云开发者社区

云计算 网络协议 udp 弹性负载均衡

Byteman 使用指南(一)

FunTester

Commander One Mac:双窗口管理,文件操作新纪元!

Rose

HttpRunner 接口测试框架

测试人

软件测试

CST如何计算有匹配的多天线效率?CST软件代理

思茂信息

cst cst操作 CST软件

Sonarqube 代码分析技术体系

测试人

软件测试

【YashanDB知识库】ycm托管主机报错libnsl.so.1 no such file or directory

YashanDB

数据库 yashandb

Royal TSX for Mac:一站式远程管理利器,效率与安全并存的终极选择!

Rose

彻底解决动效开发痛点问题,优酷跨平台方案来了_文化 & 方法_阿里巴巴文娱技术_InfoQ精选文章