1.简介
要想一个物体动起来?满足什么条件呢?
物体移动的同时定时重绘页面。
a.定时重绘:setTimeout或者requestAnimationFrame
requestAnimationFrame:与setTimeout相比,requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。具体一点讲,如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次,如果刷新率是75Hz,那么这个时间间隔就变成了1000/75=13.3ms,换句话说就是,requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次,这样就不会引起丢帧现象,也不会导致动画出现卡顿的问题。
b.物体移动
重绘的同时移动物体的位置
c.相机移动
相机移动也会达到物体成像移动,物体移动的位置恰好和相机移动的位置相反方向移动。
2.画面
物体移动:
相机移动:
3.代码
(1).新建annimation.html
<!DOCTYPE html>
<html>
<head>