資訊專欄INFORMATION COLUMN
摘要：這就節(jié)省了和電力使用持續(xù)調(diào)用即可可以使用清除動畫舉例預(yù)覽兼容性處理參考附錄原文發(fā)表在你也可以點擊這里瀏覽下我的其他文章歡迎和謝謝
JS 和 CSS 實現(xiàn)持續(xù)的動畫效果
逛論壇的時候看到一個問題, js 是怎么實現(xiàn)持續(xù)的動畫效果的? 第一時間想到的是定時器, 后來看到有同學(xué)提到了 requestAnimationFrame, 由于之前沒有對相關(guān)方法有所了解, 于是便去查了下, 順便也記錄了下 animation 的使用.
animation(CSS) 兼容性與屬性猛戳這里查看兼容性
animation-name: 動畫名稱
animation-duration: 動畫時長
animation-timing-function: 動畫執(zhí)行方式
animation-delay: 動畫延遲執(zhí)行時間
animation-iteration-count: 動畫執(zhí)行次數(shù)
animation-direction: 是否反向執(zhí)行動畫
animation-fill-mode: 動畫執(zhí)行前后的樣式
實例jsfiddle預(yù)覽
.box {
width: 200px;
height: 200px;
background-color: aqua;
position: absolute;
left: 0;
top: 0;
animation: test 3s linear 2s infinite;
}
@keyframes test {
from {
}
to {
width: 50px;
height: 50px;
background-color: red;
opacity: 0.5;
left: 500px;
top: 500px;
}
}
requestAnimationFrame(JS) 兼容性與基本概念
猛戳這里查看兼容性
優(yōu)勢：
瀏覽器可以優(yōu)化并行的動畫動作，更合理的重新排列動作序列，并把能夠合并的動作放在一個渲染周期內(nèi)完成，從而呈現(xiàn)出更流暢的動畫效果
一旦頁面不處于瀏覽器的當(dāng)前標(biāo)簽，就會自動停止刷新。這就節(jié)省了CPU、GPU和電力
使用：
持續(xù)調(diào)用 requestAnimFrame 即可舉例可以使用 cancelAnimationFrame 清除動畫
jsfiddle預(yù)覽
#anim {
position: absolute;
left: 0px;
width: 150px;
height: 150px;
line-height: 150px;
background: aqua;
color: white;
border-radius: 10px;
padding: 1em;
}
Click here to start animation
// 兼容性處理
window.requestAnimFrame = (function() {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element) {
window.setTimeout(callback, 1000 / 60)
}
)
})()
var elem = document.getElementById("anim")
var startTime = undefined
function render(time) {
time = Date.now()
if (startTime === undefined) {
startTime = time
}
elem.style.left = ((time - startTime) / 10) % 300 + "px"
elem.style.top = ((time - startTime) / 10) % 300 + "px"
elem.style.borderRadius = ((time - startTime) / 10) % 300 + "px"
elem.style.opacity = Math.floor((time - startTime / 100)) % 2 === 0 ? 1 : 0.3
}
elem.onclick = function() {
(function animloop() {
render()
requestAnimFrame(animloop, elem)
})()
}
參考
MDN
requestanimationframe
原文發(fā)表在github,你也可以點擊這里瀏覽下我的其他文章,歡迎star和follow,謝謝?。?！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/113113.html
摘要：這就節(jié)省了和電力使用持續(xù)調(diào)用即可可以使用清除動畫舉例預(yù)覽兼容性處理參考附錄原文發(fā)表在你也可以點擊這里瀏覽下我的其他文章歡迎和謝謝 JS 和 CSS 實現(xiàn)持續(xù)的動畫效果 逛論壇的時候看到一個問題, js 是怎么實現(xiàn)持續(xù)的動畫效果的? 第一時間想到的是定時器, 后來看到有同學(xué)提到了 requestAnimationFrame, 由于之前沒有對相關(guān)方法有所了解, 于是便去查了下, 順便也記錄...
摘要：動畫運動算法線性勻速運動效果二次方的緩動三次方的緩動四次方的緩動五次方的緩動正弦曲線的緩動指數(shù)曲線的緩動圓形曲線的緩動指數(shù)衰減的正弦曲線緩動超過范圍的三次方緩動指數(shù)衰減的反彈緩動。 requestAnimFrame兼容 window.requestAnimFrame = (function (callback,time) { return window.requestAnima...
摘要：使用實現(xiàn)一個持續(xù)的動畫效果最開始的思路是用定時器實現(xiàn)，最后沒有想的太完整，面試官給出的答案是用。參考鏈接封裝一個函數(shù)，參數(shù)是定時器的時間，執(zhí)行回調(diào)函數(shù)。規(guī)范規(guī)定，每個模塊內(nèi)部，變量代表當(dāng)前模塊。 1、使用css實現(xiàn)一個持續(xù)的動畫效果———————————————————————————————————————————————————————— animation:mymove 5s i...
閱讀 2898·2021-09-28 09:45
閱讀 1559·2021-09-26 10:13
閱讀 967·2021-09-04 16:45
閱讀 3748·2021-08-18 10:21
閱讀 1158·2019-08-29 15:07
閱讀 2692·2019-08-29 14:10
閱讀 3214·2019-08-29 13:02
閱讀 2524·2019-08-29 12:31
