Javascript方法
方法4: requestAnimationFrame Dom
我们来到了JavaScript环节，通过万能的JS我们只需要掌握一点点数学知识和定时器知识即可实现我们的小球运动啦~
这里实现时有2个需要注意的点：
- 实现动画播放时，为什么用requestAnimationFrame不用setInterval?
- 改变圆的位置时，为什么不直接修改top和left，而是要修改transform?
问题1: 实现动画播放时，为什么用requestAnimationFrame不用setInterval?
为了保证动画运行流畅性，我们需要尽量保持动画的播放帧率大于等于60Hz，即1000 / 60 = 16.67ms播放一次动画，requestAnimationFrame和setInterval都可以控制动画渲染的间隔。
但是，setInterval本身是基于时间来设置，它仅仅是将需要执行的事件定期插入到需要执行的队列中，不管，前面的事件是否已经执行了。因此，可能存在多次定时器之间的间隔可能小于我们设定的值，导致动画执行过快或者直接跳帧。
而requestAnimationFrame则是告知浏览器在刷新下一帧时需要执行那些函数。确保我们的动画的播放帧率和屏幕的刷新帧率一致。
问题2: 改变圆的位置时，为什么不直接修改top和left，而是要修改transform?
直接修改top和left会触发浏览器的重排和重绘，而修改tranform仅仅会触发重绘。而频繁的重排对动画性能影响极大，具体原因大家可以百度一下浏览器 重排 重绘，相关的文章非常多。
另外想要查看自己的页面是否触发了重排、重绘，大家可以借助chrome的rendering面板来查看
说了这么多，我们来看一下使用requestAnimationFrame怎么实现圆周运动的动画，具体实现代码如下：
<divclass="container">
<divid="ball"class="ball"></div>
</div>
let$ball=document.querySelector('#ball');
letangle=0;
letgetPosition=((centerX,centerY,radius)=>{
return(angle)=>{
return{
x: centerX Math.cos(angle)*radius,
y: centerY Math.sin(angle)*radius,
};
};
})(275,275,275);
run();
functionrun(){
//角度加1
angle =1;
letposition=getPosition((angle*Math.PI)/180);
$ball.style.transform=`translate(${position.x}px,${position.y}px)`;
window.requestAnimationFrame(run);
}
方法5: requestAnimationFrame canvas
除了通过Dom来控制元素之外，我们还可以通过canvas直接在页面上画圆。canvas做动画的原理就是快速的重复“擦除->移动位置画圆”的这个步骤。这里就不解释为啥了，直接上代码
具体实现代码如下：
<divclass="container">
<canvasid="canvas"width="600px"height="600px"></canvas>
</div>
letangle=0;
letgetPosition=((centerX,centerY,radius)=>{
return(angle)=>{
return{
x: centerX Math.cos(angle)*radius,
y: centerY Math.sin(angle)*radius,
};
};
})(300,300,275);
let$canvas=document.querySelector('#canvas');
letctx=$canvas.getContext('2d');
//设置填充色
ctx.fillStyle='coral';
run();
functionrun(){
angle =1;
letposition=getPosition((angle*Math.PI)/180);
//清空画布
ctx.clearRect(0,0,600,600);
ctx.beginPath();
//画圆
ctx.arc(position.x,position.y,25,0,2*Math.PI,true);
//填充
ctx.fill();
ctx.closePath();
window.requestAnimationFrame(run);
}
好啦，打完收工，这里就是我能想到的让小球做圆周运动的5种方法。
如果还有别的方法可以留言交流一下，一起涨涨姿势。
后记
我是一个莫得感情的代码搬运工，最近搞了一个公众号，每周会定期更新1、2篇前端文章，大家有兴趣的话关注一下，我们一起交流前端知识～
