该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
正在学习或者自学html5的小伙伴,是不是有的已经让video动画整疯掉了呢?哈哈!下面华清远见的小编就为大家两种实现方式!好好学习哦!
(1) canvas元素结合JS
(2) CSS3结合Jquery实现
知道如何使用CSS3动画比知道如何使用元素更重要:因为浏览器能够优化那些元素的性能(通常是他们的样式,比如CSS),而我们使用canvas自定义画出来的效果却不能被优化。原因又在于,浏览器使用的硬件主要取决于显卡的能力。目前,浏览器没有给予我们直接访问显卡的权力,比如,每一个绘画操作都不得不在浏览器中先调用某些函数。
1.canvas
html代码:
Animation in HTML5 using the canvas elementYour 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 animationsCSS:
JS代码:
首先引入在线API:
实现动画代码:
怎么样是不是很详细!是不是据详细呢?不要问我小编是怎么会的。小编才不会告诉你实在华清远见学习的!