admin管理员组

文章数量:815885

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:

实现动画代码:

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

本文标签: html5生日福利页面福利到!HTML5实现动画两种方式