玩游戏学前端-贪吃蛇-animationframe

前端开发 评论

window.requestAnimationFrame() 方法

现如今，各种web开发技术被引入来创建漂亮的web页面。当谈到漂亮的网页时，最重要的内容之一就是动画。有很多方法可以生成动画，CSS3是其中之一，但JavaScript一直是一个强大的选项。window.requestAnimationFrame()方法是JavaScript中将简单的动画整合到我们的项目中的方法之一。也可以使用早期的方法，如setTimeout()或setInterval()，这两个方法仍然可用，但是使用起来慢且不太优雅，最主要的问题还是同步，过渡时间慢，而且对游戏项目来说体验较差。

语法

window.requestAnimationFrame( callback 回调函数 );

参数：此方法接收单个参数 callback, 它是一个回调函数; 除非你想要动画停止，否则你应该编写回调函数，便于发出对下一帧的请求。回调函数接受时间戳或一个时间值，在该时间值处开始执行。

返回值：此方法返回一个非零长整型数值，作为回调函数中动画的唯一标识。

示例1: 元素向右移动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="panel">
    <h1 style="color: #d662f3;">我爱你中国</h1>
</div>

<script type="text/javascript">
    //动画起始时间
    var start = null;
    //获取DIV元素对象 
    var element = document.getElementById('panel');
    //开始动画函数，传入时间戳
    function startAnimation(timestamp) {
        
        // timestamp表示1970年1月1日开始经过的秒数
        // 第一次回调此函数 start 为 null, 进入if块之后重新赋值
        if (!start) {
            start = timestamp;
        }
        //时间戳-开始时间 表示流逝的时间
        var progress = timestamp - start;

        // 移动元素，使用transform样式 ,变换 x 坐标
        element.style.transform = 'translateX(' + Math.min(progress / 10, 700) + 'px)';
        //再次请求动画帧
        window.requestAnimationFrame(startAnimation);
    }

    window.requestAnimationFrame(startAnimation);
</script>

回调函数会收到一个参数，这个参数表示当前时间距离开始触发 requestAnimationFrame 的回调的时间。

示例2: 按下按钮元素向右移动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>

<head>
	<style>
		div {
			position: absolute;
			left: 10px;
			top: 50px;
			padding: auto;
			color: white
		}
		h1 {
			color: green;
		}
	</style>
</head>

<body>
    
	<center>
		<button onclick="start()">开始动画</button>
	</center>
    <div id="panel"><h1>我爱你中国</h1></div>

	<script type="text/javascript">
		var x = document.getElementById("panel");

		// 初始化变量
		var requestId;
		var stopped;
		var starttime;

		function startAnimation(time) {

			//如果stopped为空 则设置x元素的样式left
			if (!stopped) {
				x.style.left = ((Date.now() - starttime) / 10 % 700) + "px";
				//返回id
                requestId = window.requestAnimationFrame(startAnimation);
			}
		}

		function start() {

			//当前时间
			starttime = Date.now();

			//开始动画
			requestId = window.requestAnimationFrame(startAnimation);
			// 设置为false表示动画不会停止
            stopped = false; 
		}
	</script>
</body>

</html>

哼哈七龙岛主架构师 & 开发者 & 技术分享

个人简介。