如何使用html5与css3完成google涂鸦动画

如何使用html5与css3完成google涂鸦动画？

知道如何使用CSS3动画比知道如何使用元素更重要：因为浏览器能够优化那些元素的性能(通常是他们的样式，比如CSS)，而我们使用canvas自定义画出来的效果却不能被优化。原因又在于，浏览器使用的硬件主要取决于显卡的能力。目前，浏览器没有给予我们直接访问显卡的权力，比如，每一个绘画操作都不得不在浏览器中先调用某些函数。 1.canvas html代码：

代码如下:

Your browser does not support the -element.Please think about updating your brower!

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 //轮胎的半径

为了实例化汽车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 //重命名该按钮为“暂停” } }

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

代码如下:

function speed(delta){ var newRate=Math.max(rate+delta,0.1) dx=newRate/rate*dx rate=newRate } 页面加载的初始化方法： //init function init(){ c=document.getElementById(canvas).getContext(2d) drawCanvas() }

主调方法：

代码如下:

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 } }

画背景：

代码如下:

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

画车身：

代码如下:

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

画轮胎：

代码如下:

function drawTire(x,y){ w.save() w.translate(x,y) w.rotate(carAlpha) w.strokeStyle=#3300FF w.lineWidth=1 w.fillStyle=#0099FF w.beginPath() w.arc(0,0,radius,0,2*Math.PI,false) w.fill() w.closePath() w.beginPath() w.moveTo(radius,0) w.lineTo(-radius,0) w.stroke() w.closePath() w.beginPath() w.moveTo(0,radius) w.lineTo(0,-radius) w.stroke() w.closePath() w.restore() }

由于原理简单，并且代码中作了详细注释，这里就不一一讲解！ 2.CSS3 你将看到我们未通过一句JS代码就完全实现了和上面一样的动画效果： HTML代码：

代码如下:

CSS代码： body { padding:0 margin:0 }

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

代码如下:

/*定义动画：从-400px的位置移动到1600px的位置 */ @keyframes carAnimation { 0% { left:-400px } /* 指定初始位置，0%等同于from*/ 100% { left:1600px } /* 指定最终位置,100%等同于to*/ } /* Safari and Chrome */ @-webkit-keyframes carAnimation { 0% {left:-400px } 100% {left:1600px } } /* Firefox */ @-moz-keyframes carAnimation { 0% {left:-400 } 100% {left:1600px } } /*IE暂不支持,此处定义是为了向后兼容IE10*/ @-ms-keyframes carAnimation { 0% {left:-400px } 100%{left:1600px } } @keyframes tyreAnimation { 0% {transform: rotate(0) } 100% {transform: rotate(1800deg) } } @-webkit-keyframes tyreAnimation { 0% { -webkit-transform: rotate(0) } 100% { -webkit-transform: rotate(1800deg) } } @-moz-keyframes tyreAnimation { 0% { -moz-transform: rotate(0) } 100% { -moz-transform: rotate(1800deg) } } @-ms-keyframes tyreAnimation { 0% { -ms-transform: rotate(0) } 100% { -ms-transform: rotate(1800deg) } } #container { position:relative width:100% height:600px overflow:hidden /*这个很重要*/ } #car { position:absolute /*汽车在容器中采用绝对定位*/ width:400px height:210px /*汽车的总高度，包括轮胎和底盘*/ z-index:1 /*让汽车在背景的上方*/ top:300px /*距顶端的距离(y轴)*/ left:50px /*距左侧的距离(x轴)*/ /*以下内容赋予该元素预先定义的动画及相关属性*/ -webkit-animation-name:carAnimation /*名称*/ -webkit-animation-duration:10s /*持续时间*/ -webkit-animation-iteration-count:infinite /*迭代次数-无限次*/ -webkit-animation-timing-function:linear /*播放动画时从头到尾都以相同的速度*/ -moz-animation-name:carAnimation /*名称*/ -moz-animation-duration:10s /*持续时间*/ -moz-animation-iteration-count:infinite /*迭代次数-无限次*/ -moz-animation-timing-function:linear /*播放动画时从头到尾都以相同的速度*/ -ms-animation-name:carAnimation /*名称*/ -ms-animation-duration:10s /*持续时间*/ -ms-animation-iteration-count:infinite /*迭代次数-无限次*/ -ms-animation-timing-function:linear /*播放动画时从头到尾都以相同的速度*/ animation-name:carAnimation /*名称*/ animation-duration:10s /*持续时间*/ animation-iteration-count:infinite /*迭代次数-无限次*/ animation-timing-function:linear /*播放动画时从头到尾都以相同的速度*/ } /*车身*/ #chassis { position:absolute width:400px height:130px background:#FF9900 border: 2px solid #FF6600 } /*轮胎*/ .tire { z-index:1 /*同上，轮胎也应置于背景的上方*/ position:absolute bottom:0 border-radius:60px /*圆半径*/ height:120px /* 2*radius=height */ width:120px /* 2*radius=width */ background:#0099FF /*填充色*/ border:1px solid #3300FF -webkit-animation-name:tyreAnimation -webkit-animation-duration:10s -webkit-animation-iteration-count:infinite -webkit-animation-timing-function:linear -moz-animation-name:tyreAnimation -moz-animation-duration:10s -moz-animation-iteration-count:infinite -moz-animation-timing-function:linear -ms-animation-name:tyreAnimation -ms-animation-duration:10s -ms-animation-iteration-count:infinite -ms-animation-timing-function:linear animation-name:tyreAnimation animation-duration:10s animation-iteration-count:infinite animation-timing-function:linear } #fronttire { right:20px /*设置右边的轮胎距离边缘的距离为20*/ } #backtire { left:20px /*设置左边的轮胎距离边缘的距离为20*/ } #grass { position:absolute /*背景绝对定位在容器中*/ width:100% height:130px bottom:0 /*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */ background:linear-grdaient(bottom,#33CC00,#66FF22) background:-webkit-linear-gradient(bottom,#33CC00,#66FF22) background:-moz-linear-gradient(bottom,#33CC00,#66FF22) background:-ms-linear-gradient(bottom,#33CC00,#66FF22) } .hr,.vr { position:absolute background:#3300FF } .hr { height:1px width:100% /*轮胎的水平线*/ left:0 top:60px } .vr { width:1px height:100% /*轮胎的垂直线*/ left:60px top:0 }

3.JQuery与CSS3 这是一个效果与兼容性俱佳的方式（特别对于IE9暂不支持CSS3而言） HTML代码（可以看到与CSS3中的HTML代码并无不同）：

代码如下:

CSS:

JS代码： 首先引入在线API：

代码如下: