技术文章 | Weex Android 动画揭秘
来源:互联网 发布:软件架构 书籍 编辑:程序博客网 时间:2024/05/29 13:12
本文来源于阿里云-云栖社区,原文点击这里。
背景
在目前常见的交互方式中,动画扮演了一个重要的角色。
在 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 动画效果:
>>>展开全文
阅读全文
0 0
- 技术文章 | Weex Android 动画揭秘
- Weex Android 动画揭秘
- Weex Android初体验
- Weex Android交互篇
- Weex Android交互篇
- Weex Android交互篇
- Android项目集成Weex
- Android weex的使用
- android技术文章网址
- Android技术文章收集
- Android技术文章推荐
- android 最新技术文章
- Android开发技术文章整理
- Weex
- weex
- WEEX
- weex
- Weex Android SDK源码分析
- Java通过continue、break与标签实现Goto
- Android 突破 DEX 文件的 64K 方法数限制
- 前段就职要求
- Java8新特性之Collectors
- TabLayout中下划线宽度的更改
- 技术文章 | Weex Android 动画揭秘
- Ubuntu中修改grub重启出现 Memtest86 解决方法
- hdu 6134 素数打表一整套mark
- Codeforces Round #424 (Div. 2, rated, based on VK Cup Finals) E Cards Sorting
- InputStream的三个read的区别
- 关于SCRAPY运行多个SPIDER的问题
- PHP中的日期和时间函数
- Ant Trip HDU
- Vue 实现登录拦截(一)