如何用HTML代码制作动画

创作时间:

作者:

@小白创作中心

如何用HTML代码制作动画

引用

来源

https://docs.pingcode.com/baike/3010087

本文将详细介绍如何使用HTML代码制作动画，包括CSS动画、JavaScript动画和SVG动画三种主要方法。通过具体的代码示例，帮助读者掌握动画制作的基本技巧，并了解如何结合使用这些技术实现复杂的动画效果。

CSS动画

CSS动画是一种简单且高效的方法来制作网页动画。它主要通过@keyframes规则和animation属性来实现。

@keyframes规则

@keyframes规则定义动画的关键帧。每个关键帧描述动画在特定时间点的状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @keyframes example {
            0% {background-color: red;}
            50% {background-color: yellow;}
            100% {background-color: green;}
        }
        .animated-div {
            width: 100px;
            height: 100px;
            background-color: red;
            animation: example 4s infinite;
        }
    </style>
</head>
<body>
    <div class="animated-div"></div>
</body>
</html>

animation属性

animation属性用于将动画应用到元素上。它包括以下几个子属性：

animation-name: 指定@keyframes的名称。
animation-duration: 动画的持续时间。
animation-timing-function: 动画的过渡效果（如线性、匀速等）。
animation-delay: 动画开始前的延迟时间。
animation-iteration-count: 动画的播放次数。
animation-direction: 动画的方向。

JavaScript动画

JavaScript动画提供了更高的灵活性，可以通过编写自定义脚本来实现复杂的动画效果。

setInterval和setTimeout

通过setInterval和setTimeout函数，可以在指定的时间间隔内执行动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .animated-div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="animated-div" id="box"></div>
    <script>
        let box = document.getElementById('box');
        let pos = 0;
        let id = setInterval(frame, 10);
        function frame() {
            if (pos == 350) {
                clearInterval(id);
            } else {
                pos++;
                box.style.top = pos + 'px';
                box.style.left = pos + 'px';
            }
        }
    </script>
</body>
</html>

requestAnimationFrame

requestAnimationFrame是现代浏览器提供的一个API，用于更高效地执行动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .animated-div {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="animated-div" id="box"></div>
    <script>
        let box = document.getElementById('box');
        let pos = 0;
        function frame() {
            if (pos < 350) {
                pos++;
                box.style.top = pos + 'px';
                box.style.left = pos + 'px';
                requestAnimationFrame(frame);
            }
        }
        requestAnimationFrame(frame);
    </script>
</body>
</html>

SVG动画

SVG动画适用于矢量图形，可以通过SMIL（Synchronized Multimedia Integration Language）或CSS和JavaScript来实现。

SMIL动画

SMIL是一种基于XML的语言，用于定义SVG中的动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" fill="red">
            <animate attributeName="cx" from="50" to="150" dur="5s" repeatCount="indefinite" />
        </circle>
    </svg>
</body>
</html>

CSS和JavaScript动画

同样可以通过CSS和JavaScript来控制SVG元素的动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .animated-circle {
            fill: blue;
            transition: cx 2s;
        }
    </style>
</head>
<body>
    <svg width="100" height="100">
        <circle class="animated-circle" cx="50" cy="50" r="40"></circle>
    </svg>
    <script>
        let circle = document.querySelector('.animated-circle');
        circle.addEventListener('click', function() {
            circle.setAttribute('cx', '150');
        });
    </script>
</body>
</html>

结合CSS、JavaScript和SVG制作复杂动画

通过结合使用CSS、JavaScript和SVG，可以制作出复杂且高效的动画效果。以下是一个综合示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .animated-div {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            animation: move 5s linear infinite;
        }
        @keyframes move {
            0% {top: 0; left: 0;}
            50% {top: 200px; left: 200px;}
            100% {top: 0; left: 0;}
        }
        .animated-circle {
            fill: orange;
            transition: cx 2s;
        }
    </style>
</head>
<body>
    <div class="animated-div"></div>
    <svg width="100" height="100">
        <circle class="animated-circle" cx="50" cy="50" r="40"></circle>
    </svg>
    <script>
        let circle = document.querySelector('.animated-circle');
        circle.addEventListener('click', function() {
            circle.setAttribute('cx', '150');
        });
        let box = document.querySelector('.animated-div');
        let pos = 0;
        function moveBox() {
            if (pos < 350) {
                pos++;
                box.style.top = pos + 'px';
                box.style.left = pos + 'px';
                requestAnimationFrame(moveBox);
            }
        }
        requestAnimationFrame(moveBox);
    </script>
</body>
</html>

在以上示例中，结合使用了CSS动画、JavaScript动画和SVG动画，展示了如何将不同方法结合起来实现复杂的动画效果。