基于BindingX的富交互解决方案

BindingX官网: https://alibaba.github.io/bindingx/
BindingX项目地址: https://github.com/alibaba/bindingx

一. 背景

在Weex环境下实现一些复杂的手势交互效果可能会产生卡顿，这是因为每次手势交互都会产生两次js-native通信。第一次是native call js，将手势事件传递到js层交给前端处理，当js层接收到回调后，会产生第二次通信，js call native，用来驱动界面变化。与此同时，手势回调事件触发的频率是非常高的，频繁通信带来的时间成本很可能导致界面无法在16ms中完成绘制，因而产生卡顿。

我们提出了Expression Binding方案用来解决这个问题。方案是在手势开始的时候，将具体的手势控制函数以表达式的形式传递给Native层，当手势发生时，Native根据预置的表达式解析器去解释执行表达式，并根据结果驱动视图变化。这样带来的好处是大大的减少了native-js的通信次数，下面两幅图描述了传统方案与Expression Binding方案的差别:

图1: 传统方案 图2: Expression Binding方案

事实上，Expression Binding 不仅仅可以解决手势交互问题，任何js-native频繁通信+UI更新的场景理论上都可以复用这套方案。比如:

1. 监听容器的滚动，并基于滚动距离等变量更新UI如最常见的视差动画等；
2. 监听陀螺仪方向变化数据，并更新UI；
3. 监听时间变化，更新UI；
4. ...

BindingX的输入与输出

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

二. 特性一览

1. 手势能力

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

示例: 可拖拽的卡片
示例: 可拖拽的小球
示例: Slider横滑

2. 动画

在weex上实现动画通常的做法是使用animation module，现在有了新的选择。使用BindingX可以实现所有animation module能实现的效果，另外，BindingX内置了30多组常见的插值器，可以自由选择，当然也可以使用cubicBezier贝塞尔曲线定制插值器。

示例: BindingX动画与手势结合
示例: BindingX菜单动画

3. 陀螺仪

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

示例: bindingx陀螺仪的使用场景
示例: bindingx陀螺仪的使用场景

4. 列表滚动监听

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

示例: 基于BindingX的视差动画
示例: 基于BindingX的视差效果

三. 使用方式

BiningX同时支持ReactNative和Weex，对于Weex来说不管你是使用Rax还是Vue DSL，都没有关系。下面以Weex举例来说明如何使用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自行消费先前绑定的所有表达式，计算结果，并根据结果对视图进行更新。

这个过程可以用下面这张图描述:

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

五. 更多想象力

事实上，BindingX比我们想象的更加强大，在上面那张架构图中，输出部分画的是transformed view，但是事实上除了view，我们还在探索更多有趣的玩法，比如:

• BindingX和Lottie结合。用bindingX驱动lottie实现动画；
• BindingX和Weex SVG结合，实现好玩的轨迹动画、路径跟随动画，甚至是morph变形动画;
• BindingX和Shader结合，用BindingX来控制着色器!
• ......

六. 下一步?

BindingX在内部经过很长时间的孵化，在上层衍生出了很多通用的业务组件，它们涵盖了大部分的交互场景，诸如下拉刷新、转场、联动、视差动画，tab-panel、parallax就是很好的例子。一个基于BindingX的前端交互体系正在成型，下一步我们会将它们逐渐开源到社区，敬请期待!