• 用HTML5实现动画

    用HTML5实现动画

    要在HTML5中实现动画，可以使用以下几种方法：CSS动画、使用元素和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. 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

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

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

    先看一个简单的例子：

    1. 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. 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. 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

  • 相关阅读:
    安卓案例：利用URLConnection下载音乐
    【Mapbox GL JS 入门】Map 对象及其属性
    BBS项目分布搭建二(个人站点相关)
    市政管理学考试复习资料
    ReactNative进阶（四十三）iOS项目Xcode本地联调
    vue3 ref和reactive使用watch属性的方法和区别
    非零基础自学Java (老师：韩顺平) 第15章 泛型 15.6 自定义泛型
    Oracle 简介与 Docker Compose部署
    现金储备超400亿的小鹏，进入中途蓄力时刻
    解决一次Cannot read properties of null (reading ‘length‘)的问题：
  • 原文地址：https://blog.csdn.net/cnds123/article/details/136118232