You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
source '[email protected]/CocoaPods/Specs.git'
platform :ios, '8.0' #最低8.0
#inhibit_all_warnings!
def common
pod 'WeexSDK', '0.17.0' #升级至 0.17.0
pod 'Weexplugin', :path=>'./Weexplugin/'
pod 'WXDevtool'
pod 'SDWebImage', '3.7.5'
pod 'SocketRocket', '0.4.2'
pod 'BindingX' #增加 BindingX
end
target 'WeexDemo' do
common
end
target 'WeexUITestDemo' do
common
end
前言
三月初,阿里巴巴开源的一套基于 Weex、React Native 的富交互解决方案 「BindingX」。提供了一种称之为 「Expression Binding」 的机制可以在 Weex、React Native 上让手势等复杂交互操作以60fps的帧率流畅执行,而不会导致卡顿,因而带来了更优秀的用户体验。
背景
我们知道,Weex 和 React Native 同样都是三层结构,「 JS 层、 Native 层、 Bridge 层」,Native 层负责视觉绘制、事件收集,JS 层负责视觉控制、事件处理,Bridge 层是 JS 层和 Native 层的沟通桥梁,负责指令「翻译」。以 Weex 为例:
想让 Native 层做一些复杂的交互操作时,JS 层就需要不停得处理从 Native 层收集来的事件然后作出「及时」响应,如果响应「不及时」就会导致视觉卡顿。
怎么样才算是「及时」呢?
我们常说 60fps 帧率是流畅的基础,这就意味着,一次有效的刷新需要在 1/60 s 内完成,如果 JS 层从事件接受、处理、回馈到 Native 绘制新的视图完成超过了 16.67ms 将会出现「视觉卡顿」。
另外,即使每一次更新都可以完全控制在 16.67ms 内,大量的通讯操作也会消耗掉过多的 CPU,以至于加大了 Crash 的风险
如果不突破这层瓶颈,此类技术将很难达到一个新的高度。
BindingX 就是解决这个问题的。
原理
BindingX 提出的 「Expression Binding」 将具体的手势控制行为以 「表达式」 的方式传递给 Native,监控「被绑定元素」上发生的手势操作并输出过程中横向「x」和纵向「y」的偏移量,因此我们即可将「x,y」作为表达式「f(x),f(y)」的入参,针对性的对某一目标元素的样式进行「绑定变化」。
而这所以操作都是在 Native 层独立完成的,大大减小了 JS 层和 Bridge 层的压力。
「无 Binding 模式」
「Binding 模式」
表达式
表达式,是由数字、运算符、变量等以能求得有意义数值的字符串。譬如,
x\*3+10
就是一个表达式,当x被赋值时,整个表达式就会有一个明确的结果。通过表达式,我们就可以描述一个具体的交互行为,比如我们希望x从0变化到100时,透明度能从1变化到0.5,那么表达式可以描述为:f(alpha) = 1-(x/100)*0.5
也可以是f(alpha) = 1-x/200
只不过第一种表达式更直白。下面举一个简单的例子。
就这么简单,几行代码即可绑定
foo_view
实现视图随手势移动的交互。当然复杂的也有,只不过都是由这么一个个小的交互堆积而成的。除了基本的四则运算外,还支持三元运算符、数学函数等高级语法,基本可以满足绝大部分的场景。
事件类型
前面的例子中用到了
pan
手势,除手势外,BindingX 还支持「列表的滚动scroll
」、「动画timing
」甚至是「陀螺仪感orientation
」,每种事件类型使用方式大致相同,也有注意点,详细请参阅《bindingx 官方文档》。Do it
playground
官方虽然也提供了 试验田 https://alibaba.github.io/bindingx/playground,但语法均为 Rax 但 DSL,并不少 Weex 对外的 Vue 版本,我们无法在线编辑查看效果,只能使用阿里系App「如淘宝、闲鱼、飞猪」扫码体验效果。
这些都不是我们想要的。
当然方法总是有的。
直接将 BindingX 的官方代码
clone
下来,上面有支持 Vue 版本的 Weex Playground。ios 和 android 选一个用工具安装到自己的手机上。此处就不多解释了,不会的问下 google,或者下方留言。
使用 http://dotwe.org/vue/ 在线编辑,扫码看效果。
给大家分享几个 Vue 版本的 demo。
http://dotwe.org/vue/e50f76a6c13337b6fa4201a045c5dc0c
http://dotwe.org/vue/2dff486956044ea59b3d38a2cf20b506
http://dotwe.org/vue/64998432f2a249f5cb35b4de0040526d
http://dotwe.org/vue/cd942c4bee9c4b7bcceda4e3aaf94c70
严选 demo 引入 BindingX
下面我基于严选的 Demo 进行的小试用。
升级 ios platform
要想使用 BindingX 插件,就必须使自己的 platform 支持。方法很简单,只需要将
platforms/ios/Podfile
进行升级修改即可。随后执行一遍
pod install
即可安装成功。如出现错误提示,按提示 fix 掉即可。小试牛刀
Vue 的引入方式不同于 Rax,需要使用
weex.requireModule()
API。实现的效果就是最常见的个人信息页,title 背景随着滚动事件变换大小。
效果动图 http://cdn.zwwill.com/yanxuan/resource/bindingx2.gif
写在最后
Weex 有了 BindingX 如虎添翼。效率更高性!能更稳定!同期开源的还有 GCanvas 也是一把神器。
近期工作繁重,通宵写文章,如发现文章残瑕处,敬请谅解!
相关链接
The text was updated successfully, but these errors were encountered: