玩轉 H5 下拉上滑動效果

在APP中咱們常常會在頁面下拉時看到一些動效，例以下拉圖片跟隨放大、下拉刷新出現loading動畫等，這個交互細節在各個主流APP以及手機原生系統中隨處可見，能爲APP增添個性亮點。

1、背景

在咱們的平常項目中，也會遇到這樣的需求，在當前環境下，此類效果大可能是靠原生來實現的，可是用原生實現有很多缺陷，緣由以下：

• 原生實現週期長;
• 跨平臺實現成本高;
• 解決方案通用性差;
• 運用到現有項目改形成本高;

那麼咱們的H5頁面可否實現呢？下面和你們一塊兒來探索。

首先，咱們先來實現下拉banner圖放大的動效。效果相似於：

動效要求：當處於頂部頁面下拉時，banner圖跟隨放大，下拉結束時，banner圖還原回彈。

下拉動效能夠分解爲兩部分：

1. 頁面主體內容總體下滑滾動;
2. 頂部元素進行放大動效。

在以往，在H5實現頁面滾動效果是通常採用JS插件模擬滾動，例如：iScroll。但在這裏存在幾個問題：

• 對現有頁面的改造很是大，不適宜大範圍運用;
• 模擬滾動取代原生滾動會引起未知的bug;
• 在低端手機性能差，體驗不佳;

要解決這些問題，能夠採用以下方案：

1，保持頁面的原生滾動，只有在頂部下拉事件中，才觸發動效執行;
2，用JS拷貝DOM結構，使動效結構與頁面結構解耦，互不影響;

這樣下拉動效會相對更流暢並基本不影響頁面正常滾動。

2、技術實現

按照上面的技術方案實施，具體過程爲：

禁用頁面頂部下拉事件  ------>  將頁面的主體內容用一個DIV容器包含起來，同時複製須要放大處理的內容節點至主體內容以外  ------> 綁定頁面滑屏事件  ------> 計算滑屏偏移量以及縮放等數值的運算  ------> 根據變化數值主體內容transfrom下滑，同時複製的節點作放大動效處理  ------> 監聽滑屏事件結束，執行回彈動效，還原初始狀態

代碼節選片斷：

要點及說明：

一、禁用頁面頂部下拉事件：

該技術要點是阻止默認事件的下拉，從而將下拉事件綁定到咱們的動效中。阻止默認事件咱們通常能夠這樣子處理：

可是此方法有必定缺陷。首先他禁止了頁面的正常滑動，給頁面的形成了很多的干擾和麻煩；其次是在一些APP中的WebView中並不能根本上的阻止View的下拉，對頁面動效形成干擾。

這裏最好的一個處理方法是能夠在WebView的層面上去禁止頁面下拉。

二、需判斷滑屏方向，避免橫向滑動干擾下拉動效。公式計算：

X = 絕對值（當前座標X - 初始座標X）
Y = 絕對值（當前座標Y - 初始座標Y）

計算結果X大於Y，則爲橫向滑動，反之爲豎向滑動。

三、滑屏偏移量，縮放動效及下拉動效的數值公式計算

四、動效結束，慣性回彈動效

回彈效果是模擬慣性的曲線運動，由前面代碼片斷中的 to() 動畫函數完成。下面是曲線運動函數：

該方法來源於AlloyTouch組件。

五、存在的待優化問題：

滑屏動效與原生動效在細節上仍是有差異，具體算法有待更進一步的優化。

3、Demo效果演示

至此，頂部的banner圖放大的動效已經完成。

除了頂部的banner圖能夠這樣子玩，咱們還嘗試了更多花樣，例如頂部的slider輪播圖也增長下拉放大的動效。因爲這裏的結構更爲複雜，且slider輪播圖的內容會改變的，所以放大動效部分的內容也須要保持更換。實現後的效果以下：

注：由於部分安卓性能較差，會影響動畫效果，此效果在IOS手機體驗效果更佳。

另外，除了在現有元素上作動畫，咱們也能夠下拉時增長一些有趣的元素，例如彩蛋、品牌元素等，實現方法與上面一致，只是不須要拷貝DOM結構那一步，而是直接寫一個須要執行動效的DOM結構。實現後的效果以下：

4、除了下拉動效還能作上滑動效嗎？

前面咱們已經實現了下拉動效，那麼咱們是否能夠繼續擴散思路，也能夠用在別的場景呢？好比咱們在頁面滑到底部時能夠拉出一個有趣的動畫做爲彩蛋。

答案是確定的，Do it！

技術方案與實現

這裏下拉動效與上滑動效實現原理基本一致，但不一樣的是須要監聽頁面滾動到底部，而後再觸發動效。

部分代碼以下：

最後的演示效果演示以下：

5、總結

在體驗至上的現今，咱們的產品對體驗更是精益求精。面臨不一樣的產品需求，咱們須要正確選擇恰當的技術解決方案，不論是原生開發、H5開發、仍是Hybrid App混合開發，其最終的目的是完美的解決產品需求，沒有最好的技術，只有最佳的技術解決方案。