requestAnimationFrame制作动画效果
程序员文章站
2022-03-09 20:23:57
...
requestAnimationFrame 是html5新增的定时器方法,它不需要你设置时间,会根据cpu和你页面的刷新频率自动计算，动画效果看起来会更好的一点，算是一种平滑的过渡吧,在每次dom树重绘之前进行处理.下面举个小例子进行说明.
点击按钮,div会往右边平滑移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding:0;
}
div{
height:200px;
width: 200px;
background-image: linear-gradient(to right,#aaf,#f00);// 这里用到了css3的渐变色
}
</style>
</head>
<body>
<div id="d1">
</div>
<button onclick="run()">
开始移动
</button>
<script>
function run(){
var x=0;
var div=document.getElementById('d1');
var func=function(){
var timer;
// 你可以设置一个条件 它会根据你的条件自动使用平滑的动画效果去完成你要做的,不需要设置时间
if(x<500){
x+=5;
div.style.transform=`translateX(${x}px)`;
timer=requestAnimationFrame(func);
}else{
cancelAnimationFrame(timer);
}
}
func();
}
</script>
</body>
</html>
上一篇： 如何绑定方向键控制div移动
下一篇： 实战项目编译后不在根目录怎么办