今天小编跟大家讲解下有关HTML5实现动画效果的方式汇总 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML5实现动画效果的方式汇总 的相关资料，希望小伙伴们看了有所帮助。
小编以一个运动的小车为例子 讲述了三种实现HTML5动画的方式 思路清晰 动画不仅仅是canvas 还有css3和javascript.通过合理的选择 来实现最优的实现。 PS：由于显卡、录制的帧间隔 以及可能你电脑处理器的原因 播放过程可能有些不太流畅或者失真！ 分三种方式实现： (1) canvas元素结合JS (2) 纯粹的CSS3动画（暂不被所有主流浏览器支持 比如IE） (3) CSS3结合Jquery实现 知道如何使用CSS3动画比知道如何使用<canvas>元素更重要：因为浏览器能够优化那些元素的性能(通常是他们的样式 比如CSS) 而我们使用canvas自定义画出来的效果却不能被优化。原因又在于 浏览器使用的硬件主要取决于显卡的能力。目前 浏览器没有给予我们直接访问显卡的权力 比如 每一个绘画操作都不得不在浏览器中先调用某些函数。 1.canvas html代码： 复制代码代码如下:<html> <head> <meta charset="UTF-8"/> <title>Animation in HTML5 using the canvas element</title> </head> <body onload="init();"> <canvas id="canvas"width="1000"height="600">Your browser does not support the <code><canvas></code>-element.Please think about updating your brower!</canvas> <div id="controls"> <button type="button"onclick="speed(-0.1);">Slower</button> <button type="button"onclick="play(this);">Play</button> <button type="button"onclick="speed(+0.1)">Faster</button> </div> </body> </html>
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代码： 复制代码代码如下:<html> <head> <meta charset="UTF-8"/> <title>Animations in HTML5 using CSS3 animations</title> </head> <body> <div id="container"> <div id="car"> <div id="chassis"></div> <div id="backtire"class="tire"> <div class="hr"></div> <div class="vr"></div> </div> <div id="fronttire"class="tire"> <div class="hr"></div> <div class="vr"></div> </div> </div> <div id="grass"></div> </div> <footer></footer> </body> </html> CSS代码： body { padding:0; margin:0; }
定义车身与轮胎转到的动画（你会看到基本每一个动画都有四个版本的定义：原生版本/webkit【Chrome|Safari】/ms【为了向后兼容IE10】/moz【FireFox】） 复制代码代码如下: @keyframes carAnimation { 0% { left:-400px; } 100% { left:1600px; } } @-webkit-keyframes carAnimation { 0% {left:-400px; } 100% {left:1600px; } } @-moz-keyframes carAnimation { 0% {left:-400; } 100% {left:1600px; } } @-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; left:50px; -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; width:120px; 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; } #backtire { left:20px; } #grass { position:absolute; width:100%; height:130px; bottom:0; 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代码并无不同）： 复制代码代码如下:<html> <head> <meta charset="UTF-8"/> <title>Animations in HTML5 using CSS3 animations</title> </head> <body> <div id="container"> <div id="car"> <div id="chassis"></div> <div id="backtire"class="tire"> <div class="hr"></div> <div class="vr"></div> </div> <div id="fronttire"class="tire"> <div class="hr"></div> <div class="vr"></div> </div> </div> <div id="grass"></div> </div> <footer></footer> </body> </html> CSS: <style> body { padding:0; margin:0; } #container { position:relative; width:100%; height:600px; overflow:hidden; } #car { position:absolute; width:400px; height:210px; z-index:1; top:300px; left:50px; } #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; width:120px; background:#0099FF; border:1px solid #3300FF; -o-transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); } #fronttire { right:20px; } #backtire { left:20px; } #grass { position:absolute; width:100%; height:130px; bottom:0; 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; } </style>
JS代码： 首先引入在线API： 复制代码代码如下:<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
实现动画代码（相当简洁）： 复制代码代码如下:<script> $(function(){ var rot=0; 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'))); var origin={ left:-400 }; var animation={ left:1600 }; var rotate=function(){ rot+=2; $('.tire').css(prefix,'rotate('+rot+'deg)'); }; var options={ easing:'linear', duration:10000, complete:function(){ $('#car').css(origin).animate(animation,options); }, step:rotate }; options.complete(); }); </script>
简单讲解：prefix首先识别出当前是哪个定义被采用了（-o?-moz?-webkit?-ms?） 然后定义了动画的起点位置和终点位置。接 着 定义了设置旋转角度的函数（该函数将在在动画的每一步(step)中执行）。然后 定义了一个动画 该定义方式导致了无限自循环调用！ 本文 通过一个简单的动画实例 演示了HTML5下 实现动画的几种常见方式。
来源：爱蒂网
