當耐特

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

背景

公司師姐昨日在KM發了篇長文，主要結論RAF+transform3d就是不如transition+transform3d平滑流暢，但是transition+transform3d沒有translate屬性變更change回調，只有transitionend的事件回調。最后得出的解決方案：

支持動態切換 raf 和 transition~~

AlloyTouch在這個基礎上更加激進，直接支持change事件，不用用戶去關心RAF還是transition，也不用用戶去手動切換。那么是怎么做到了？往下看。

主要更新

AlloyTouch CSS版本已經支持change事件回調了

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

熊掌，change回調。以前使用CSS版本是無法監聽到dom的translate屬性變更change回調，只有transitionend的事件回調。

現在魚和熊掌可以兼得！

舉個例子

• 訪問DEMO你也可以點擊這里
• 源代碼可以點擊這里

這里就是使用CSS版本制作的，而且滾動過程中可以執行change回調，所以頭部的動畫都在在change回調里進行處理的。

原理分析

• 用戶touchstart的時候開啟RAF定時器
• 定時器一直計算讀取滾動元素的translate屬性，并拋給用戶傳入的change事件
• transitionend的時候關閉RAF定時器

對，就是這么簡單！

代碼分析

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

touchstart的時候會去觸發_start事件，先去cancelAnimationFrame取消掉當前的循環，再重新開啟一個，滾動點停。還可以看到，在不斷tick的過程中，change函數是一直會被執行，而且計算出的translate會傳給change回調。再看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]));
},

這里會通過getComputedStyle去計算出滾動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);
}
...

當觸發了_transitionEnd之后，會去清除定時器。這里需要注意，當用戶傳了step配置，會延遲400ms清除定時器，因為校正step的過程需要400ms。

Q&A

問：那么非CSS版本還有存在的意義嗎？
答：有的，因為非CSS不僅僅可以用于DOM,還能用于WebGL、Canvas，并且運動屬性無關。CSS版本沒有這些功能。

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

問：有沒有出React版本的計劃？
這個正在計劃當中，但是事實上，不是所有頁面都適合React，比如無限滾動，不使用React性能會更優。有的時候要在體驗最優和工程化最優做一個權衡，如果體驗達不到預期，要學會放棄工程化最優的方案。

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

開始AlloyTouch

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

任何意見和建議歡迎new issue，我們會第一時間反饋。