国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

csRyan / 3489人閱讀

摘要：主要更新版本已經(jīng)支持事件回調(diào)了魚和熊掌兼得慢，什么是魚什么是熊掌魚，性能。讀取當觸發(fā)了之后，會去清除定時器。這里需要注意，當用戶傳了配置，會延遲清除定時器，因為校正的過程需要。

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

背景

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

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

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

主要更新

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

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

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

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

舉個例子

訪問DEMO你也可以點擊這里

源代碼可以點擊這里

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

原理分析

用戶touchstart的時候開啟RAF定時器

定時器一直計算讀取滾動元素的translate屬性，并拋給用戶傳入的change事件

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

這里會通過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);
}
...

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

Q&A

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

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

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

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

開始AlloyTouch

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/86668.html

相關(guān)文章

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

    摘要：主要更新版本已經(jīng)支持事件回調(diào)了魚和熊掌兼得慢，什么是魚什么是熊掌魚，性能。讀取當觸發(fā)了之后，會去清除定時器。這里需要注意，當用戶傳了配置，會延遲清除定時器，因為校正的過程需要。 原文鏈接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-0.2.0 背景 公司師姐昨日在KM發(fā)了篇長文，主要結(jié)論RAF+transform3d就...

    shevy 評論0 收藏0

  • 最近使用handsontable遇到的問題

    摘要：關(guān)于隱藏列的問題剛開始使用的百度當不需要顯示某一列的時候可用如下格式設(shè)置這里就不顯示第二列數(shù)據(jù)，只有第列數(shù)據(jù)，雖然隱藏了但是數(shù)據(jù)渲染不出來，還思索了個笨方法把最后一行隱藏但是確實挺蠢的，因為樣式空了一片表格不居中繼而去官網(wǎng)查看了找到了不支持 關(guān)于隱藏列的問題： 剛開始使用的1.百度：當不需要顯示某一列的時候可用如下格式設(shè)置： columns：[ {data:0}, {data:...

    浠ラ箍 評論0 收藏0

  • 前端開發(fā)篇——瀏覽器默認樣式及css初始化

    摘要：為什么要初始化建站老手都知道，這是為了考慮到瀏覽器的兼容問題，其實不同瀏覽器對有些標簽的默認值是不同的，如果沒對初始化往往會出現(xiàn)瀏覽器之間的頁面差異。當然，初始化樣式會對有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。 為什么要初始化css? 建站老手都知道，這是為了考慮到瀏覽器的兼容問題，其實不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器...

    luoyibu 評論0 收藏0

  • 前端開發(fā)篇——瀏覽器默認樣式及css初始化

    摘要：為什么要初始化建站老手都知道，這是為了考慮到瀏覽器的兼容問題，其實不同瀏覽器對有些標簽的默認值是不同的，如果沒對初始化往往會出現(xiàn)瀏覽器之間的頁面差異。當然，初始化樣式會對有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。 為什么要初始化css? 建站老手都知道，這是為了考慮到瀏覽器的兼容問題，其實不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器...

    dunizb 評論0 收藏0

  • 從根本出發(fā)，探索區(qū)塊鏈共識的四個階段

    摘要：狀態(tài)機模型區(qū)塊鏈用許多的節(jié)點共同模擬了一臺多復(fù)本的狀態(tài)機。區(qū)塊鏈共識的四個階段第一階段是加入共識加入共識階段決定了什么樣的節(jié)點可以參與共識協(xié)議。第四階段是退出共識這是常常被忽略的部分。 在接下來的秘猿科技小課堂里，我們會從技術(shù)角度、經(jīng)濟模型設(shè)計角度、以及共識角度來拆解 Nervos 加密經(jīng)濟網(wǎng)絡(luò)中，底層公鏈 CKB 的設(shè)計理念。而本文將會作為技術(shù)角度核心設(shè)計 Cell 模型的預(yù)備文章，...

    pekonchan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<