当前位置:编程学习 > html/css >>

HTML5 实现小车动画效果(Canvas/CSS3/JQuery)

HTML5正在变得越来越流行。在这个移动设备日益增长的时代,对来自Adobe的Flash插件的改造需求也正在快速增长。因为就在最近,Adobe宣布Flash将不再支持移动设备。这意味着,Adobe自身也认为对移动设备来讲HTML5是一项重要的技术。而桌面系统的改变也是迟早的事。
 
HTML的一大劣势就是对于多媒体技术支持的缺乏。在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代码:
[html]
<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> 
      <div 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> 
      </div> 
   </body> 
</html> 
JS代码:
定义一些变量:
 
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;          //轮胎的半径  www.zzzyk.com
 
为了实例化汽车canvas(初始时被隐藏),我们使用下面的自执行的匿名函数
 
(function(){ 
           var car=document.createElement('canvas');    //创建元素 
           car.height=carHeight+axisDelta+radius;   //设置高度 
           car.width=carWidth;              //设置宽度 
           w=car.getContext('2d'); 
        })();    
 
点击“Play”按钮,通过定时重复执行“画汽车”操作,来模拟“帧播放”功能:
 
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';     &nbs
补充:web前端 , HTML 5 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,