動(dòng)畫歷程之滾動(dòng)的坑

Darkgel 發(fā)布于2019-08-02 10:46 / 3451人閱讀

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

很多時(shí)候我們?cè)趙eb上做動(dòng)畫一般都是選擇滾動(dòng)事件來觸發(fā)。因?yàn)閯?dòng)畫需要判斷是否處于視口內(nèi)，或者是否到達(dá)某個(gè)臨界點(diǎn)。而滾動(dòng)在不同的瀏覽器中，不同操作系統(tǒng)中的實(shí)現(xiàn)都有不同。這些就是我們需要注意的坑~

滾動(dòng)的觸發(fā)頻率

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

chrome 移動(dòng)端滑動(dòng)模擬，速度是比較慢速的滑動(dòng)。

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

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

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

Android chrome

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

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

滾動(dòng)的距離

element.scrollTop 屬性可以獲取或設(shè)置一個(gè)元素的內(nèi)容垂直滾動(dòng)的像素?cái)?shù)

document.body.scrollTopchrome不適用

document.documentElement.scrollTop chrome適用

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

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

滾動(dòng)的模擬

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

touchstart

touchend

touchmove

touchcancel

方向和距離

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

位置的移動(dòng)

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

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

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

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

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

滾動(dòng)動(dòng)畫

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

    // 二次方 緩速動(dòng)畫 easeout模式
    /*
    * t {number} 開始時(shí)間
     * b {number} 開始位置
     * c {number} 結(jié)束位置
     * d {number} 結(jié)束時(shí)間
     */
    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)動(dòng)
                requestAnimationFrame(step);
            } else {
                // 動(dòng)畫結(jié)束
            }
        };
        step();
    }

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

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Darkgel

男|高級(jí)講師

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

TA的文章

騰訊云DNSPod解析套餐全面升配降價(jià),專業(yè)版99元/年,企業(yè)版免費(fèi)領(lǐng)取

閱讀 2975·2021-09-23 11:32
主機(jī)最早出現(xiàn)在什么時(shí)代-最早出現(xiàn)的計(jì)算機(jī)網(wǎng)絡(luò)是什么？

閱讀 2938·2021-09-22 15:12
基于VUE構(gòu)建做題H5組件【附源代碼】

閱讀 1719·2019-08-30 14:07
CSS中filter屬性的使用

閱讀 3461·2019-08-29 16:59
禁止用戶選擇的另一種思路（兼容 IE8）

閱讀 1651·2019-08-29 11:11
基于ServerLess的極簡(jiǎn)網(wǎng)頁計(jì)數(shù)器：源碼分析與實(shí)踐

閱讀 2314·2019-08-26 13:50
前端每日實(shí)戰(zhàn)：166# 視頻演示如何用 CSS 創(chuàng)作一個(gè) Safari LOGO

閱讀 2436·2019-08-26 13:49
js 工具函數(shù)

閱讀 2630·2019-08-26 11:49

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

資訊專欄INFORMATION COLUMN

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

動(dòng)畫歷程之滾動(dòng)的坑

相關(guān)文章