摘要：腦洞爆炸的背景最近開發(fā)項目動效開發(fā)越來越多部分動效需要在頁面滑動的時候執(zhí)行一定的效果但是發(fā)現(xiàn)在移動端很多時候頁面滑動的速度快的時候，動效呈現(xiàn)的不穩(wěn)定性越明顯，會不流暢雖然使用的過渡可以從視覺層面解決這個問題，但是并不能根治，于是乎想到了一個

最近開發(fā)項目動效開發(fā)越來越多 ；
部分動效需要在頁面滑動的時候執(zhí)行一定的效果；
但是發(fā)現(xiàn)在移動端 很多時候頁面滑動的速度快的時候 ， 動效呈現(xiàn)的不穩(wěn)定性越明顯 ， 會不流暢； 雖然使用css3的過渡可以從視覺層面解決這個問題 ， 但是并不能根治， 于是乎想到了一個方案。。。

h5新增的用于刷幀的api ， 大家可以網(wǎng)上找到很多相關(guān)教程 ， 用法及其簡單 ， 跟使用setTimeOut一樣； 此api的初衷本人理解為用于更好的執(zhí)行動畫 ， 而找到的一句話 “執(zhí)行渲染下一幀之前的動作”可能更好的幫助你理解這個api；

而之前說的移動端動畫不流暢的原因是因為快速滑動的時候 ， 兩次出發(fā)scroll之間的“間距”越來越大，而導(dǎo)致需要根據(jù)滑動計算的精度越來越不準 ， 我們當(dāng)然希望每滑動1px執(zhí)行一次scroll是最完美的啦～（雖然基本不可能）

于是乎 ， 想到了一個方案?！

可以在window.scroll開始的時候開啟RAF,在window.scroll結(jié)束的時候關(guān)閉RAF ， 所有需要執(zhí)行在scroll中的函數(shù)搬到RAF中執(zhí)行就好了

事實上實驗結(jié)果是成功的

每次window.scroll的時候在頁面插入一次scroll字樣 ， 每次raf執(zhí)行的時候插入raf字樣 ， 在保證一段scroll過程中只存在唯一一個RAF ， 輸出如上圖

事實證明 ios微信環(huán)境下 ， raf觸發(fā)的頻率在快速滑動頁面的時候確實高于scroll；

唯一的一個實現(xiàn)難點在于 scrollend如何監(jiān)聽

在每一次scroll的時候 ， 開啟一個50ms的定時器 ， 定時器認定為scroll結(jié)束 ， 但是每次滑動都創(chuàng)建定時器就亂套了 ， 所以要在創(chuàng)建定時器之前先清除定時器；

捋一下：

第一次scroll， 清除一個不存在的定時器 ， 然后創(chuàng)建定時器 ， 50ms之后執(zhí)行的就是scroll結(jié)束

第二次scroll ， 清除第一次創(chuàng)建的定時器 ， 創(chuàng)建一個定時器 ， 50ms之后執(zhí)行的就是scroll結(jié)束

。。。。

最后一次scroll ， 清除倒數(shù)第二次創(chuàng)建的定時器 ， 創(chuàng)建一個定時器 ， 由于沒有下一次scroll了 ， 那么這個定時器就真的是最后一次scroll了

于是通過這樣的方案迂回形成了scrollEnd ， 雖然有50ms的誤差～

然后代碼如下 ：

var rAF = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) { window.setTimeout(callback, 1000 / 60); };

var cancelRAF = window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
clearTimeout;


class BetterScroll {
constructor() {
    let sy = window.scrollY;
    this.onScroll = this.onScroll;
    this.onScrollEnd = this.onScrollEnd;
    this.scrollList = [];
    this.scrollEndList = [];
    this.scrollTimer = null;
    this.nowWsy = sy;
    this.lastY  =  sy;
    this.direction = 0;
    this.rafMark = null;
    this.rafingMark = false;
    this.gap = 0;
    this.bindEvent();
}
onScroll(cb) {
    if (typeof cb !== "function") {
        return;
    }
    this.scrollList.push(cb);
}
onScrollEnd(cb) {
    if (typeof cb !== "function") {
        return;
    }
    this.scrollEndList.push(cb);
}
scrollEnd() {
    let winInfo = {
        sy : this.nowWsy,
        gap : Math.abs(this.gap),
        dir : this.direction,
    }
    for (let i = 0, len = this.scrollEndList.length; i < len; i++) {
        try {
            this.scrollEndList[i](winInfo);
        } catch (error) {
            console.warn(error)
        }
    }
}
rafing() {
    this.nowWsy = window.scrollY;
    this.gap = this.nowWsy - this.lastY;
    // 1為向上滑動 -1 為向下滑動
    !!this.gap && (this.direction = (((this.gap >= 0) | 0 ) - 0.5) * 2);
    this.lastY = this.nowWsy;
    let winInfo = {
        sy : this.nowWsy, //當(dāng)前window的scrollY
        gap : Math.abs(this.gap), //上次到這次滑動的距離
        dir : this.direction,  ／／ 滑動方向
        
    }
    for (let i = 0, len = this.scrollList.length; i < len; i++) {
        try {
            this.scrollList[i](winInfo);
        } catch (error) {
            console.warn(error)
        }
    }

    this.startRaf();
}
startRaf() {
    let _this = this;
    this.rafMark = rAF(function () {
        _this.rafing();
    })
}
bindEvent() {
    let _this = this;
    window.addEventListener("scroll", function () {
        clearTimeout(_this.scrollTimer);

        if (!_this.rafingMark) {
            _this.startRaf();
            _this.rafingMark = true;
        }

        _this.scrollTimer = setTimeout(function () {
            cancelRAF(_this.rafMark);
            _this.scrollEnd();
            _this.rafingMark = false;
        }, 50);

    }, 0)
}
}

let btScroll = new BetterScroll();

export default btScroll;

用法 ：

組建拋出btScroll對象 ， 

提供兩個方法

btScroll.onScroll(callback);  window正在scrolling的函數(shù) ， 回調(diào)函數(shù)接受參數(shù) winInfo

btScroll.onScrollEnd(callback); window滑動結(jié)束的函數(shù) ， 回調(diào)函數(shù)接受參數(shù) winInfo


winInfo  ：  {
    sy : window的scrollY值,
    gap : 上一次scroll到這一次scroll之間的差值絕對值,
    dir : window的滑動方向 1為瀏覽器滾動條向下滾動 ， -1為瀏覽器滾動條向上滾動,
}

歡迎各位大大交流 ， 有更好的腦洞和哪里寫的不足的地方歡迎留言討論！