使用BindingX开发客户端炫酷动画

举报
Tracy 发表于 2019/10/15 14:44:11 2019/10/15
【摘要】 Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能、可扩展的 native 应用,为了做到这些,Weex 与 Vue 合作,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,这样一来,你甚至可以使用其他框架驱动 Weex,打造三端一致的 native 应用。简介基本概念为了方便使用 BindingX ,开发者需要理解...

Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能、可扩展的 native 应用,为了做到这些,Weex 与 Vue 合作,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,这样一来,你甚至可以使用其他框架驱动 Weex,打造三端一致的 native 应用。

简介

基本概念

为了方便使用 BindingX ,开发者需要理解以下几个概念:表达式 、 事件类型 、 属性变换。

表达式

表达式,是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合。譬如, x*3+10 就是一个表达式,当x被赋值时,整个表达式就会有一个明确的结果。通过表达式,我们就可以描述一个具体的交互行为,比如我们希望x从0变化到100时,透明度能从1变化到0.5,那么表达式可以描述为: f(alpha) = 1-(x/100)*0.5。 
在 BindingX 中,我们实现了一个轻量的表达式解析引擎用于执行表达式,除了基本的四则运算外,还支持三元运算符、数学函数等高级语法,能够满足绝大部分的场景。要查看 BindingX 中支持的表达式语法,请参考《支持的表达式语法》

事件类型

现在你已经知道了 BindingX 是通过表达式来描述交互行为的,那么表达式中的变量究竟是什么呢? 答案是”不同的事件类型拥有不同的表达式变量”!那什么是事件类型呢?在 BindingX 中,事件是指能够驱动表达式数值变化的数据产生者,比如”用户的手势”、”列表的滚动” 甚至是”陀螺仪感知到的方向变化”,每一种这样的事件都对应着唯一的事件类型,比如”手势”对应的事件类型就是 pan ,要查看 BindingX 支持的所有事件类型,请参考文档: 《支持的事件类型》。 
同时,每一种事件类型都对应着不同的表达式变量。比如,当事件类型为 pan 时,表达式变量就是x和y,分别代表手势过程中横向和纵向的偏移量。

属性变换

表达式的执行结果最终会驱动UI变化,比如透明度、位移、背景色等, 属性变换 就是用来描述这些属性的。在 BindingX 中,支持常用的transform属性变换,如translation、scale ,另外还包括透明度、宽高等属性。要查看所有支持的属性变换,请参考文档:《支持的属性》

背景与原理

在Weex环境下实现一些复杂的手势交互效果可能会产生卡顿,这是因为每次手势交互都会产生两次js-native通信。第一次是native call js,将手势事件传递到js层交给前端处理,当js层接收到回调后,会产生第二次通信,js call native,用来驱动界面变化。与此同时,手势回调事件触发的频率是非常高的,频繁通信带来的时间成本很可能导致界面无法在16ms中完成绘制,因而产生卡顿。下面是传统方案的示意图: 
1.png基于此,Weex的基础团队提出了Expression Binding的方式来进行通信。具体来说,就是在手势开始的时候,将具体的手势控制函数以表达式的形式传递给Native层,当手势发生时,Native根据预置的表达式解析器去解释执行表达式,并根据结果驱动视图变化。这样带来的好处是大大的减少了native-js的通信次数,下面是一个原理模型图。 
2.png事实上,Expression Binding 不仅仅可以解决手势交互问题,任何js-native频繁通信+UI更新的场景理论上都可以复用这套方案。比如:

  • 监听容器的滚动,并基于滚动距离等变量更新UI如最常见的视差动画等;

  • 监听陀螺仪方向变化数据,并更新UI;

  • 监听时间变化,更新UI;

3.png因此,我们将原方案进行了横向的扩展,实现了这些新的特性,并将它命名为BindingX。2018年三月,BindingX正式开源,并同时支持了React Native。

功能一览

使用BindingX可以实现诸多负责的功能,主要有复杂动画、陀螺仪、吸顶灯效果。

手势监听

BindingX能够监听元素的pan事件,基于此可以实现拖拽、卡片横滑等跟手的交互效果。更令人惊喜的是,类似weex Slider这样的组件现在也可以使用BindingX来实现。 
4.gif



动画

在weex上实现动画通常的做法是使用animation module,现在有了新的选择。使用BindingX可以实现所有animation module能实现的效果,另外,BindingX内置了30多组常见的插值器,可以自由选择,当然也可以使用cubicBezier贝塞尔曲线定制插值器,并且这些效果还支持在RN中使用。 
7.gif



陀螺仪

BindingX内置了陀螺仪监听器,可以监听设备方向变化。这在很多富交互场景中非常实用,比如在手机淘宝里,你可以看到很多基于陀螺仪的视差效果。 

列表滚动监听

BindingX能够监听列表等滚动容器的onScroll事件,通过它可以实现酷炫的视差动画。 
10.gif


使用简介

BiningX同时支持ReactNative和Weex,对于Weex来说不管你是使用Rax还是Vue DSL,都没有关系。下面以Weex举例来说明如何使用BindingX。

接入BindingX

第一步: 安装依赖

安装npm依赖。

npm install weex-bindingx --save

然后在JS代码中引入BindingX模块。

import BindingX from weex-bindingx;

第二步: 编写表达式

根据业务场景,选择您需要的EventType。 比如,要监听手势,evenType值为pan,监听滚动容器scrollOffset变化,eventType值为scroll。

根据交互行为,选择要改变的属性,并编写相应的表达式。比如,交互行为是”用户横滑100单位,透明度从1变化到0”。则属性为”opacity”,表达式为”1-x/100”。

第三步: 绑定表达式

根据第二步得到的eventType、Expression以及Property,调用 BindingX 模块的 bind 方法,完成绑定。例如:

let result = BindingX.bind({   
 eventType: 'pan',      ==> 事件类型   
 anchor: 'foo',          ==> anchor指的是事件的触发者,如果是eventType是"orientation"或"timing",则不用填    
 props: [
        {           
         element: view.ref,    ==> 要改变的视图的引用或者id           
         expression: "1-x/100", ==> 表达式           
         property: "opacity"    ==> 要改变的属性
        }
    ]
})

当调用bind方法之后,Native会启动监听,当目标事件(比如手指滑动、设备方向变化等)发生的时候,便会执行您先前绑定的一组或者多组表达式。 bind 方法会返回一个JS对象,其中包含了一个 token 属性,可以使用这个token取消绑定。

第四步: 取消绑定

在合适的时机调用 BindingX 的unbind方法取消绑定。比如,页面不可见或者即将销毁的时候。

BindingX.unbind({    
token: result.token,
eventType: 'pan'
})

实现细节

下面以Android为例从Native的视角介绍下BindingX的具体实现,首先我们来梳理整个流程:

1,前端通过声明的方式定义具体的视图变化,每个视图变化过程都用一个三元组描述:

  • element: 目标元素。

  • property: 要改变的属性。

  • expression: 表达式。通过工具生成抽象语法树。

2,Native根据EventType注册对应的事件监听器,并将映射关系保存起来; 
3,当指定的事件发生的时候,Native自行消费先前绑定的所有表达式,计算结果,并根据结果对视图进行更新。

整个过程可以用下面这张图描述: 
12.jpg在这个模型里,输入可以是手势事件、滚动事件、陀螺仪方向变化事件,而输出则是经过视图变换的view,视图变换的过程在Native完成。而视图变换的规则是通过表达式来描述的,一个表达式在前端声明之后,会先通过parser转成Abstract syntax tree,Native会通过预置的解析器来解析表达式树,并计算出结果,根据结果去驱动视图进行改变。

其他

事实上,BindingX比我们想象的更加强大,在上面那张架构图中,输出部分画的是transformed view,但是事实上除了view,BindingX还可以完成更多有趣的事情。比如:

  • BindingX和Lottie结合。用bindingX驱动lottie实现动画;

  • BindingX和Weex SVG结合,实现好玩的轨迹动画、路径跟随动画,甚至是morph变形动画;

  • BindingX和Shader结合,用BindingX来控制着色器!

  • ……

目前,为了更了更好的体现开源精神,并且让更多的开发者使用Weex,Weex 的SDK正在做相关的升级,目的是在性能渲染和接入方面更加人性化。

本文转载自异步社区。

文链接:

https://www.epubit.com/articleDetails?id=Ndbc2b3a5-ac87-4461-b95c-3d6200224f92

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。