devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

用HTML5实现动画

作者：笔触狂放9 | 2024-02-16 22:06:39

赞

踩

用HTML5实现动画

用HTML5实现动画

要在HTML5中实现动画，可以使用以下几种方法：CSS动画、使用<canvas>元素和JavaScript来实现动画、使用JavaScript动画库。重点介绍前两种。

一、CSS动画

CSS3 动画：使用CSS3的动画属性和关键帧（keyframes）来创建动画效果。通过定义动画的开始状态、结束状态和过渡效果，可以实现平滑的动画效果。

先看一个简单的例子：

  1. <html>
  2.    <head>
  3.       <meta charset="UTF-8" />
  4.       <title>在HTML5中用CSS3实现简单动画</title>
  5.       <style>
  6.         .box {
  7.             width: 100px;
  8.             height: 100px;
  9.             background-color: red;
  10.             animation: myAnimation 2s infinite;
  11.         }
  12.     
  13.         @keyframes myAnimation {
  14.             0% { transform: translateX(0px); }
  15.             50% { transform: translateX(200px); }
  16.             100% { transform: translateX(0px); }
  17.         }
  18.      </style>
  19.    </head>
  20.    <body>  
  21.       <div class="box"></div>  
  22.    </body>
  23. </html>

我这里命名为：CSS3简单动画.html

用浏览器打开，运行效果：

下面给出一个小车动画

由两部分组成：

HTML文件和CSS文件，为方便使用，我将这两个文件放在同一文件夹中。

HTML文件，我这里命名为：CSS3小车动画.html，源码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.    <head>
  4.       <meta charset="UTF-8" />
  5.       <title>在HTML5中用CSS3实现动画</title>
  6.       <link rel="stylesheet" type="text/css" href="car.css">
  7.    </head>
  8.    <body>
  9.       <div id="container">
  10.           <div id="car">
  11.           <div id="chassis"></div>
  12.           <div id="backtire" class="tire">
  13.                 <div class="hr"></div>
  14.                 <div class="vr"></div>
  15.           </div>
  16.           <div id="fronttire" class="tire">
  17.                 <div class="hr"></div>
  18.                 <div class="vr"></div>
  19.           </div>	
  20.                  </div>
  21.                  <div id="grass"></div>
  22.       </div>
  23.    </body>
  24. </html>

CSS文件，我这里命名为：car.css，源码如下：

  1.  /*定义动画：从-400px的位置移动到1600px的位置 */
  2.     @keyframes carAnimation {
  3.       0% { left: -400px; }  /* 指定初始位置*/
  4.       100% { left: 1600px; }  /* 指定最终位置*/
  5.     }
  6.  
  7.     #car {
  8.       position: absolute;
  9.       width: 400px;
  10.       height: 210px;
  11.       top: 300px;
  12.       left: 50px;
  13.       animation: carAnimation 10s infinite linear;
  14.     }
  15.     
  16.     #chassis {
  17.       position: absolute;
  18.       width: 400px;
  19.       height: 130px;
  20.       background: #FF9900;
  21.       border: 2px solid #FF6600;
  22.     }
  23.  
  24.     .tire {
  25.       position: absolute;
  26.       bottom: 0;
  27.       height: 120px;
  28.       width: 120px;
  29.       border-radius: 60px;
  30.       background: #0099FF;
  31.       border: 1px solid #3300FF;
  32.       animation: tyreAnimation 10s infinite linear;
  33.     }
  34.  
  35.     #fronttire {
  36.       right: 20px;
  37.     }
  38.  
  39.     #backtire {
  40.       left: 20px;
  41.     }
  42.  
  43.     @keyframes tyreAnimation {
  44.       0% { transform: rotate(0); }
  45.       100% { transform: rotate(1800deg); }
  46.     }
  47.     
  48.     #grass {
  49.       position: absolute;
  50.       width: 100%;
  51.       height: 130px;
  52.       bottom: 0;
  53.       background: linear-gradient(bottom, #33CC00, #66FF22);
  54.     }
  55.     
  56.     .hr {
  57.       position: absolute;
  58.       background: #3300FF;
  59.       height: 2px;
  60.       width: 100%;
  61.       top: 60px;
  62.     }
  63.     
  64.     .vr {
  65.       position: absolute;
  66.       background: #3300FF;
  67.       width: 2px;
  68.       height: 100%;
  69.       left: 60px;
  70.       top: 0;
  71.     }

我这里命名为：CSS3简单动画.html

用浏览器打开，运行效果：

二、使用<canvas>元素和JavaScript来实现动画

先看一个简单的例子：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>在HTML5中用canvas+JS简单动画</title>  
  6. </head>
  7. <body>
  8. <canvas id="myCanvas" width="400" height="200"></canvas>
  9. <script>
  10.     var canvas = document.getElementById("myCanvas");
  11.     var ctx = canvas.getContext("2d");
  12.     var x = 0;
  13.     var dx = 2; // 方块的移动速度以及方向
  14.  
  15.     function draw() {
  16.         ctx.clearRect(0, 0, canvas.width, canvas.height);
  17.         ctx.fillRect(x, 50, 50, 50);
  18.         
  19.         // 更新方块的位置
  20.         x += dx;
  21.  
  22.         // 如果方块触碰到画布的右边缘或左边缘，反转方向
  23.         if (x + 50 > canvas.width || x < 0) {
  24.             dx = -dx;
  25.         }
  26.  
  27.         requestAnimationFrame(draw);
  28.     }
  29.  
  30.     draw();
  31. </script>
  32. </body>
  33. </html>

我这里命名为：canvas+JS简单动画.html

运行效果：

下面给出一个小车动画

由两部分组成

HTML文件和JavaScript文件，为方便使用，我将这两个文件放在同一文件夹中。

HTML文件，我这里命名为：canvas+JS小车动画.html，源码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.    <head>
  4.       <meta charset="UTF-8" />
  5.          <title>在HTML5中用canvas+JS小车动画</title>
  6.        
  7. <style>
  8.     body {
  9.         margin: 0;
  10.         overflow: hidden;
  11.     }
  12.     canvas {
  13.         display: block;
  14.     }
  15. </style>
  16. </head>
  17. <body>
  18.    <canvas id="canvas"></canvas>
  19.    <script src="car.js"></script>
  20. </body>
  21. </html>

JavaScript文件，我这里命名为：car.js，源码如下：

  1.     const canvas = document.getElementById('canvas');
  2.     const ctx = canvas.getContext('2d');
  3.  
  4.     // Set canvas full screen
  5.     canvas.width = window.innerWidth;
  6.     canvas.height = window.innerHeight-120;  //
  7.  
  8.     const car = {
  9.         x: 50,
  10.         y: canvas.height - 180,  //
  11.         width: 200,
  12.         height: 100,
  13.         wheelRadius: 40,
  14.         wheelOffset: 25,
  15.         wheelRotation: 0
  16.     };
  17.  
  18.     function drawCar(x, y, width, height, wheelRadius, wheelOffset, wheelRotation) {
  19.         // Draw car body
  20.         ctx.fillStyle = 'orange';
  21.         ctx.fillRect(x, y, width, height);
  22.  
  23.         // Draw wheels
  24.         const wheelPositions = [
  25.             { x: x + wheelOffset, y: y + height },
  26.             { x: x + width - wheelOffset, y: y + height }
  27.         ];
  28.  
  29.         wheelPositions.forEach(wheelPos => {
  30.             ctx.save();
  31.             ctx.translate(wheelPos.x, wheelPos.y);
  32.             ctx.rotate(wheelRotation);
  33.  
  34.             // Draw wheel
  35.             ctx.beginPath();
  36.             ctx.arc(0, 0, wheelRadius, 0, Math.PI * 2);
  37.             ctx.fillStyle = 'blue';
  38.             ctx.fill();
  39.  
  40.             // Draw spokes
  41.             ctx.beginPath();
  42.             ctx.moveTo(-wheelRadius, 0);
  43.             ctx.lineTo(wheelRadius, 0);
  44.             ctx.moveTo(0, -wheelRadius);
  45.             ctx.lineTo(0, wheelRadius);
  46.             ctx.strokeStyle = 'white';
  47.             ctx.lineWidth = 4;
  48.             ctx.stroke();
  49.  
  50.             ctx.restore();
  51.         });
  52.     }
  53.  
  54.     function animate() {
  55.         ctx.clearRect(0, 0, canvas.width, canvas.height);
  56.  
  57.         // Draw ground
  58.         ctx.fillStyle = 'green';
  59.         ctx.fillRect(0, canvas.height - 50, canvas.width, 50);
  60.  
  61.         // Update wheel rotation
  62.         car.wheelRotation += 0.05;
  63.  
  64.         // Draw car
  65.         drawCar(car.x, car.y, car.width, car.height, car.wheelRadius, car.wheelOffset, car.wheelRotation);
  66.  
  67.         // Move car
  68.         car.x += 2;
  69.         if (car.x > canvas.width) {
  70.             car.x = -car.width;
  71.         }
  72.  
  73.         requestAnimationFrame(animate);
  74.     }
  75.  
  76.     animate();

用浏览器打开，效果如下：

修改上面源码，将两个文件合二为一，并添加几个控制按钮“暂停/继续”、“快”、“慢”，并实现相关功能：

点击pauseResumeBtn按钮会切换动画的暂停和继续状态。

点击speedUpBtn按钮会增加小车的速度。

点击speedDownBtn按钮会减慢小车的速度，但速度不能小于1。

源码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>在HTML5中用canvas+JS小车可控动画</title>
  6. <style>
  7.     body {
  8.         margin: 0;
  9.         overflow: hidden;
  10.     }
  11.     canvas {
  12.         display: block;
  13.     }
  14. </style>
  15. </head>
  16. <body>
  17. <canvas id="canvas"></canvas>
  18. <button id="pauseResumeBtn">暂停/继续</button>
  19. <button id="speedUpBtn">快</button>
  20. <button id="speedDownBtn">慢</button>
  21. <script>
  22.     const canvas = document.getElementById('canvas');
  23.     const ctx = canvas.getContext('2d');
  24.  
  25.     // Set canvas full screen
  26.     canvas.width = window.innerWidth;
  27.     canvas.height = window.innerHeight - 120;  //
  28.  
  29.     const car = {
  30.         x: 50,
  31.         y: canvas.height - 180,  //
  32.         width: 200,
  33.         height: 100,
  34.         wheelRadius: 40,
  35.         wheelOffset: 25,
  36.         wheelRotation: 0,
  37.         speed: 2
  38.     };
  39.  
  40.     let isPaused = false;
  41.  
  42.     function drawCar(x, y, width, height, wheelRadius, wheelOffset, wheelRotation) {
  43.         // Draw car body
  44.         ctx.fillStyle = 'orange';
  45.         ctx.fillRect(x, y, width, height);
  46.  
  47.         // Draw wheels
  48.         const wheelPositions = [
  49.             { x: x + wheelOffset, y: y + height },
  50.             { x: x + width - wheelOffset, y: y + height }
  51.         ];
  52.  
  53.         wheelPositions.forEach(wheelPos => {
  54.             ctx.save();
  55.             ctx.translate(wheelPos.x, wheelPos.y);
  56.             ctx.rotate(wheelRotation);
  57.  
  58.             // Draw wheel
  59.             ctx.beginPath();
  60.             ctx.arc(0, 0, wheelRadius, 0, Math.PI * 2);
  61.             ctx.fillStyle = 'blue';
  62.             ctx.fill();
  63.  
  64.             // Draw spokes
  65.             ctx.beginPath();
  66.             ctx.moveTo(-wheelRadius, 0);
  67.             ctx.lineTo(wheelRadius, 0);
  68.             ctx.moveTo(0, -wheelRadius);
  69.             ctx.lineTo(0, wheelRadius);
  70.             ctx.strokeStyle = 'white';
  71.             ctx.lineWidth = 4;
  72.             ctx.stroke();
  73.  
  74.             ctx.restore();
  75.         });
  76.     }
  77.  
  78.     function animate() {
  79.         ctx.clearRect(0, 0, canvas.width, canvas.height);
  80.  
  81.         // Draw ground
  82.         ctx.fillStyle = 'green';
  83.         ctx.fillRect(0, canvas.height - 50, canvas.width, 50);
  84.  
  85.         // Update wheel rotation
  86.         car.wheelRotation += 0.05;
  87.  
  88.         // Draw car
  89.         drawCar(car.x, car.y, car.width, car.height, car.wheelRadius, car.wheelOffset, car.wheelRotation);
  90.  
  91.         // Move car
  92.         car.x += car.speed;
  93.         if (car.x > canvas.width) {
  94.             car.x = -car.width;
  95.         }
  96.  
  97.         if (!isPaused) {
  98.             requestAnimationFrame(animate);
  99.         }
  100.     }
  101.  
  102.     // Button event listeners
  103.     document.getElementById('pauseResumeBtn').addEventListener('click', function() {
  104.         isPaused = !isPaused;
  105.         if (!isPaused) {
  106.             animate();
  107.         }
  108.     });
  109.  
  110.     document.getElementById('speedUpBtn').addEventListener('click', function() {
  111.         car.speed += 1;
  112.     });
  113.  
  114.     document.getElementById('speedDownBtn').addEventListener('click', function() {
  115.         if (car.speed > 1) {
  116.             car.speed -= 1;
  117.         }
  118.     });
  119.  
  120.     animate();
  121. </script>
  122. </body>
  123. </html>

我这里保存命名为：canvas+JS小车可控动画.html

用浏览器打开，效果如下：

三、使用JavaScript动画库

使用JavaScript动画库（如Anime.js、Velocity.js、Three.js等）可以更方便地创建复杂的动画效果，我没有深入学习了解，在此就不介绍了。

附录：

CSS3动画详解（图文教程） https://www.cnblogs.com/qianguyihao/p/8435182.html

anime.js 简单入门教程https://www.cnblogs.com/joyco773/p/10734850.html

Velocity.js 中文文档https://www.cnblogs.com/guandekuan/p/6643988.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/97144
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号