JavaScript. RequestAnimationFrame
В этому уроке поговорим о javascript функции requestAnimationFrame. Эта функция используется при создании анимаций на странице. Традиционно анимацию реализовывали при помощи метода setInterval. Это понятно исходя из принципа анимации — повторяющееся (или изменяющееся) через определенный промежуток времени действие.
Минус использования setInterval для создания анимации в том, что для каждого элемента на странице приходится писать свой setInterval метод. RequestAnimationFrame объединяет все анимации в одном методе.
Код урока (пример анимации с setInterval)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#round {
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
position: relative;
}
#secondRound {
width: 100px;
height: 100px;
background: green;
border-radius: 50%;
position: relative;
}
</style>
</head>
<body>
<div id="round"></div>
<div id="secondRound"></div>
<script>
var startPos = 0;
var startDate = Date.now();
var anim = setInterval(function(){
var timeDuration = Date.now() - startDate;
if(timeDuration > 2000) {
clearInterval(anim);
return;
}
startPos += 5;
document.getElementById("round").style.left = timeDuration/5+"px";
}, 30);
var animation = setInterval(function(){
var timeDuration = Date.now() - startDate;
if(timeDuration > 2000) {
clearInterval(anim);
return;
}
startPos += 5;
document.getElementById("secondRound").style.top = timeDuration/5+"px";
}, 30);
</script>
</body>
</html>Код урока (пример анимации с requestAnimationFrame)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#round {
background: red;
height: 50px;
position: relative;
left: 0;
width: 50px;
border-radius: 50%;
}
#green {
background: green;
height: 50px;
position: relative;
left: 0;
width: 50px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="round"></div>
<div id="green"></div>
<script>
var stepLeft = 0;
var el = document.getElementById("round");
var green = document.getElementById("green");
function move() {
stepLeft += 5;
el.style.left = stepLeft + "px";
green.style.top = stepLeft + "px";
requestAnimationFrame(move);
}
requestAnimationFrame(move);
</script>
</body>
</html>
0 Комментариев