htm5 시차 애니메이션 구현
44122 단어 애니메이션
1 window.requestAnimFrame = (function() {
2 return window.requestAnimationFrame ||
3 window.webkitRequestAnimationFrame ||
4 window.mozRequestAnimationFrame ||
5 window.oRequestAnimationFrame ||
6 window.msRequestAnimationFrame || function( /* function */ callback, /* DOMElement */ element) {
7 window.setTimeout(callback, 1000 / 60);
8 };
9 })();페이지 기본 코드:
1 <!DOCTYPE HTML>
2 <html>
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6 <title> </title>
7 <script type="text/javascript" src="js/jquery8.js"></script>
8 <script type="text/javascript" src="js/requestAnimationFrame.js"></script>
9 <style type="text/css">
10 body {
11 background:#dddddd;
12 }
13 #control {
14 width:1000px;
15 margin:0 auto;
16 }
17 #containter {
18 text-align:center;
19 }
20
21 #canavas {
22 margin:10px;
23 padding:10px;
24 background:#ffffff;
25 border:thin #aaaaaa;
26 }
27 </style>
28 <script type="text/javascript">
29
30 $(function() {
31
32 canvas = jQuery("#canavas")[0];
33 content = canvas.getContext("2d");
34
35 //
36 sky = new Image();
37 sky.src = "image/back.jpg";
38
39 //
40 c1 = new Image();
41 c1.src = "image/cloud2.png";
42
43 c2 = new Image();
44 c2.src = "image/cloud1.jpg";
45
46 c3 = new Image();
47 c3.src = "image/cloud3.jpg";
48
49 lastTime = (+new Date())
50 requestAnimFrame(animate);
51
52 pause=false;
53 $("#b1").click(function(){
54
55 pause=!pause;
56
57 });
58
59 });
60 //
61 function getRandom(min, max) {
62
63 return parseInt(Math.random() * (max - min) + min);
64
65 }
66
67
68
69 SKY_VELOCITY = 50;
70 skyOffset = 0;
71
72 C1_VELOCITY = 100;
73 c1Offset = 0;
74
75 C2_VELOCITY = 150;
76 c2Offset = 0;
77
78 C3_VELOCITY = 200;
79 c3Offset = 0;
80
81 fangxiag = 1;
82
83 function drawBack() {
84
85 //
86 skyOffset = skyOffset < sky.width ? skyOffset + SKY_VELOCITY / fps : 0;
87
88 // / /
89 c1Offset = c1Offset < canvas.width ? c1Offset + C1_VELOCITY / fps : 0;
90 c2Offset = c2Offset < canvas.width ? c2Offset + C2_VELOCITY / fps : 0;
91 c3Offset = c3Offset < canvas.width ? c3Offset + C3_VELOCITY / fps : 0;
92
93 //
94 content.save();
95 content.translate(-skyOffset, 0);
96 content.drawImage(sky, 0, 0);
97 content.drawImage(sky, sky.width, 0);
98 content.restore();
99
100 content.save();
101 content.translate(-c1Offset, 0);
102 content.drawImage(c1, 50, 50);
103 content.drawImage(c1, 600, 70);
104 content.drawImage(c1, 1050, 50);
105 content.drawImage(c1, 1600, 70);
106 content.restore();
107
108 content.save();
109 content.translate(-c2Offset, 0);
110 content.drawImage(c2, 130, 120);
111 content.drawImage(c2, 730, 170);
112 content.drawImage(c2, 1130, 120);
113 content.drawImage(c2, 1730, 170);
114 content.restore();
115
116 content.save();
117 content.translate(-c3Offset, 0);
118 content.drawImage(c3, 600, 250);
119 content.drawImage(c3, 100, 320);
120 content.drawImage(c3, 1600, 250);
121 content.drawImage(c3, 110, 320);
122 content.restore();
123
124 }
125
126
127 fps = 0;
128 //
129 function animate(time) {
130
131 if(!pause){
132
133 //
134 content.clearRect(0, 0, canvas.width, canvas.height);
135 // fps
136 fps = geFps(time);
137
138 //
139 drawBack();
140
141 //
142 content.fillText(fps.toFixed() + " fps", 20, 20);
143
144 }else{
145
146 lastFpsUpdateTime=time;
147
148 }
149 //
150 requestAnimFrame(animate);
151 }
152
153
154
155 var lastFpsUpdateTime = 0;
156 // fps
157 function geFps(time) {
158
159 fps = 1000 / (time - lastFpsUpdateTime);
160
161 lastFpsUpdateTime = time;
162
163 return fps;
164
165 }
166 </script>
167 </head>
168
169 <body>
170 <div id="control">
171 <input id="b1" type="button" value=" " />
172
173 </div>
174 <div id="containter">
175 <canvas id="canavas" width="500" height="200"></canvas>
176 </div>
177 </body>
178
179 </html>효과 보기:
좋은 웹페이지 즐겨찾기
