htm5实现视差动画

requestAnimationFrame.js

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>

来看效果：