JavaScript中簡單的實現動畫緩存效果

mgckid 發布于2019-08-26 10:32 / 697人閱讀

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

/**

@description: 動畫緩存函數

@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);
    // 每次對計算的數字進行取整 , 防止因為JavaScript精準不足而導致無限循環浪費性能
    step = Math.ceil(step);
    // 累計移動的距離
    curPosition += step;
    // 修改元素節點的位置
    targetId.style.left = curPosition + "px";
    
    // 距離判斷,到達目標位置時停止計時器
    if (curPosition == targetPosition) {
        // 關閉計時器
        clearInterval(targetId.timerId);
    }
    
}, frequency);

}

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106331.html

網頁動畫性能日志（一）

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

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

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

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

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

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

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

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

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

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