用HTML5实现动画

软件开发技术深度爱好者2024-02-18 15:33

用HTML5实现动画

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

一、CSS 动画

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

先看一个简单的例子：

html 复制代码 
<html>
   <head>
      <meta charset="UTF-8" />
      <title>在HTML5中用CSS3实现简单动画</title>
      <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            animation: myAnimation 2s infinite;
        }
    
        @keyframes myAnimation {
            0% { transform: translateX(0px); }
            50% { transform: translateX(200px); }
            100% { transform: translateX(0px); }
        }
     </style>
   </head>
   <body>  
      <div class="box"></div>  
   </body>
</html>

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

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

下面给出一个小车动画

由两部分组成：

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

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

html 复制代码 
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <title>在HTML5中用CSS3实现动画</title>
      <link rel="stylesheet" type="text/css" href="car.css">
   </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>
   </body>
</html>

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

css 复制代码 
 /*定义动画：从-400px的位置移动到1600px的位置 */
    @keyframes carAnimation {
      0% { left: -400px; }  /* 指定初始位置*/
      100% { left: 1600px; }  /* 指定最终位置*/
    }

    #car {
      position: absolute;
      width: 400px;
      height: 210px;
      top: 300px;
      left: 50px;
      animation: carAnimation 10s infinite linear;
    }
    
    #chassis {
      position: absolute;
      width: 400px;
      height: 130px;
      background: #FF9900;
      border: 2px solid #FF6600;
    }

    .tire {
      position: absolute;
      bottom: 0;
      height: 120px;
      width: 120px;
      border-radius: 60px;
      background: #0099FF;
      border: 1px solid #3300FF;
      animation: tyreAnimation 10s infinite linear;
    }

    #fronttire {
      right: 20px;
    }

    #backtire {
      left: 20px;
    }

    @keyframes tyreAnimation {
      0% { transform: rotate(0); }
      100% { transform: rotate(1800deg); }
    }
    
    #grass {
      position: absolute;
      width: 100%;
      height: 130px;
      bottom: 0;
      background: linear-gradient(bottom, #33CC00, #66FF22);
    }
    
    .hr {
      position: absolute;
      background: #3300FF;
      height: 2px;
      width: 100%;
      top: 60px;
    }
    
    .vr {
      position: absolute;
      background: #3300FF;
      width: 2px;
      height: 100%;
      left: 60px;
      top: 0;
    }

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

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

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

先看一个简单的例子：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>在HTML5中用canvas+JS简单动画</title>  
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var x = 0;
    var dx = 2; // 方块的移动速度以及方向

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillRect(x, 50, 50, 50);
        
        // 更新方块的位置
        x += dx;

        // 如果方块触碰到画布的右边缘或左边缘，反转方向
        if (x + 50 > canvas.width || x < 0) {
            dx = -dx;
        }

        requestAnimationFrame(draw);
    }

    draw();
</script>
</body>
</html>

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

运行效果：

下面给出一个小车动画

由两部分组成

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

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

html 复制代码 
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
         <title>在HTML5中用canvas+JS小车动画</title>
       
<style>
    body {
        margin: 0;
        overflow: hidden;
    }
    canvas {
        display: block;
    }
</style>
</head>
<body>
   <canvas id="canvas"></canvas>
   <script src="car.js"></script>
</body>
</html>

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

javascript 复制代码 
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas full screen
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight-120;  //

    const car = {
        x: 50,
        y: canvas.height - 180,  //
        width: 200,
        height: 100,
        wheelRadius: 40,
        wheelOffset: 25,
        wheelRotation: 0
    };

    function drawCar(x, y, width, height, wheelRadius, wheelOffset, wheelRotation) {
        // Draw car body
        ctx.fillStyle = 'orange';
        ctx.fillRect(x, y, width, height);

        // Draw wheels
        const wheelPositions = [
            { x: x + wheelOffset, y: y + height },
            { x: x + width - wheelOffset, y: y + height }
        ];

        wheelPositions.forEach(wheelPos => {
            ctx.save();
            ctx.translate(wheelPos.x, wheelPos.y);
            ctx.rotate(wheelRotation);

            // Draw wheel
            ctx.beginPath();
            ctx.arc(0, 0, wheelRadius, 0, Math.PI * 2);
            ctx.fillStyle = 'blue';
            ctx.fill();

            // Draw spokes
            ctx.beginPath();
            ctx.moveTo(-wheelRadius, 0);
            ctx.lineTo(wheelRadius, 0);
            ctx.moveTo(0, -wheelRadius);
            ctx.lineTo(0, wheelRadius);
            ctx.strokeStyle = 'white';
            ctx.lineWidth = 4;
            ctx.stroke();

            ctx.restore();
        });
    }

    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Draw ground
        ctx.fillStyle = 'green';
        ctx.fillRect(0, canvas.height - 50, canvas.width, 50);

        // Update wheel rotation
        car.wheelRotation += 0.05;

        // Draw car
        drawCar(car.x, car.y, car.width, car.height, car.wheelRadius, car.wheelOffset, car.wheelRotation);

        // Move car
        car.x += 2;
        if (car.x > canvas.width) {
            car.x = -car.width;
        }

        requestAnimationFrame(animate);
    }

    animate();

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

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

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

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

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

源码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在HTML5中用canvas+JS小车可控动画</title>
<style>
    body {
        margin: 0;
        overflow: hidden;
    }
    canvas {
        display: block;
    }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<button id="pauseResumeBtn">暂停/继续</button>
<button id="speedUpBtn">快</button>
<button id="speedDownBtn">慢</button>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas full screen
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - 120;  //

    const car = {
        x: 50,
        y: canvas.height - 180,  //
        width: 200,
        height: 100,
        wheelRadius: 40,
        wheelOffset: 25,
        wheelRotation: 0,
        speed: 2
    };

    let isPaused = false;

    function drawCar(x, y, width, height, wheelRadius, wheelOffset, wheelRotation) {
        // Draw car body
        ctx.fillStyle = 'orange';
        ctx.fillRect(x, y, width, height);

        // Draw wheels
        const wheelPositions = [
            { x: x + wheelOffset, y: y + height },
            { x: x + width - wheelOffset, y: y + height }
        ];

        wheelPositions.forEach(wheelPos => {
            ctx.save();
            ctx.translate(wheelPos.x, wheelPos.y);
            ctx.rotate(wheelRotation);

            // Draw wheel
            ctx.beginPath();
            ctx.arc(0, 0, wheelRadius, 0, Math.PI * 2);
            ctx.fillStyle = 'blue';
            ctx.fill();

            // Draw spokes
            ctx.beginPath();
            ctx.moveTo(-wheelRadius, 0);
            ctx.lineTo(wheelRadius, 0);
            ctx.moveTo(0, -wheelRadius);
            ctx.lineTo(0, wheelRadius);
            ctx.strokeStyle = 'white';
            ctx.lineWidth = 4;
            ctx.stroke();

            ctx.restore();
        });
    }

    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Draw ground
        ctx.fillStyle = 'green';
        ctx.fillRect(0, canvas.height - 50, canvas.width, 50);

        // Update wheel rotation
        car.wheelRotation += 0.05;

        // Draw car
        drawCar(car.x, car.y, car.width, car.height, car.wheelRadius, car.wheelOffset, car.wheelRotation);

        // Move car
        car.x += car.speed;
        if (car.x > canvas.width) {
            car.x = -car.width;
        }

        if (!isPaused) {
            requestAnimationFrame(animate);
        }
    }

    // Button event listeners
    document.getElementById('pauseResumeBtn').addEventListener('click', function() {
        isPaused = !isPaused;
        if (!isPaused) {
            animate();
        }
    });

    document.getElementById('speedUpBtn').addEventListener('click', function() {
        car.speed += 1;
    });

    document.getElementById('speedDownBtn').addEventListener('click', function() {
        if (car.speed > 1) {
            car.speed -= 1;
        }
    });

    animate();
</script>
</body>
</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

相关推荐
qq_390161775 分钟前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test35 分钟前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理：Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法，脚手架，父子传参，refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具（查看CSS属性）
前端·chrome
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解