使用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中完成绘制，于是产生卡顿。下面是传统方案的示意图：

基于此，Weex的基础团队提出了Expression Binding的方式来进行通讯。具体来讲，就是在手势开始的时候，将具体的手势控制函数以表达式的形式传递给Native层，当手势发生时，Native根据预置的表达式解析器去解释执行表达式，并根据结果驱动视图变化。这样带来的好处是大大的减小了native-js的通讯次数，下面是一个原理模型图。

事实上，Expression Binding 不只仅能够解决手势交互问题，任何js-native频繁通讯+UI更新的场景理论上均可以复用这套方案。好比：

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

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

功能一览

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

手势监听

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

动画

在weex上实现动画一般的作法是使用animation module，如今有了新的选择。使用BindingX能够实现全部animation module能实现的效果，另外，BindingX内置了30多组常见的插值器，能够自由选择，固然也可使用cubicBezier贝塞尔曲线定制插值器，而且这些效果还支持在RN中使用。

##陀螺仪 BindingX内置了陀螺仪监听器，能够监听设备方向变化。这在不少富交互场景中很是实用，好比在手机淘宝里，你能够看到不少基于陀螺仪的视差效果。

列表滚动监听

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

使用简介

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自行消费先前绑定的全部表达式，计算结果，并根据结果对视图进行更新。

整个过程能够用下面这张图描述：

在这个模型里，输入能够是手势事件、滚动事件、陀螺仪方向变化事件，而输出则是通过视图变换的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正在作相关的升级，目的是在性能渲染和接入方面更加人性化。