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

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

摘要：動畫緩存函數(shù)要移動的目標(biāo)元素要移動的目標(biāo)位置每次移動的頻率先獲取要移動的元素判斷如果原本是否保存了計(jì)時(shí)器如果有的話就立刻清空重新啟動一個(gè)新的計(jì)時(shí)器開始計(jì)時(shí)器先獲取目標(biāo)實(shí)際位置設(shè)置緩存速度每次對計(jì)算的數(shù)字進(jìn)行取整防止因?yàn)榫珳?zhǔn)不足而導(dǎo)致

/**

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

@param {string} targetId - 要移動的目標(biāo)元素 id

@param {number} targetPosition - 要移動的目標(biāo)位置

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

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

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

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

}

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

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

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

相關(guān)文章

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

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

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

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

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

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

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

摘要：歡迎來我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動歡迎來我的個(gè)人站點(diǎn) 性能優(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(jìn)行合成。 Webkit 渲染基礎(chǔ)與硬件加速當(dāng)瀏覽器加載一個(gè) html 文件并對它進(jìn)行解析完畢后，內(nèi)核就會生成一個(gè)極為重要的數(shù)據(jù)結(jié)構(gòu)即 DOM 樹，樹上每一個(gè)節(jié)點(diǎn)都對應(yīng)著網(wǎng)頁里面的某一個(gè)元素，并且開發(fā)人員也可以通過 JavaScri...

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