使用BindingX開發客戶端炫酷動畫

時間 2019-11-29

標籤使用 bindingx 開發客戶端動畫简体版

原文原文鏈接

Weex 是一套簡單易用的跨平臺開發方案，能以 web 的開發體驗構建高性能、可擴展的 native 應用，爲了作到這些，Weex 與 Vue 合做，使用 Vue 做爲上層框架，並遵循 W3C 標準實現了統一的 JSEngine 和 DOM API，這樣一來，你甚至可使用其餘框架驅動 Weex，打造三端一致的 native 應用。前端

簡介

基本概念

爲了方便使用 BindingX ，開發者須要理解如下幾個概念：表達式、事件類型、屬性變換。git

表達式

表達式，是由數字、運算符、變量等以能求得數值的有意義排列方法所得的組合。譬如, x*3+10 就是一個表達式，當x被賦值時，整個表達式就會有一個明確的結果。經過表達式，咱們就能夠描述一個具體的交互行爲，好比咱們但願x從0變化到100時，透明度能從1變化到0.5，那麼表達式能夠描述爲: f(alpha) = 1-(x/100)*0.5。在 BindingX 中，咱們實現了一個輕量的表達式解析引擎用於執行表達式，除了基本的四則運算外，還支持三元運算符、數學函數等高級語法，可以知足絕大部分的場景。要查看 BindingX 中支持的表達式語法，請參考《支持的表達式語法》github

事件類型

如今你已經知道了 BindingX 是經過表達式來描述交互行爲的，那麼表達式中的變量到底是什麼呢？答案是"不一樣的事件類型擁有不一樣的表達式變量"！那什麼是事件類型呢？在 BindingX 中，事件是指可以驅動表達式數值變化的數據產生者，好比"用戶的手勢"、"列表的滾動" 甚至是"陀螺儀感知到的方向變化"，每一種這樣的事件都對應着惟一的事件類型，好比"手勢"對應的事件類型就是 pan ，要查看 BindingX 支持的全部事件類型，請參考文檔: 《支持的事件類型》。同時，每一種事件類型都對應着不一樣的表達式變量。好比，當事件類型爲 pan 時，表達式變量就是x和y，分別表明手勢過程當中橫向和縱向的偏移量。web

屬性變換

表達式的執行結果最終會驅動UI變化，好比透明度、位移、背景色等，屬性變換就是用來描述這些屬性的。在 BindingX 中，支持經常使用的transform屬性變換，如translation、scale ，另外還包括透明度、寬高等屬性。要查看全部支持的屬性變換，請參考文檔：《支持的屬性》。express

背景與原理

在Weex環境下實現一些複雜的手勢交互效果可能會產生卡頓，這是由於每次手勢交互都會產生兩次js-native通訊。第一次是native call js，將手勢事件傳遞到js層交給前端處理，當js層接收到回調後，會產生第二次通訊，js call native，用來驅動界面變化。與此同時，手勢回調事件觸發的頻率是很是高的，頻繁通訊帶來的時間成本極可能致使界面沒法在16ms中完成繪製，於是產生卡頓。下面是傳統方案的示意圖： npm

基於此，Weex的基礎團隊提出了Expression Binding的方式來進行通訊。具體來講，就是在手勢開始的時候，將具體的手勢控制函數以表達式的形式傳遞給Native層，當手勢發生時，Native根據預置的表達式解析器去解釋執行表達式，並根據結果驅動視圖變化。這樣帶來的好處是大大的減小了native-js的通訊次數，下面是一個原理模型圖。

事實上，Expression Binding 不只僅能夠解決手勢交互問題，任何js-native頻繁通訊+UI更新的場景理論上均可以複用這套方案。好比：

監聽容器的滾動，並基於滾動距離等變量更新UI如最多見的視差動畫等；
監聽陀螺儀方向變化數據，並更新UI；
監聽時間變化，更新UI；

所以，咱們將原方案進行了橫向的擴展，實現了這些新的特性，並將它命名爲BindingX。2018年三月，BindingX正式開源，並同時支持了React Native。

功能一覽

使用BindingX能夠實現諸多負責的功能，主要有複雜動畫、陀螺儀、吸頂燈效果。api

手勢監聽

BindingX可以監聽元素的pan事件，基於此能夠實現拖拽、卡片橫滑等跟手的交互效果。更使人驚喜的是，相似weex Slider這樣的組件如今也可使用BindingX來實現。 bash

動畫

在weex上實現動畫一般的作法是使用animation module，如今有了新的選擇。使用BindingX能夠實現全部animation module能實現的效果，另外，BindingX內置了30多組常見的插值器，能夠自由選擇，固然也可使用cubicBezier貝塞爾曲線定製插值器，而且這些效果還支持在RN中使用。weex

##陀螺儀 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會經過預置的解析器來解析表達式樹，並計算出結果，根據結果去驅動視圖進行改變。