技术文章 | Weex Android 动画揭秘

本文来源于阿里云-云栖社区，原文点击这里。

背景

在目前常见的交互方式中，动画扮演了一个重要的角色。

在 Weex框架下，Weex 的动画需要屏蔽 CSS/JS 动画与 Android 动画系统的差异，并尽可能的达到60FPS。

本文阐述了在 Android 上实现高性能CSS/JS动画过程中所遇到的问题/相关数学知识及解决方案。本文使用的前端 DSL 为 Weex vue 1.0或 Weex Vue 2.0。

现状与问题

在 Weex 环境下， 一个典型的动画在前端DSL中的写法如下:

animation = weex.requireModule('animation')
animation.transition(testEl, {
    styles: {
        color: '#FF0000',
        transform: 'translate(250px, 100px) rotate(60deg)',
        transformOrigin: 'center center'
    },
    duration: 800, //ms
    timingFunction: 'ease',
    delay: 0 //ms
    }, function () {
        modal.toast({ message: 'animation finished.' })
})

对于上述代码片段，Weex Android需要处理下述问题。

transform 字段的解析

为了符合传统意义上的前端的书写习惯，transform 字段没有使用JSON表示，而是使用了一个字符串表示。在 transform 里，逗号前后可能没有空格，也可能有多个空格，transform里的函数名称和参数的数据类型也不确定，且面临后期需求变更的可能性。

对于复杂字符串的解析与处理，常见的方式是正则表达式。然而在此场景下使用正则表达式，面临如下困难：

• 正则表达式在 Android 下性能较差，对于每秒60帧，每帧对数百个元素做动画的场景，正则表达式将会成为整个动画模块的性能瓶颈。
• 正则表达式的可维护性很差，对于需求变更很不友好，经过需求变更及人员调整后，复杂的正则表达式往往无法维护，只能推导重写。

Android 动画方案的选择

在Android系统层面，存在Property Animation, View Animation, Drawable Animation三种动画体系，且三个体系互不兼容。Weex需要选择一个动画体系达到以下目的：

• 将前端指定的 styles(如transform，color)和 timing-function 以合理的方式映射到 Android 端。
• style 和 timing-function 对修改友好。
• 可以使用 Android 手机的 GPU 能力提高动画帧率。

3D动画的实现

支持 rotateX, rotateY 属性，实现如下的 3d 动画效果：

>>>展开全文