首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

基于 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 中完成绘制,因而产生卡顿。

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

图 1:传统方案

图 2:Expression Binding 方案

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

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

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

监听时间变化,更新 UI;

......

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

二. 特性一览

1. 手势能力

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

2. 动画

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180531G0Y8FA00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券