JavaScript中簡單的實現(xiàn)動畫緩存效果

mgckid 發(fā)布于2019-08-26 10:32 / 714人閱讀

摘要：動畫緩存函數(shù)要移動的目標元素要移動的目標位置每次移動的頻率先獲取要移動的元素判斷如果原本是否保存了計時器如果有的話就立刻清空重新啟動一個新的計時器開始計時器先獲取目標實際位置設置緩存速度每次對計算的數(shù)字進行取整防止因為精準不足而導致

/**

@description: 動畫緩存函數(shù)

@param {string} targetId - 要移動的目標元素 id

@param {number} targetPosition - 要移動的目標位置

@param {number} frequency - 每次移動的頻率

function move(targetId,targetPosition,frequency = 20){

// 先獲取要移動的元素
var targetId = document.getElementById("targetId");
// 判斷如果原本是否保存了計時器,如果有的話就立刻清空,重新啟動一個新的計時器
clearInterval(targetId.timerId);

// 開始計時器
targetId.timerId = setInterval(function() {
    // 先獲取目標實際位置
    var curPosition = targetId.offsetLeft;
    // 設置緩存速度
    var step = (targetPosition - curPosition);
    // 每次對計算的數(shù)字進行取整 , 防止因為JavaScript精準不足而導致無限循環(huán)浪費性能
    step = Math.ceil(step);
    // 累計移動的距離
    curPosition += step;
    // 修改元素節(jié)點的位置
    targetId.style.left = curPosition + "px";
    
    // 距離判斷,到達目標位置時停止計時器
    if (curPosition == targetPosition) {
        // 關(guān)閉計時器
        clearInterval(targetId.timerId);
    }
    
}, frequency);

}

云服務器 GPU云服務器 js 加載中動畫效果 javascript實現(xiàn)動畫簡單的javascript js實現(xiàn)的簡單特效

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

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

相關(guān)文章

網(wǎng)頁動畫性能日志（一）

摘要：當用戶滾動頁面時，合成線程會通知主線程更新頁面中最新可見部分的位圖。但是，如果主線程響應地不夠快，合成線程不會保持等待，而是馬上繪制已經(jīng)生成的位圖，還沒準備好的部分用白色進行填充。動畫做多了，自然就要考慮性能，我打算出一個系列的日志，詳細的講解一下網(wǎng)頁動畫性能相關(guān)的知識，如果你已經(jīng)可以運用css3 canvas來做動畫，可以來參考一下。目前我做的最復雜的動畫就是360搜索中PC端的...

zhiwei 2019-08-26 13:27 評論0 收藏0
2017文章總結(jié)

摘要：歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應用的個優(yōu)化步驟進階鵝廠大神用直出實現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優(yōu)化動歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅高性能滾動 scroll 及頁面渲染優(yōu)化理論 | HTML寫法...

dailybird 2019-08-01 18:28 評論0 收藏0
2017文章總結(jié)

摘要：歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應用的個優(yōu)化步驟進階鵝廠大神用直出實現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優(yōu)化動歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅高性能滾動 scroll 及頁面渲染優(yōu)化理論 | HTML寫法...

hellowoody 2019-08-22 14:02 評論0 收藏0
2017文章總結(jié)

摘要：歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應用的個優(yōu)化步驟進階鵝廠大神用直出實現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優(yōu)化動歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅高性能滾動 scroll 及頁面渲染優(yōu)化理論 | HTML寫法...

wwolf 2019-08-29 14:21 評論0 收藏0
Webkit 渲染基礎(chǔ)與硬件加速

摘要：網(wǎng)頁的渲染方式主要有兩種軟件渲染和硬件加速渲染。而使用合成化的渲染技術(shù)，以使用軟件繪圖的合成化渲染為例，對于使用繪制的層，其結(jié)果保存在內(nèi)存中，之后傳輸?shù)街羞M行合成。 Webkit 渲染基礎(chǔ)與硬件加速當瀏覽器加載一個 html 文件并對它進行解析完畢后，內(nèi)核就會生成一個極為重要的數(shù)據(jù)結(jié)構(gòu)即 DOM 樹，樹上每一個節(jié)點都對應著網(wǎng)頁里面的某一個元素，并且開發(fā)人員也可以通過 JavaScri...

ivan_qhz 2019-08-22 15:14 評論0 收藏0