HTML5中怎么实现动画效果

2024-04-02 19:04:59 919人浏览安东尼

摘要

这期内容当中小编将会给大家带来有关HTML5中怎么实现动画效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。1.canvas html代码：代码如下:<html&

这期内容当中小编将会给大家带来有关HTML5中怎么实现动画效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

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 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：

代码如下:

实现动画代码（相当简洁）：

代码如下:

上述就是小编为大家分享的HTML5中怎么实现动画效果了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注编程网node.js频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: HTML5中怎么实现动画效果

本文链接: https://www.lsjlt.com/news/77477.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

HTML5中怎么实现动画效果

这期内容当中小编将会给大家带来有关HTML5中怎么实现动画效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。1.canvas html代码：代码如下:<html&...

99+

2024-04-02
html5动画过渡效果怎么实现

本篇内容介绍了“html5动画过渡效果怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！　　1、动...

99+

2024-04-02
html5中怎么实现3d旋转动画效果

这篇“html5中怎么实现3d旋转动画效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“h...

99+

2024-04-02
HTML5怎么实现树叶飘落动画效果

这篇“HTML5怎么实现树叶飘落动画效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“HT...

99+

2024-04-02
css3中怎么实现动画效果

今天就跟大家聊聊有关css3中怎么实现动画效果，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。css3的动画功能有以下三种:1、transition(...

99+

2024-04-02
怎么在HTML5中实现一个移动端弹幕动画效果

怎么在HTML5中实现一个移动端弹幕动画效果？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。思路把单个内容编辑好，计算自身宽度，确定初始位置移动的距离是屏幕宽度js动...

99+

2023-06-09
HTML5+CSS3怎么实现灵动的动画TAB切换效果

这篇文章将为大家详细讲解有关HTML5+CSS3怎么实现灵动的动画TAB切换效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。设计师给了一个 tab 切换的效果图。虽然是一个很小的功能，但是前端工程师在实...

99+

2023-06-08
怎么用HTML5 Canvas实现烟花绽放动画效果

这篇文章主要介绍“怎么用HTML5 Canvas实现烟花绽放动画效果”，在日常操作中，相信很多人在怎么用HTML5 Canvas实现烟花绽放动画效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方...

99+

2024-04-02
JavaScript中怎么实现DOM动画效果

JavaScript中怎么实现DOM动画效果，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。让一个元素从左至右进行运动<div id=&q...

99+

2024-04-02
html5缓动效果怎么实现

这篇文章主要介绍“html5缓动效果怎么实现”，在日常操作中，相信很多人在html5缓动效果怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”html5缓动效果怎么实现”...

99+

2024-04-02
CSS3中怎么实现滚动条动画效果

本篇文章给大家分享的是有关CSS3中怎么实现滚动条动画效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。<body> ...

99+

2024-04-02
WPF怎么实现3D画廊动画效果

要实现3D画廊动画效果，可以使用WPF的3D功能和动画功能。以下是一个简单的实现步骤：1. 创建一个WPF项目，并添加一个Viewp...

99+

2023-08-18

WPF
CSS怎么实现动画移动效果

这篇文章主要为大家展示了“CSS怎么实现动画移动效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS怎么实现动画移动效果”这篇文章吧。思路首先我们新建一个正方形，用<svg>&l...

99+

2023-06-27
CSS3中怎么实现闪烁动画效果

这期内容当中小编将会给大家带来有关CSS3中怎么实现闪烁动画效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。具体方法如下：给class属性名为className的元素添...

99+

2024-04-02
使用Html5怎么实现一个移动端弹幕动画效果

这期内容当中小编将会给大家带来有关使用Html5怎么实现一个移动端弹幕动画效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。思路把单个内容编辑好，计算自身宽度，确定初始位置移动的距离是屏幕宽度js动态的添...

99+

2023-06-09
CSS3中怎么实现平移动画效果

这期内容当中小编将会给大家带来有关CSS3中怎么实现平移动画效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。一、平移动画有关的CSS3属性以及相关的属性描述　　1、tr...

99+

2024-04-02
HTML5中怎么用Canvas实现文字动画特效

本篇内容介绍了“HTML5中怎么用Canvas实现文字动画特效”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成...

99+

2024-04-02
CSS3中怎么实现粒子动画效果

这期内容当中小编将会给大家带来有关CSS3中怎么实现粒子动画效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。按钮点击粒子动画<div class=&qu...

99+

2024-04-02
Vue3中怎么实现过渡动画效果

这篇文章主要介绍了Vue3中怎么实现过渡动画效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue3中怎么实现过渡动画效果文章都会有所收获，下面我们一起来看看吧。Vue的transition组件Vue中中提供...

99+

2023-06-29
Jetpack Compose怎么实现动画效果

这篇文章将为大家详细讲解有关Jetpack Compose怎么实现动画效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。概述compose 为支持动画提供了大量的 api，通过这些 api 我们...

99+

2023-06-29