柠檬铺

立即咨询

柠檬铺

HTML 5 实现小车动画效果

HTML5正在变得越来越流行。在这个移动设备日益增长的时代，对来自Adobe的Flash插件的改造需求也正在快速增长。因为就在最 近，Adobe宣布Flash将不再支持移动设备。这意味着，Adobe自身也认为对移动设备来讲HTML5是一项重要的技术。而桌面系统的改变也是迟早 的事。
HTML5的一大劣势就是对于多媒体技术支持的缺乏。在HTML中，你无法直接显示一个视频或在屏幕上绘画。在HTML5中，随 着<video>与<canvas>元素的引进。这些元素给予开发者直接使用“纯粹的”HTML来实现多媒体技术的可能性——仅 需要写一些Javascript代码来配合HTML。在多媒体技术中，有一个基本的技术应该被支持——动画。在HTML5中，有不少方式能够实现该功能。
在 这篇文章中，我仅将最新的<canvas>元素与即将到来的CSS3动画技术进行比较。其他的可能性包括DOM元素或SVG元素的创建和动 画。这些可能性将不在本文中进行讨论。从开始就应该注意到canvas技术在当前发布的大部分主流浏览器都给予了支持，而CSS3动画仅在最新的 FireFox与Chrome浏览器中才有实现的可能，下一个版本的IE也将提供对CSS3动画的支持。（所以本文中所有演示代码的效果，在Win 7系统下当前最新版的Chrome浏览器中都可实现，但在其他操作系统与其他浏览器中，并不一定能看到所有演示代码的效果）。
这里我选择了一个比较简单的动画：

PS：由于显卡、录制的帧间隔，以及可能你电脑处理器的原因，播放过程可能有些不太流畅或者失真！
分三种方式实现：
(1)   canvas元素结合JS
(2)   纯粹的CSS3动画（暂不被所有主流浏览器支持，比如IE）
(3)   CSS3结合Jquery实现
知 道如何使用CSS3动画比知道如何使用<canvas>元素更重要：因为浏览器能够优化那些元素的性能(通常是他们的样式，比如CSS)，而 我们使用canvas自定义画出来的效果却不能被优化。原因又在于，浏览器使用的硬件主要取决于显卡的能力。目前，浏览器没有给予我们直接访问显卡的权 力，比如，每一个绘画操作都不得不在浏览器中先调用某些函数。
让我们从Canvas开始
HTML代码：

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<pre class="brush:html;toolbar:false;"><html>  

   <head>  

      <meta charset="UTF-8" />  

         <title>Animation in HTML5 using the canvas element</title>  

    </head>  

   <body onload="init();">  

      <canvas id="canvas" width="1000" height="600">Your browser does not support

 the <code><canvas></code>-element.Please think about updating your brower!</canvas>  

      < id="controls">  

         <button type="button" onclick="speed(-0.1);">Slower</button>  

         <button type="button" onclick="play(this);">Play</button>  

     <button type="button" onclick="speed(+0.1)">Faster</button>  

      </>  

   </body>  

</html></pre><p>

</p>

 

JS代码：
定义一些变量：

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

var dx=5,           //当前速率    

            rate=1,         //当前播放速度    

            ani,            //当前动画循环    

            c,              //画图(Canvas Context)    

            w,              //汽车[隐藏的](Canvas Context)    

            grassHeight=130,        //背景高度    

            carAlpha=0,         //轮胎的旋转角度    

            carX=-400,          //x轴方向上汽车的位置(将被改变)    

            carY=300,           //y轴方向上汽车的位置(将保持为常量)    

            carWidth=400,       //汽车的宽度    

            carHeight=130,      //汽车的高度    

            tiresDelta=15,      //从一个轮胎到最接近的汽车底盘的距离    

            axisDelta=20,       //汽车底部底盘的轴与轮胎的距离    

            radius=60;          //轮胎的半径

 

为了实例化汽车canvas(初始时被隐藏)，我们使用下面的自执行的匿名函数

双击代码全选

1

2

3

4

5

6

(function(){   

           var car=document.createElement('canvas');    //创建元素    

           car.height=carHeight+axisDelta+radius;   //设置高度    

           car.width=carWidth;              //设置宽度    

           w=car.getContext('2d');   

        })();

 

点击“Play”按钮，通过定时重复执行“画汽车”操作，来模拟“帧播放”功能：

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

<pre class="brush:css;toolbar:false;">function play(s){               //参数s是一个button 

           if(ani){                 //如果ani不为null，则代表我们当前已经有了一个动画 

              clearInterval(ani);           //所以我们需要清除它(停止动画) 

              ani=null;                  

              s.innerHTML='Play';           //重命名该按钮为“播放” 

           }else{ 

              ani=setInterval(drawCanvas,40);       //我们将设置动画为25fps[帧每秒]，

40/1000，即为二十五分之一 

              s.innerHTML='Pause';          //重命名该按钮为“暂停” 

           } 

        }</pre><p>

</p>

 

加速，减速，通过以下方法，改变移动距离的大小来实现：

双击代码全选

1

2

3

4

5

6

<pre class="brush:css;toolbar:false;">function speed(delta){ 

           var newRate=Math.max(rate+delta,0.1); 

           dx=newRate/rate*dx; 

           rate=newRate; 

        }</pre><p>

</p>

 

页面加载的初始化方法：

双击代码全选

1

2

3

4

5

6

<pre class="brush:css;toolbar:false;">//init 

            function init(){ 

           c=document.getElementById('canvas').getContext('2d'); 

           drawCanvas(); 

        }</pre><p>

</p>

 

主调方法：

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

function drawCanvas(){ 

           c.clearRect(0,0,c.canvas.width, c.canvas.height);    //清除Canvas(已显示的)，避免产生错误 

           c.save();                        //保存当前坐标值以及状态，对应的类似“push”操作 

     

           drawGrass();                     //画背景 

           c.translate(carX,0);                 //移动起点坐标 

           drawCar();                       //画汽车(隐藏的canvas) 

           c.drawImage(w.canvas,0,carY);            //画最终显示的汽车 

           c.restore();                     //恢复Canvas的状态，对应的是类似“pop”操作 

           carX+=dx;                        //重置汽车在X轴方向的位置，以模拟向前走 

           carAlpha+=dx/radius;                 //按比例增加轮胎角度 

     

           if(carX>c.canvas.width){             //设置某些定期的边界条件 

              carX=-carWidth-10;                //也可以将速度反向为dx*=-1; 

           } 

        }

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Grow your business fast with

Suku

Subscribe Now