AlloyTouch 0.2.0發(fā)布--魚和熊掌兼得

shevy 發(fā)布于2019-08-30 13:17 / 1958人閱讀

摘要：主要更新版本已經(jīng)支持事件回調(diào)了魚和熊掌兼得慢，什么是魚什么是熊掌魚，性能。讀取當(dāng)觸發(fā)了之后，會(huì)去清除定時(shí)器。這里需要注意，當(dāng)用戶傳了配置，會(huì)延遲清除定時(shí)器，因?yàn)樾Ｕ倪^程需要。

原文鏈接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-0.2.0

背景

公司師姐昨日在KM發(fā)了篇長文，主要結(jié)論RAF+transform3d就是不如transition+transform3d平滑流暢，但是transition+transform3d沒有translate屬性變更c(diǎn)hange回調(diào)，只有transitionend的事件回調(diào)。最后得出的解決方案：

支持動(dòng)態(tài)切換 raf 和 transition~~

AlloyTouch在這個(gè)基礎(chǔ)上更加激進(jìn)，直接支持change事件，不用用戶去關(guān)心RAF還是transition，也不用用戶去手動(dòng)切換。那么是怎么做到了？往下看。

主要更新

AlloyTouch CSS版本已經(jīng)支持change事件回調(diào)了

魚和熊掌兼得！慢，什么是魚？什么是熊掌？
魚，性能。由于RAF+transform3d就是不如transition+transform3d平滑流暢。CSS版本在處理DOM局部滾動(dòng)的時(shí)候明顯更加smooth。

熊掌，change回調(diào)。以前使用CSS版本是無法監(jiān)聽到dom的translate屬性變更c(diǎn)hange回調(diào)，只有transitionend的事件回調(diào)。

現(xiàn)在魚和熊掌可以兼得！

舉個(gè)例子

訪問DEMO你也可以點(diǎn)擊這里

源代碼可以點(diǎn)擊這里

這里就是使用CSS版本制作的，而且滾動(dòng)過程中可以執(zhí)行change回調(diào)，所以頭部的動(dòng)畫都在在change回調(diào)里進(jìn)行處理的。
注意，這里只是個(gè)DEMO頁面，用來展示頭部的動(dòng)畫，底部顯示正在加載中是加載不出來數(shù)據(jù)的，所以不用等待了。

原理分析

用戶touchstart的時(shí)候開啟RAF定時(shí)器

定時(shí)器一直計(jì)算讀取滾動(dòng)元素的translate屬性，并拋給用戶傳入的change事件

transitionend的時(shí)候關(guān)閉RAF定時(shí)器

對，就是這么簡單！

代碼分析

...
...
_start: function (evt) {
    cancelAnimationFrame(this.tickID);
    this._tick();
...
...
_tick: function () {
    this.change.call(this, this.getComputedPosition());
    this.tickID = requestAnimationFrame(this._tick.bind(this));
},
...

touchstart的時(shí)候會(huì)去觸發(fā)_start事件，先去cancelAnimationFrame取消掉當(dāng)前的循環(huán)，再重新開啟一個(gè)，滾動(dòng)點(diǎn)停。還可以看到，在不斷tick的過程中，change函數(shù)是一直會(huì)被執(zhí)行，而且計(jì)算出的translate會(huì)傳給change回調(diào)。再看getComputedPosition：

getComputedPosition: function () {
    var matrix = window.getComputedStyle(this.scroller, null);
    matrix = matrix[transform].split(")")[0].split(", ");
    return this.vertical ? (+(matrix[13] || matrix[5])) : (+(matrix[12] || matrix[4]));
},

這里會(huì)通過getComputedStyle去計(jì)算出滾動(dòng)DOM的matrix，然后提取出translate出來。

讀取

...
...
if (this.step) {
    this.correction();
    if (this._endCallbackTag) {
        this._endTimeout = setTimeout(function () {
            this.animationEnd.call(this, current);
            cancelAnimationFrame(this.tickID);
        }.bind(this), 400);
        this._endCallbackTag = false;
    }
} else {
    this.animationEnd.call(this, current);
    cancelAnimationFrame(this.tickID);
}
...

當(dāng)觸發(fā)了_transitionEnd之后，會(huì)去清除定時(shí)器。這里需要注意，當(dāng)用戶傳了step配置，會(huì)延遲400ms清除定時(shí)器，因?yàn)樾Ｕ齭tep的過程需要400ms。

Q&A

問：那么非CSS版本還有存在的意義嗎？
答：有的，因?yàn)榉荂SS不僅僅可以用于DOM,還能用于WebGL、Canvas，并且運(yùn)動(dòng)屬性無關(guān)。CSS版本沒有這些功能。

問：AlloyTouch如何做到這么小的尺寸？
答：AlloyTouch專注于數(shù)字的加速減速和回彈，抽象級別較高，而且適用場景較廣。

問：有沒有出React版本的計(jì)劃？
這個(gè)正在計(jì)劃當(dāng)中，但是事實(shí)上，不是所有頁面都適合React，比如無限滾動(dòng)，不使用React性能會(huì)更優(yōu)。有的時(shí)候要在體驗(yàn)最優(yōu)和工程化最優(yōu)做一個(gè)權(quán)衡，如果體驗(yàn)達(dá)不到預(yù)期，要學(xué)會(huì)放棄工程化最優(yōu)的方案。

問：AlloyTouch和transformjs什么關(guān)系？
沒有關(guān)系。AlloyTouch專注于觸摸和運(yùn)動(dòng)，transformjs提供DOM和任意對象transformation能力以及一些基礎(chǔ)工具函數(shù)。
但是建議一起使用。這里需要注意的是，CSS版本的AlloyTouch強(qiáng)制必須和transformjs一起使用。

開始AlloyTouch

Github：https://github.com/AlloyTeam/AlloyTouch

任何意見和建議歡迎new issue，我們會(huì)第一時(shí)間反饋。