html5生日福利页面,福利到！HTML5实现动画两种方式

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

正在学习或者自学html5的小伙伴，是不是有的已经让video动画整疯掉了呢？哈哈！下面华清远见的小编就为大家两种实现方式！好好学习哦！

(1) canvas元素结合JS

(2) CSS3结合Jquery实现

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

1.canvas

html代码：

Animation in HTML5 using the canvas element

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

Slower

Play Faster

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代码(可以看到与CSS3中的HTML代码并无不同)：

Animations in HTML5 using CSS3 animations

CSS:

JS代码：

首先引入在线API：

实现动画代码：

怎么样是不是很详细！是不是据详细呢？不要问我小编是怎么会的。小编才不会告诉你实在华清远见学习的！