requestAnimationFrame()方法告訴瀏覽器您希望執(zhí)行動(dòng)畫,并請(qǐng)求瀏覽器在下一次重新繪制之前調(diào)用指定的函數(shù)來(lái)更新動(dòng)畫。
該方法將回調(diào)作為要在重繪之前調(diào)用的參數(shù)。
window.requestAnimationFrame(callback)
var start = null;
var element = document.getElementById('anim');
function step(timestamp) {
if (!start) start = timestamp;
var progress = timestamp - start;
element.style.transform = 'translateX(' + Math.min(progress / 10, 400) + 'px)';
if (progress < 20000) {
window.requestAnimationFrame(step);
}
}
window.requestAnimationFrame(step);測(cè)試看看?/?表中的數(shù)字指定了完全支持requestAnimationFrame()方法的第一個(gè)瀏覽器版本:
| Method | ![]() | ![]() | ![]() | ![]() | ![]() |
| requestAnimationFrame() | 24 | 23 | 15 | 6.1 | 10 |
| 參數(shù) | 描述 |
|---|---|
| callback | 當(dāng)需要更新動(dòng)畫以進(jìn)行下一次重繪時(shí)調(diào)用的函數(shù) |
| 返回值: | 一個(gè)長(zhǎng)整數(shù)值(請(qǐng)求ID),用于唯一標(biāo)識(shí)回調(diào)列表中的條目 |
|---|
CSS教程:CSS動(dòng)畫
CSS參考:CSS動(dòng)畫屬性
CSS參考:CSS animation-delay屬性
CSS參考:CSS動(dòng)畫方向?qū)傩?/a>
CSS參考:CSS動(dòng)畫持續(xù)時(shí)間屬性
CSS參考:CSS animation-fill-mode屬性
CSS參考:CSS animation-iteration-count屬性
CSS參考:CSS animation-name屬性
CSS參考:CSS animation-play-state屬性