行业资讯

HTML如何实现动画

发布时间：2022-02-22 14:10:29 作者：小新
来源：亿速云 阅读：141

小编给大家分享一下HTML如何实现动画，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

方法一：canvas

HTML代码部分：

<html> 
   <head> 
      <meta charset="UTF-8" /> 
         <title>Animation in HTML5 using the canvas element</title> 
    </head> 
   <body οnlοad="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" οnclick="speed(-0.1);">Slower</button> 
         <button type="button" οnclick="play(this);">Play</button> 
     <button type="button" οnclick="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&gt;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);    //同样的，第二个

    }

画轮胎：

unction 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

你将看到我们未通过一句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; }
 }</pre><pre class="css" > @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); }
 }</pre><pre class="css" > #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代码并无不同）：

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

JS代码：

首先引入在线API：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></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();
  });

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

以上是“HTML如何实现动画”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！

推荐阅读：
  1. 在HTML中实现动画的方法
  2. 用HTML怎么实现简单动画效果

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

html

上一篇：在html5中怎么实现图片的瀑布流布局

下一篇：html5如何使用canvas实现待机动画

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号