HTML5实现动画效果的方式汇总
建站知识 2021-07-02 23:00www.168986.cn长沙网站建设
长沙网络推广以一个运动的小车为例子，讲述了三种实现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(初始时被隐藏)，我们使用狼蚁网站SEO优化的自执行的匿名函数
复制代码
代码如下:(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/ratedx;
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.addColorS(0,'#33CC00');
grad.addColorS(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,2Math.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】）
复制代码
代码如下:/定义动画从-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; /让汽车在背景的上方/
: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; / 2radius=height /
width:120px; / 2radius=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;
:60px;
}
.vr
{
width:1px;
height:100%; /轮胎的垂直线/
left:60px;
: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; /让汽车在背景的上方/
: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; / 2radius=height /
width:120px; / 2radius=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;
:60px;
}
.vr
{
width:1px;
height:100%; /垂直线/
left:60px;
:0;
}
</style>
JS代码
引入在线API
复制代码
代码如下:<script src="https://ajax.googleapis./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, /指定动画持续时间/
plete:function(){
$('#car').css(origin).animate(animation,options);
},
step:rotate
};
options.plete();
});
</script>
简单讲解prefix识别出当前是哪个定义被采用了（-o?-moz?-webkit?-ms?），然后定义了动画的起点位置和终点位置。接 着，定义了设置旋转角度的函数（该函数将在在动画的每一步(step)中执行）。然后，定义了一个动画，该定义方式导致了无限自循环调用！
本文，通过一个简单的动画实例，演示了HTML5下，实现动画的几种常见方式。
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML