您的位置：首页 > 产品设计 > UI/UE

webvr动画函数requestAnimationFrame

2016-06-20 14:16 525 查看

在学习three.js绘制动画的时候接触到了动画函数requestAnimationFrame。

在HTML5/css3的时代我们要在web上写动画选择其实已经很多种了：

1.css3的animattion+keyframes;

2.css3的transition；

3.canvas上作图

4.Jquery动画api

5.window.setTimout()、window.setInterval()通过不断更新元素的状态位置来实现动画，前提是画面的更新频率要达到每秒60次，也就是60帧。

requestAnimationFrame是专门为实现高性能的帧动画而设计的一个API

setInterval()、setTimeout()是开发者主动要求浏览器去绘制，但是浏览器可能会漏掉部分命令，他们使用推荐最小使用16.7ms的原因（16.7=1000/60，即每秒60帧）,如果是使用了比16.7ms小的时间，会出现导致所有第三帧丢掉，继而导致动画断续显示，过度绘制，不仅如此，这种计时器频率的降低，对电脑电池使用寿命造成负面影响，并会降低其他应用的性能。

requestAnimationFrame优点：

1:浏览器只要通知一次就行了，而setInterval()、setTimeout()是多个独立绘制

2.页面最小化，或者tab切换了，页面绘制全部停止，资源高效利用。

对比：

setInterval实现，大概调用了147次左右：如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>setInterval</title>
</head>
<body>
<img id="book" style="background:red;opacity:1;position: relative; left: 500px;" alt="" width="100" height="123" data-mce-style="background: red; opacity: 1; position: relative; left: 500px;"/>
<div id="several"><br/></div>
<script type="text/javascript">
var book = document.getElementById('book')
var several = document.getElementById('several');
animate(book, {
left: 50,
duration: 2000
})
function animate(elem, options) {
//动画初始值
var start = 500
//动画结束值
var end = options.left
//动画id
var timerId;
var createTime = function () {
return (+new Date)
}
//动画开始时间
var startTime = createTime();
var i = 0;
function tick() {
i++;
several.innerHTML = 'setInterval调用次数:' + i;
//每次变化的时间
var remaining = Math.max(0, startTime + options.duration - createTime())
var temp = remaining / options.duration || 0;
var percent = 1 - temp;
var stop = function () {
//停止动画
clearInterval(timerId);
timerId = null;
}
var setStyle = function (value) {
elem.style['left'] = value + 'px'
}
//移动的距离
var now = (end - start) * percent + start;
if (percent === 1) {
setStyle(now)
stop();
} else {
setStyle(now)
}
}
//开始执行动画
var timerId = setInterval(tick, 13);
}
</script>
</body>
</html>

requestAnimationFrame 实现，大概调用了115次左右：如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>requestAnimationFrame</title>
</head>
<body>
<img id="book" style="background:red;opacity:1;position: relative; left: 500px;" alt="" width="100" height="123" data-mce-style="background: red; opacity: 1; position: relative; left: 500px;"/>
<div id="several"><br/></div>
<script type="text/javascript">
var book = document.getElementById('book')
var several = document.getElementById('several');
animate(book, {
left: 50,
duration: 2000
})
function animate(elem, options) {
//动画初始值
var start = 500
//动画结束值
var end = options.left
var createTime = function () {
return (+new Date)
}
//动画开始时间
var startTime = createTime();
var timerId;
//开始动画
var startAnim = function () {
timerId = requestAnimationFrame(tick, 15);
}
//停止动画
var stopAnim = function () {
cancelAnimationFrame(timerId)
}
var i = 0;

function tick() {
i++;
several.innerHTML = 'requestAnimationFrame调用次数:' + i;
//每次变化的时间
var remaining = Math.max(0, startTime + options.duration - createTime())
var temp = remaining / options.duration || 0;
var percent = 1 - temp;
var setStyle = function (value) {
elem.style['left'] = value + 'px'
}
//移动的距离
var now = (end - start) * percent + start;
if (percent === 1) {
setStyle(now)
stopAnim();
} else {
setStyle(now)
startAnim(tick);
}
}

//开始执行动画
startAnim(tick);
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航