動畫歷程之滾動的坑

asce1885 發布于2019-08-22 18:22 / 3044人閱讀

摘要：很多時候我們在上做動畫一般都是選擇滾動事件來觸發。而在移動端的瀏覽器或中，滾動事件的觸發頻率也是不同的。在中在視圖的滾動過程中，事件不會被觸發在滾動結束后，才會觸發和不受此影響。但是滾動觸發事件與滾動距離以及完成的時間有關。

很多時候我們在web上做動畫一般都是選擇滾動事件來觸發。因為動畫需要判斷是否處于視口內，或者是否到達某個臨界點。而滾動在不同的瀏覽器中，不同操作系統中的實現都有不同。這些就是我們需要注意的坑~

滾動的觸發頻率

在我們先入為主的思想中，我們總覺得滾動事件是每PX都會觸發。但是事實并非如此:
下面請看demo:

chrome 移動端滑動模擬，速度是比較慢速的滑動。

我們可以看到觸發的頻率并不是按像素的，在時間上，我們計算可得，間隔大致上是15ms-18ms。而這剛好是每秒60幀的頻率。
而在移動端的瀏覽器或webview中，滾動事件的觸發頻率也是不同的。

ios UIwebview (uc qq) 回調事件需要在滾動完成時觸發。

在 iOS UIWebViews中, 在視圖的滾動過程中，scroll 事件不會被觸發；在滾動結束后，scroll 才會觸發.  Safari 和 WKWebViews不受此bug影響。--MDN events/scroll

Android chrome

在我們滾動的時候，可以看到觸發頻率比PC上的高。

但是滾動觸發事件與滾動距離以及完成的時間有關。有些瀏覽器還有慣性滾動的處理，所以并不能一概而論說觸發一定是每秒60幀的頻率
只是想說明，滾動事件的觸發頻率不是按照PX

滾動的距離

element.scrollTop 屬性可以獲取或設置一個元素的內容垂直滾動的像素數

document.body.scrollTopchrome不適用

document.documentElement.scrollTop chrome適用

推薦獲取滾動值 document.body.scrollTop + document.documentElement.scrollTop 因為兩者只有一個生效

window.scrollY返回文檔在垂直方向已滾動的像素值。IE9不支持

滾動的模擬

因為滾動事件的兼容性，有一些曲線救國的模擬滾動出現啦，當然，會犧牲一定的性能。
在移動端有touch事件，包含：

touchstart

touchend

touchmove

touchcancel

方向和距離

通過監聽start,end事件。對開始和結束時pageX,pageY進行計算來判斷滾動的方向，并獲得滾動距離。

位置的移動

獲取方向和距離之后，我們就可以在touchmove的回調中通過requestAnimationFrame或setTimeout來設置觸發的頻率（時間間隔）。位置的移動通過改變元素的transform:translate來實現，之所以不使用left，是因為使用CSS3的位置變化會讓設備開啟硬件加速，性能比使用left高。

再說幾句 減少回調執行時間

因為滾動事件在大部分設備和瀏覽器中觸發的頻率十分高，所以我們可以通過節流處理來減少滾動事件中回調函數的執行次數。

減少回調中DOM操作

因為滾動事件的觸發很快，相對于DOM的操作是非常迅速的，所以在回調事件中如果對于DOM有很復雜的操作，這時候你會發現一些用戶體驗不好的現象，比如閃動，卡頓，位置抖動等....但是沒辦法，有時候要實現這個功能，也只有這一個辦法，哭唧唧~~

滾動動畫

有時我們需要做一個返回頂部，或者滾動到頁面中的位置的功能。這時候直接改變scrollTop，整個過程會非常的突兀，這時候我們可以通過Tween.js來實現滾動的ease,easein這些類型的動畫。
獻上代碼：

    // 二次方 緩速動畫 easeout模式
    /*
    * t {number} 開始時間
     * b {number} 開始位置
     * c {number} 結束位置
     * d {number} 結束時間
     */
    function QuadEaseOut(t, b, c, d) {
        return -c * (t /= d) * (t - 2) + b;
    }
    // 判斷是否有requestAnimationFrame
    if (!window.requestAnimationFrame) {
        requestAnimationFrame = function (fn) {
            setTimeout(fn, 17);
        };
    }
    
    /* 
     * target {string} 目標DOM的ID
     */
    function scrollAnimation(target) {
        var startPosition = document.documentElement.scrollTop + document.body.scrollTop;
        var toTarget = document.getElementById(target).offsetTop - startPosition;
        var endTimer = 400;
        var startTimer = 0;
        var step = function () {
            document.documentElement.scrollTop = QuadEaseOut(startTimer, startPosition, toTarget, endTimer);
            document.body.scrollTop = QuadEaseOut(startTimer, startPosition, toTarget, endTimer);
            startTimer += 20;
            if (startTimer <= endTimer) {
                // 繼續運動
                requestAnimationFrame(step);
            } else {
                // 動畫結束
            }
        };
        step();
    }

云服務器 GPU云服務器 js滾動條滾動動畫 jQuery滾動動畫看動畫學算法之:hashtable html頁面滾動動畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95779.html

動畫歷程之滾動的坑

摘要：很多時候我們在上做動畫一般都是選擇滾動事件來觸發。而在移動端的瀏覽器或中，滾動事件的觸發頻率也是不同的。在中在視圖的滾動過程中，事件不會被觸發在滾動結束后，才會觸發和不受此影響。但是滾動觸發事件與滾動距離以及完成的時間有關。很多時候我們在web上做動畫一般都是選擇滾動事件來觸發。因為動畫需要判斷是否處于視口內，或者是否到達某個臨界點。而滾動在不同的瀏覽器中，不同操作系統中的實現都有不...

Darkgel 2019-08-02 10:46 評論0 收藏0
動畫歷程之滾動的坑

摘要：很多時候我們在上做動畫一般都是選擇滾動事件來觸發。而在移動端的瀏覽器或中，滾動事件的觸發頻率也是不同的。在中在視圖的滾動過程中，事件不會被觸發在滾動結束后，才會觸發和不受此影響。但是滾動觸發事件與滾動距離以及完成的時間有關。很多時候我們在web上做動畫一般都是選擇滾動事件來觸發。因為動畫需要判斷是否處于視口內，或者是否到達某個臨界點。而滾動在不同的瀏覽器中，不同操作系統中的實現都有不...

Blackjun 2019-08-30 15:53 評論0 收藏0
vue(1)-學習歷程之vue解決jquery的什么痛點

摘要：解決的痛點首先我們需要明白和理解和的設計初衷和理念。所有框架要解決的問題應對需求變化，防止大面積重寫。參考文獻漸進式框架理解核心功能原理解析百度網盤視頻學習以及源碼資源提取密碼 vue解決jquery的痛點首先我們需要明白和理解jquery和vue的設計初衷和理念。 jquery官網給出的開篇介紹是，jquery是一個快，小，功能豐富的js庫，它讓html文檔遍歷和操作，事件處理...

zhaofeihao 2019-08-02 11:16 評論0 收藏0
指尖一點歌聲來--微信小程序之仿網易云音樂心得

摘要：為了提高自己，最近在學習微信小程序，選題是仿網易云音樂。查文檔發現，小程序中圖片加載完成后，有一個加載完成事件。前者在微信客戶端版本就不開始維護了，后者低版本需做兼容處理。目前還有一些功能暫未實現，會在以后繼續完善項目，繼續學習。為了提高自己，最近在學習微信小程序，選題是仿網易云音樂。期間踩過了大把的坑，bug出現的難受和解決bug歡喜，一直是伴隨我階段性學習這個項目的心情。初步完成...

KitorinZero 2019-08-22 11:18 評論0 收藏0