本文转自“千问千知”公众号（qwqz1000），转自标明来源！

原文链接：

实现HTML5动画的三种方式

本文以一个运动的小车为例子，讲述了三种实现HTML5动画的方式，思路清晰，动画不仅仅是Canvas，还有css3和javascript.通过合理的选择，来实现最优的实现。

PS：由于显卡、录制的帧间隔，以及可能你电脑处理器的原因，播放过程可能有些不太流畅或者失真！

分三种方式实现：

(1) canvas元素结合JS

(2) 纯粹的CSS3动画（暂不被所有主流浏览器支持，比如IE）

(3) CSS3结合Jquery实现

知道如何使用CSS3动画比知道如何使用<canvas>元素更重要：因为浏览器能够优化那些元素的性能（通常是他们的样式，比如CSS），而我们使用canvas自定义画出来的效果却不能被优化。原因又在于，浏览器使用的硬件主要取决于显卡的能力。

目前，浏览器没有给予我们直接访问显卡的权力，比如，每一个绘画操作都不得不在浏览器中先调用某些函数。

一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是一个buttonif(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;}

页面加载的初始化方法：

//initfunction 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();}

由于原理简单，并且代码中作了详细注释，这里就不一一讲解！

二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代码：

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

三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;      /*距顶端的距离(y轴)*/left:50px;      /*距左侧的距离(x轴)*/}/*车身*/#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;-o-transform:rotate(0deg);  /*旋转(单位：度)*/-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);}#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;}
</style>

JS代码：

<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={    /*该动画由jQuery执行*/left:1600    /*设置我们将移动到的最终位置*/};var rotate=function(){  /*该方法将被旋转的轮子调用*/rot+=2;$('.tire').css(prefix,'rotate('+rot+'deg)');};var options={    /*将要被jQuery使用的参数*/easing:'linear',  /*指定速度，此处只是线性，即为匀速*/duration:10000,  /*指定动画持续时间*/complete:function(){$('#car').css(origin).animate(animation,options);},step:rotate};options.complete();});
</script>

简单讲解：prefix首先识别出当前是哪个定义被采用了，然后定义了动画的起点位置和终点位置。接着，定义了设置旋转角度的函数（该函数将在动画的每一步(step)中执行）。然后，定义了一个动画，该定义方式导致了无限自循环调用！

在编程中很多种语言都是具有互通性，要想实现编程的全面发展，单单会一种语言是不够的，多样的编程不仅可以让你实现更多功能，也可以实现代码最优化的效果。

css3宽度变大动画_HTML5如何实现动画效果相关推荐

  1. css3宽度变大动画_学所 前端 | HTML5+CSS3

    HTML5 &CSS3 2020/09/5 啥?!HTML5是什么? "HTML5"和"HTML"有什么区别? 新增的HTML5特性有多好用? HTML ...

  2. css3宽度变大动画_H5 直播的疯狂点赞动画是如何实现的？

    直播有一个很重要的互动:点赞. 为了烘托直播间的氛围,直播相对于普通视频或者文本内容,点赞通常有两个特殊需求: 点赞动作无限次,引导用户疯狂点赞 直播间的所有疯狂点赞,都需要在所有用户界面都动画展现出 ...

  3. css3宽度变大动画_不会仪表？太尴尬了。14种动画让你轻松掌握各种流量计工作原理...

    相信很多同仁都和小编一样,在工厂干活做电气维护,电气仪表不分家.没办法,老板为了节约成本,很多公司是不配备专门的仪表工的.按理说,仪表工和电工是二个不同的工种,但是老板不理会这个啊.啊,李工,这个仪表 ...

  4. css3宽度变大动画_动画演示流量计的工作原理

    ​ 流量计(Flowmeter)是工业生产的眼睛,与国民经济.国防建设.科学研究有着密切的关系,在国民经济中占据重要地位与作用,可用于气体.液体.蒸汽等介质流量的测量.为了更好的展示流量计测量原理,小 ...

  5. css3宽度变大动画_【动画演示】流量计的工作原理，真涨见识!

    [培训]多热源联网供热技术与管网水力平衡调配技术培训班(2020年7月9-11日 泰安市) 本文转自:除灰脱硫脱硝技术联盟 流量计(Flowmeter)是工业生产的眼睛,与国民经济.国防建设.科学研究 ...

  6. css3宽度变大动画_动画演示14种流量计的工作原理，真涨见识!

    点上面蓝色字体直观学机械可长期订阅我们 法律顾问:赵建英律师 流量计(Flowmeter)是工业生产的眼睛,与国民经济.国防建设.科学研究有着密切的关系,在国民经济中占据重要地位与作用,可用于气体.液 ...

  7. css3宽度变大动画_动画演示14种流量计的工作原理，长知识

    流量计(Flowmeter)是工业生产的眼睛,与国民经济.国防建设.科学研究有着密切的关系,在国民经济中占据重要地位与作用,可用于气体.液体.蒸汽等介质流量的测量.为了更好的展示流量计测量原理,小编采 ...

  8. css3宽度变大动画_动画演示14种流量计的工作原理，真涨见识

    流量计(Flowmeter)是工业生产的眼睛,与国民经济.国防建设.科学研究有着密切的关系,在国民经济中占据重要地位与作用,可用于气体.液体.蒸汽等介质流量的测量.为了更好的展示流量计测量原理,小编采 ...

  9. css3宽度变大动画_动画演示流量计的工作原理，真涨见识

    流量计(Flowmeter)是工业生产的眼睛,与国民经济.国防建设.科学研究有着密切的关系,在国民经济中占据重要地位与作用,可用于气体.液体.蒸汽等介质流量的测量.为了更好的展示流量计测量原理,小编采 ...

  10. css3宽度变大动画_【HVAC】动画演示流量计的工作原理，真涨见识!

    流量计(Flowmeter)是工业生产的眼睛,与国民经济.国防建设.科学研究有着密切的关系,在国民经济中占据重要地位与作用,可用于气体.液体.蒸汽等介质流量的测量.为了更好地展示流量计测量原理,下面用 ...

最新文章

  1. hmlt ul li 水平排列
  2. ubuntu下搜狗输入法打出来两种字体
  3. 领域应用 | 企业效益最大化的秘密：知识图谱
  4. 【HTML5】HTML5基础语法汇总
  5. （转载）今天的她坐在凳子上面的【飞秋】
  6. ORA-00119，ORA-00132 错误处理
  7. python原理_强化学习：原理与Python实现
  8. 【cl】本地安装maven的jar包报错Artifact is already in the local repository
  9. 2021深圳杯d题数学建模 基于一个微分对策问题的机器学习能力定量评价
  10. mysql查出同义词_在数据库mysql中存储和检索同义词的最佳方法
  11. 幼儿园语言活动包括哪几类_幼儿园语言活动形式有哪些
  12. XUGU：利空频传，建网站如何去赚钱？
  13. 若A、B都是n阶正交阵，那么，A X B是正交阵吗？
  14. Totam animi repellendus consequuntur ad.Deserunt temporibMous nulla soluta distinctio voluptas esse.
  15. FAILURE: Build failed with an exception. * Where: Build file ‘D:\ProgramData\AndroidStudioProjects\ѧ
  16. IE安全系列：IE的自我介绍 （I）
  17. 使用大白菜启动盘修改HP机器win10开机密码
  18. 中国金属采矿行业前景调研及发展战略深度研究报告2022-2028年
  19. XFS，让新闻“真”起来
  20. 转载:linux drm原理及应用

热门文章

  1. EXCEL--：将多个单元格中的内容合并到一个单元格中
  2. 支付宝芝麻信用免押金接口源码demo开发php和java流程
  3. 独立同分布 independently identical distribution (iid)
  4. 绝地求生2月26服务器维护吗,绝地求生2月26日早上维护到几点 2.26更新维护公告...
  5. 解决 罗技Master 2s 在CAD中无法使用中键移动画布
  6. MySQL万字精华总结！mysql操作日志
  7. zzulioj1818: squee_spoon and his Cube VI
  8. 解决PR AE 2018打不开，且桌面出现报错文件
  9. Java五子棋小游戏（控制台纯Ai算法）
  10. 大话设计模式之爱你一万年：第十五章 行为模式：状态模式：为烧烤造个电梯：1. 状态模式基本概念