動畫歷程之滾動的坑

asce1885 發(fā)布于2019-08-22 18:22 / 3053人閱讀

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

很多時候我們在web上做動畫一般都是選擇滾動事件來觸發(fā)。因?yàn)閯赢嬓枰袛嗍欠裉幱谝暱趦?nèi)，或者是否到達(dá)某個臨界點(diǎn)。而滾動在不同的瀏覽器中，不同操作系統(tǒng)中的實(shí)現(xiàn)都有不同。這些就是我們需要注意的坑~

滾動的觸發(fā)頻率

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

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

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

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

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

Android chrome

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

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

滾動的距離

element.scrollTop 屬性可以獲取或設(shè)置一個元素的內(nèi)容垂直滾動的像素數(shù)

document.body.scrollTopchrome不適用

document.documentElement.scrollTop chrome適用

推薦獲取滾動值 document.body.scrollTop + document.documentElement.scrollTop 因?yàn)閮烧咧挥?strong>一個生效

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

滾動的模擬

因?yàn)闈L動事件的兼容性，有一些曲線救國的模擬滾動出現(xiàn)啦，當(dāng)然，會犧牲一定的性能。
在移動端有touch事件，包含：

touchstart

touchend

touchmove

touchcancel

方向和距離

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

位置的移動

獲取方向和距離之后，我們就可以在touchmove的回調(diào)中通過requestAnimationFrame或setTimeout來設(shè)置觸發(fā)的頻率（時間間隔）。位置的移動通過改變元素的transform:translate來實(shí)現(xiàn)，之所以不使用left，是因?yàn)槭褂肅SS3的位置變化會讓設(shè)備開啟硬件加速，性能比使用left高。

再說幾句 減少回調(diào)執(zhí)行時間

因?yàn)闈L動事件在大部分設(shè)備和瀏覽器中觸發(fā)的頻率十分高，所以我們可以通過節(jié)流處理來減少滾動事件中回調(diào)函數(shù)的執(zhí)行次數(shù)。

減少回調(diào)中DOM操作

因?yàn)闈L動事件的觸發(fā)很快，相對于DOM的操作是非常迅速的，所以在回調(diào)事件中如果對于DOM有很復(fù)雜的操作，這時候你會發(fā)現(xiàn)一些用戶體驗(yàn)不好的現(xiàn)象，比如閃動，卡頓，位置抖動等....但是沒辦法，有時候要實(shí)現(xiàn)這個功能，也只有這一個辦法，哭唧唧~~

滾動動畫

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

    // 二次方 緩速動畫 easeout模式
    /*
    * t {number} 開始時間
     * b {number} 開始位置
     * c {number} 結(jié)束位置
     * d {number} 結(jié)束時間
     */
    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} 目標(biāo)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) {
                // 繼續(xù)運(yùn)動
                requestAnimationFrame(step);
            } else {
                // 動畫結(jié)束
            }
        };
        step();
    }

云服務(wù)器 GPU云服務(wù)器 js滾動條滾動動畫 jQuery滾動動畫看動畫學(xué)算法之:hashtable html頁面滾動動畫

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95779.html

發(fā)表評論

登陸后可評論

0條評論

asce1885

男|高級講師

我要關(guān)注我要私信

TA的文章

攜程一面：分布式配置系統(tǒng)Apollo如何實(shí)時更新配置的?

閱讀 2377·2021-11-22 14:56
Will it finally: 關(guān)于 try/catch 的一些細(xì)節(jié)

閱讀 1183·2019-08-30 15:55
前端框架Vue（9）——vue 中如何對公共css、 js 方法進(jìn)行單文件統(tǒng)一管理，全局調(diào)用

閱讀 3215·2019-08-29 13:29
使用 hooks 和 connect 訪問同一個 store

閱讀 1366·2019-08-26 13:56
拖拽參考線及吸附工具react-dragline

閱讀 3511·2019-08-26 13:37
My Javascript Snippets

閱讀 568·2019-08-26 13:33
JS的類型復(fù)盤

閱讀 3356·2019-08-26 13:33
JS基礎(chǔ)——call、bind、apply 和 this

閱讀 2237·2019-08-26 13:33

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

動畫歷程之滾動的坑

相關(guān)文章