现在的位置: 首页 > 综合 > 正文

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

2019年05月04日 ⁄ 综合 ⁄ 共 15768字 ⁄ 字号 小 中 大 ⁄ 评论关闭
 

[置顶] HTML5 实现小车动画效果(Canvas/CSS3/JQuery)

分类： WEB前端技术2012-02-03
19:14 3991人阅读 评论(13) 收藏 举报

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] view
plaincopyprint?

  1. <html>  
  2.    <head>  
  3.       <meta charset="UTF-8" />  
  4.          <title>Animation in HTML5 using the canvas element</title>  
  5.     </head>  
  6.    <body onload="init();">  
  7.       <canvas id="canvas" width="1000" height="600">Your browser does not support the <code><canvas></code>-element.Please think about updating your brower!</canvas>  
  8.       <div id="controls">  
  9.          <button type="button" onclick="speed(-0.1);">Slower</button>  
  10.          <button type="button" onclick="play(this);">Play</button>  
  11.      <button type="button" onclick="speed(+0.1)">Faster</button>  
  12.       </div>  
  13.    </body>  
  14. </html>  

JS代码：

定义一些变量：

[javascript] view
plaincopyprint?

  1. var dx=5,           //当前速率  
  2.             rate=1,         //当前播放速度  
  3.             ani,            //当前动画循环  
  4.             c,              //画图(Canvas Context)  
  5.             w,              //汽车[隐藏的](Canvas Context)  
  6.             grassHeight=130,        //背景高度  
  7.             carAlpha=0,         //轮胎的旋转角度  
  8.             carX=-400,          //x轴方向上汽车的位置(将被改变)  
  9.             carY=300,           //y轴方向上汽车的位置(将保持为常量)  
  10.             carWidth=400,       //汽车的宽度  
  11.             carHeight=130,      //汽车的高度  
  12.             tiresDelta=15,      //从一个轮胎到最接近的汽车底盘的距离  
  13.             axisDelta=20,       //汽车底部底盘的轴与轮胎的距离  
  14.             radius=60;          //轮胎的半径  

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

[javascript] view
plaincopyprint?

  1. (function(){  
  2.            var car=document.createElement('canvas');    //创建元素  
  3.            car.height=carHeight+axisDelta+radius;   //设置高度  
  4.            car.width=carWidth;              //设置宽度  
  5.            w=car.getContext('2d');  
  6.         })();     

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

[javascript] view
plaincopyprint?

  1. function play(s){               //参数s是一个button  
  2.            if(ani){                 //如果ani不为null，则代表我们当前已经有了一个动画  
  3.               clearInterval(ani);           //所以我们需要清除它(停止动画)  
  4.               ani=null;                   
  5.               s.innerHTML='Play';           //重命名该按钮为“播放”  
  6.            }else{  
  7.               ani=setInterval(drawCanvas,40);       //我们将设置动画为25fps[帧每秒]，40/1000，即为二十五分之一  
  8.               s.innerHTML='Pause';          //重命名该按钮为“暂停”  
  9.            }  
  10.         }  

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

[javascript] view
plaincopyprint?

  1. function speed(delta){  
  2.            var newRate=Math.max(rate+delta,0.1);  
  3.            dx=newRate/rate*dx;  
  4.            rate=newRate;  
  5.         }  

页面加载的初始化方法：

[javascript] view
plaincopyprint?

  1. //init  
  2.             function init(){  
  3.            c=document.getElementById('canvas').getContext('2d');  
  4.            drawCanvas();  
  5.         }  

主调方法：

[javascript] view
plaincopyprint?

  1. function drawCanvas(){  
  2.            c.clearRect(0,0,c.canvas.width, c.canvas.height);    //清除Canvas(已显示的)，避免产生错误  
  3.            c.save();                        //保存当前坐标值以及状态，对应的类似“push”操作  
  4.   
  5.            drawGrass();                     //画背景  
  6.            c.translate(carX,0);                 //移动起点坐标  
  7.            drawCar();                       //画汽车(隐藏的canvas)  
  8.            c.drawImage(w.canvas,0,carY);            //画最终显示的汽车  
  9.            c.restore();                     //恢复Canvas的状态，对应的是类似“pop”操作  
  10.            carX+=dx;                        //重置汽车在X轴方向的位置，以模拟向前走  
  11.            carAlpha+=dx/radius;                 //按比例增加轮胎角度  
  12.   
  13.            if(carX>c.canvas.width){              //设置某些定期的边界条件  
  14.               carX=-carWidth-10;                //也可以将速度反向为dx*=-1;  
  15.            }  
  16.         }  

画背景：

[javascript] view
plaincopyprint?

  1. function drawGrass(){  
  2.            //创建线性渐变，前两个参数为渐变开始点坐标，后两个为渐变结束点坐标  
  3.            var grad=c.createLinearGradient(0,c.canvas.height-grassHeight,0,c.canvas.height);  
  4.            //为线性渐变指定渐变色，0表示渐变起始色，1表示渐变终止色  
  5.            grad.addColorStop(0,'#33CC00');  
  6.            grad.addColorStop(1,'#66FF22');  
  7.            c.fillStyle=grad;  
  8.            c.lineWidth=0;  
  9.            c.fillRect(0,c.canvas.height-grassHeight,c.canvas.width,grassHeight);  
  10.              
  11.         }  

画车身：

[javascript] view
plaincopyprint?

  1. function drawCar(){  
  2.            w.clearRect(0,0,w.canvas.width,w.canvas.height);     //清空隐藏的画板  
  3.            w.strokeStyle='#FF6600';                 //设置边框色  
  4.            w.lineWidth=2;                       //设置边框的宽度，单位为像素  
  5.            w.fillStyle='#FF9900';                   //设置填充色  
  6.            w.beginPath();                       //开始绘制新路径  
  7.            w.rect(0,0,carWidth,carHeight);              //绘制一个矩形  
  8.            w.stroke();                          //画边框  
  9.            w.fill();                            //填充背景  
  10.            w.closePath();                       //关闭绘制的新路径  
  11.            drawTire(tiresDelta+radius,carHeight+axisDelta);     //我们开始画第一个轮子  
  12.            drawTire(carWidth-tiresDelta-radius,carHeight+axisDelta);    //同样的，第二个  
  13.              
  14.         }  

画轮胎：

[javascript] view
plaincopyprint?

  1. function drawTire(x,y){  
  2.            w.save();  
  3.            w.translate(x,y);  
  4.            w.rotate(carAlpha);  
  5.            w.strokeStyle='#3300FF';  
  6.            w.lineWidth=1;  
  7.            w.fillStyle='#0099FF';  
  8.            w.beginPath();  
  9.            w.arc(0,0,radius,0,2*Math.PI,false);  
  10.            w.fill();  
  11.            w.closePath();  
  12.            w.beginPath();  
  13.            w.moveTo(radius,0);  
  14.            w.lineTo(-radius,0);  
  15.            w.stroke();  
  16.            w.closePath();  
  17.            w.beginPath();  
  18.            w.moveTo(0,radius);  
  19.            w.lineTo(0,-radius);  
  20.            w.stroke();  
  21.            w.closePath();  
  22.            w.restore();  
  23.   
  24.         }  

由于原理简单，并且代码中作了详细注释，这里就不一一讲解！

该是CSS3出场了

你将看到我们未通过一句JS代码就完全实现了和上面一样的动画效果：

HTML代码：

[html] view
plaincopyprint?

  1. <html>  
  2.    <head>  
  3.       <meta charset="UTF-8" />  
  4.       <title>Animations in HTML5 using CSS3 animations</title>  
  5.        </head>  
  6.    <body>  
  7.       <div id="container">  
  8.       <div id="car">  
  9.          <div id="chassis"></div>  
  10.          <div id="backtire" class="tire">  
  11.          <div class="hr"></div>  
  12.          <div class="vr"></div>  
  13.          </div>  
  14.          <div id="fronttire" class="tire">  
  15.          <div class="hr"></div>  
  16.          <div class="vr"></div>  
  17.          </div>     
  18.       </div>  
  19.       <div id="grass"></div>  
  20.       </div>  
  21.       <footer></footer>  
  22.    </body>  
  23. </html>  

CSS代码：

[css] view
plaincopyprint?

  1. body  
  2.  {  
  3.     padding:0;  
  4.     margin:0;  
  5.  }  

定义车身与轮胎转到的动画（你会看到基本每一个动画都有四个版本的定义：原生版本/webkit【Chrome|Safari】/ms【为了向后兼容IE10】/moz【FireFox】）

[css] view
plaincopyprint?

  1. /*定义动画：从-400px的位置移动到1600px的位置 */  
  2.  @keyframes carAnimation  
  3.  {  
  4.     0% { left:-400px; }     /* 指定初始位置，0%等同于from*/  
  5.     100% { left:1600px; }   /* 指定最终位置,100%等同于to*/  
  6.  }  
  7.   
  8.  /* Safari and Chrome */  
  9.  @-webkit-keyframes carAnimation  
  10.  {  
  11.     0% {left:-400px; }  
  12.     100% {left:1600px; }  
  13.  }  
  14.   
  15.  /* Firefox */  
  16.  @-moz-keyframes carAnimation  
  17.  {  
  18.     0% {left:-400; }  
  19.     100% {left:1600px; }   
  20.  }  
  21.   
  22.  /*IE暂不支持,此处定义是为了向后兼容IE10*/  
  23.  @-ms-keyframes carAnimation  
  24.  {  
  25.     0% {left:-400px; }  
  26.     100%{left:1600px; }  
  27.  }  


[css] view
plaincopyprint?

  1. @keyframes tyreAnimation  
  2.  {  
  3.     0% {transform: rotate(0); }  
  4.     100% {transform: rotate(1800deg); }  
  5.  }  
  6.   
  7.  @-webkit-keyframes tyreAnimation  
  8.  {  
  9.     0% { -webkit-transform: rotate(0); }  
  10.     100% { -webkit-transform: rotate(1800deg); }  
  11.  }  
  12.   
  13.  @-moz-keyframes tyreAnimation  
  14.  {  
  15.     0% { -moz-transform: rotate(0); }  
  16.     100% { -moz-transform: rotate(1800deg); }  
  17.  }  
  18.   
  19.  @-ms-keyframes tyreAnimation  
  20.  {  
  21.     0% { -ms-transform: rotate(0); }  
  22.     100% { -ms-transform: rotate(1800deg); }  
  23.  }  

[css] view
plaincopyprint?

  1. #container  
  2.  {  
  3.     position:relative;  
  4.     width:100%;  
  5.     height:600px;  
  6.     overflow:hidden;        /*这个很重要*/  
  7.  }  
  8.   
  9.  #car  
  10.  {  
  11.     position:absolute;      /*汽车在容器中采用绝对定位*/  
  12.     width:400px;  
  13.     height:210px;       /*汽车的总高度，包括轮胎和底盘*/  
  14.     z-index:1;          /*让汽车在背景的上方*/  
  15.     top:300px;          /*距顶端的距离(y轴)*/  
  16.     left:50px;          /*距左侧的距离(x轴)*/  
  17.   
  18.     /*以下内容赋予该元素预先定义的动画及相关属性*/  
  19.     -webkit-animation-name:carAnimation;        /*名称*/  
  20.     -webkit-animation-duration:10s;         /*持续时间*/  
  21.     -webkit-animation-iteration-count:infinite;     /*迭代次数-无限次*/  
  22.     -webkit-animation-timing-function:linear;       /*播放动画时从头到尾都以相同的速度*/  
  23.   
  24.     -moz-animation-name:carAnimation;       /*名称*/  
  25.     -moz-animation-duration:10s;            /*持续时间*/  
  26.     -moz-animation-iteration-count:infinite;        /*迭代次数-无限次*/  
  27.     -moz-animation-timing-function:linear;      /*播放动画时从头到尾都以相同的速度*/  
  28.   
  29.     -ms-animation-name:carAnimation;        /*名称*/  
  30.     -ms-animation-duration:10s;         /*持续时间*/  
  31.     -ms-animation-iteration-count:infinite;     /*迭代次数-无限次*/  
  32.     -ms-animation-timing-function:linear;       /*播放动画时从头到尾都以相同的速度*/  
  33.   
  34.     animation-name:carAnimation;        /*名称*/  
  35.     animation-duration:10s;         /*持续时间*/  
  36.     animation-iteration-count:infinite;     /*迭代次数-无限次*/  
  37.     animation-timing-function:linear;       /*播放动画时从头到尾都以相同的速度*/  
  38.  }  
  39.   
  40.  /*车身*/  
  41.  #chassis  
  42.  {  
  43.     position:absolute;  
  44.     width:400px;  
  45.     height:130px;  
  46.     background:#FF9900;  
  47.     border: 2px solid #FF6600;  
  48.  }  
  49.   
  50.  /*轮胎*/  
  51.  .tire  
  52.  {  
  53.     z-index:1;          /*同上，轮胎也应置于背景的上方*/  
  54.     position:absolute;  
  55.     bottom:0;  
  56.     border-radius:60px;     /*圆半径*/  
  57.     height:120px;       /* 2*radius=height */  
  58.     width:120px;        /* 2*radius=width */  
  59.     background:#0099FF;     /*填充色*/  
  60.     border:1px solid #3300FF;  
  61.   
  62.     -webkit-animation-name:tyreAnimation;  
  63.     -webkit-animation-duration:10s;  
  64.     -webkit-animation-iteration-count:infinite;  
  65.     -webkit-animation-timing-function:linear;  
  66.   
  67.     -moz-animation-name:tyreAnimation;  
  68.     -moz-animation-duration:10s;  
  69.     -moz-animation-iteration-count:infinite;  
  70.     -moz-animation-timing-function:linear;  
  71.   
  72.     -ms-animation-name:tyreAnimation;  
  73.     -ms-animation-duration:10s;  
  74.     -ms-animation-iteration-count:infinite;  
  75.     -ms-animation-timing-function:linear;         
  76.   
  77.     animation-name:tyreAnimation;  
  78.     animation-duration:10s;  
  79.     animation-iteration-count:infinite;  
  80.     animation-timing-function:linear;  
  81.  }  
  82.   
  83.  #fronttire  
  84.  {  
  85.     right:20px;     /*设置右边的轮胎距离边缘的距离为20*/  
  86.  }  
  87.   
  88.  #backtire  
  89.  {  
  90.     left:20px;      /*设置左边的轮胎距离边缘的距离为20*/  
  91.  }  
  92.   
  93.  #grass  
  94.  {  
  95.     position:absolute;  /*背景绝对定位在容器中*/  
  96.     width:100%;  
  97.     height:130px;  
  98.     bottom:0;  
  99.     /*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */  
  100.     background:linear-grdaient(bottom,#33CC00,#66FF22);  
  101.     background:-webkit-linear-gradient(bottom,#33CC00,#66FF22);  
  102.     background:-moz-linear-gradient(bottom,#33CC00,#66FF22);  
  103.     background:-ms-linear-gradient(bottom,#33CC00,#66FF22);   
  104.  }  
  105.   
  106.  .hr,.vr  
  107.  {  
  108.     position:absolute;  
  109.     background:#3300FF;  
  110.  }  
  111.   
  112.  .hr  
  113.  {  
  114.     height:1px;  
  115.     width:100%;     /*轮胎的水平线*/  
  116.     left:0;  
  117.     top:60px;  
  118.  }  
  119.   
  120.  .vr  
  121.  {  
  122.     width:1px;  
  123.     height:100%;    /*轮胎的垂直线*/  
  124.     left:60px;  
  125.     top:0;  
  126.  }  

JQuery与CSS3合体

这是一个效果与兼容性俱佳的方式（特别对于IE9暂不支持CSS3而言）

HTML代码（可以看到与CSS3中的HTML代码并无不同）：

[html] view
plaincopyprint?

  1. <html>  
  2.    <head>  
  3.       <meta charset="UTF-8" />  
  4.       <title>Animations in HTML5 using CSS3 animations</title>  
  5.        </head>  
  6.    <body>  
  7.       <div id="container">  
  8.       <div id="car">  
  9.          <div id="chassis"></div>  
  10.          <div id="backtire" class="tire">  
  11.          <div class="hr"></div>  
  12.          <div class="vr"></div>  
  13.          </div>  
  14.          <div id="fronttire" class="tire">  
  15.          <div class="hr"></div>  
  16.          <div class="vr"></div>  
  17.          </div>     
  18.       </div>  
  19.       <div id="grass"></div>  
  20.       </div>  
  21.       <footer></footer>  
  22.    </body>  
  23. </html>   

CSS:

[css] view
plaincopyprint?

  1. <style>  
  2.          body  
  3.      {  
  4.         padding:0;  
  5.         margin:0;  
  6.          }  
  7.   
  8.       #container  
  9.      {  
  10.         position:relative;  
  11.         width:100%;  
  12.         height:600px;  
  13.         overflow:hidden;        /*这个很重要*/  
  14.      }  
  15.   
  16.      #car  
  17.      {  
  18.         position:absolute;      /*汽车在容器中采用绝对定位*/  
  19.         width:400px;  
  20.         height:210px;       /*汽车的总高度，包括轮胎和底盘*/  
  21.         z-index:1;          /*让汽车在背景的上方*/  
  22.         top:300px;          /*距顶端的距离(y轴)*/  
  23.         left:50px;          /*距左侧的距离(x轴)*/  
  24.      }  
  25.   
  26.       /*车身*/  
  27.      #chassis  
  28.      {  
  29.         position:absolute;  
  30.         width:400px;  
  31.         height:130px;  
  32.         background:#FF9900;  
  33.         border: 2px solid #FF6600;  
  34.      }  
  35.       
  36.      /*轮胎*/  
  37.      .tire  
  38.      {  
  39.         z-index:1;          /*同上，轮胎也应置于背景的上方*/  
  40.         position:absolute;  
  41.         bottom:0;  
  42.         border-radius:60px;     /*圆半径*/  
  43.         height:120px;       /* 2*radius=height */  
  44.         width:120px;        /* 2*radius=width */  
  45.         background:#0099FF;     /*填充色*/  
  46.         border:1px solid #3300FF;  
  47.         -o-transform:rotate(0deg);  /*旋转(单位：度)*/  
  48.         -ms-transform:rotate(0deg);  
  49.         -webkit-transform:rotate(0deg);  
  50.         -moz-transform:rotate(0deg);  
  51.      }  
  52.   
  53.      #fronttire  
  54.      {  
  55.         right:20px;     /*设置右边的轮胎距离边缘的距离为20*/  
  56.      }  
  57.   
  58.      #backtire  
  59.      {  
  60.         left:20px;      /*设置左边的轮胎距离边缘的距离为20*/  
  61.      }  
  62.   
  63.      #grass  
  64.      {  
  65.         position:absolute;  /*背景绝对定位在容器中*/  
  66.         width:100%;  
  67.         height:130px;  
  68.         bottom:0;  
  69.         /*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */  
  70.         background:linear-grdaient(bottom,#33CC00,#66FF22);  
  71.         background:-webkit-linear-gradient(bottom,#33CC00,#66FF22);  
  72.         background:-moz-linear-gradient(bottom,#33CC00,#66FF22);  
  73.         background:-ms-linear-gradient(bottom,#33CC00,#66FF22);   
  74.      }  
  75.   
  76.      .hr,.vr  
  77.      {  
  78.         position:absolute;  
  79.         background:#3300FF;  
  80.      }  
  81.   
  82.      .hr  
  83.      {  
  84.         height:1px;  
  85.         width:100%;     /*水平线*/  
  86.         left:0;  
  87.         top:60px;  
  88.      }  
  89.   
  90.      .vr  
  91.      {  
  92.         width:1px;  
  93.         height:100%;    /*垂直线*/  
  94.         left:60px;  
  95.         top:0;  
  96.      }  
  97.   
  98.       </style>  

JS代码：

首先引入在线API：

[javascript] view
plaincopyprint?

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  

实现动画代码（相当简洁）：

[javascript] view
plaincopyprint?

  1. <script>  
  2.          $(function(){  
  3.          var rot=0;  
  4.          var prefix=$('.tire').css('-o-transform')?'-o-transform':($('.tire').css('-ms-transform')?'-ms-transform':($('.tire').css('-moz-transform')?'-moz-transform':($('.tire').css('-webkit-transform')?'-webkit-transform':'transform')));  
  5.   
  6.          var origin={       /*设置我们的起始点*/  
  7.          left:-400  
  8.          };  
  9.   
  10.          var animation={        /*该动画由jQuery执行*/  
  11.          left:1600      /*设置我们将移动到的最终位置*/  
  12.      };  
  13.   
  14.          var rotate=function(){ /*该方法将被旋转的轮子调用*/  
  15.          rot+=2;  
  16.          $('.tire').css(prefix,'rotate('+rot+'deg)');  
  17.      };  
  18.   
  19.          var options={      /*将要被jQuery使用的参数*/  
  20.          easing:'linear',   /*指定速度，此处只是线性，即为匀速*/  
  21.          duration:10000,    /*指定动画持续时间*/  
  22.          complete:function(){  
  23.             $('#car').css(origin).animate(animation,options);  
  24.          },  
  25.          step:rotate  
  26.      };  
  27.   
  28.          options.complete();  
  29.       });  
  30.       </script>  

简单讲解：prefix首先识别出当前是哪个定义被采用了（-o?-moz?-webkit?-ms?），然后定义了动画的起点位置和终点位置。接着，定义了设置旋转角度的函数（该函数将在在动画的每一步(step)中执行）。然后，定义了一个动画，该定义方式导致了无限自循环调用！

本文，通过一个简单的动画实例，演示了HTML5下，实现动画的几种常见方式。

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞