JS动画效果|极客笔记

JS动画效果

随着互联网的不断发展和普及，网页设计和开发的要求也越来越高。其中，动画效果在网页设计中起着至关重要的作用。通过动画效果，可以使网页更加生动、吸引人，并且增加用户体验。在网页开发中，我们通常使用CSS和JavaScript来实现动画效果。本文将重点介绍如何使用JavaScript实现动画效果，包括常见的动画效果和实现方式。

1. 基本动画效果

1.1 淡入淡出效果

淡入淡出效果是最基本的动画效果之一，通过改变元素的透明度来实现。我们可以使用JavaScript中的setInterval和clearInterval方法来控制元素透明度的改变，从而实现淡入淡出效果。

<!DOCTYPE html>
<html>
<head>
    <title>淡入淡出效果</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            opacity: 0;
            transition: opacity 1s;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button onclick="fadeInOut()">淡入淡出</button>

    <script>
        let intervalId;
        let opacity = 0;
        let step = 0.1;

        function fadeInOut() {
            intervalId = setInterval(() => {
                opacity += step;
                if (opacity > 1 || opacity < 0) {
                    step = -step;
                }
                document.querySelector('.box').style.opacity = opacity;
            }, 100);
        }
    </script>
</body>
</html>

在上面的示例中，我们通过点击按钮触发fadeInOut函数，实现了一个简单的淡入淡出效果。当元素的透明度大于1或小于0时，改变步进值的正负号，实现了往复的淡入淡出效果。

1.2 平移效果

平移效果是指让元素沿着水平或垂直方向移动。我们可以使用JavaScript中的setInterval方法来实现元素的平移效果。

<!DOCTYPE html>
<html>
<head>
    <title>平移效果</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button onclick="translate()">平移</button>

    <script>
        let intervalId;
        let positionX = 0;
        let step = 5;

        function translate() {
            intervalId = setInterval(() => {
                positionX += step;
                document.querySelector('.box').style.left = positionX + 'px';
                if (positionX >= window.innerWidth - 100 || positionX <= 0) {
                    step = -step;
                }
            }, 10);
        }
    </script>
</body>
</html>

在上面的示例中，我们通过点击按钮触发translate函数，实现了一个简单的水平平移效果。当元素到达浏览器边界时，改变步进值的正负号，实现了来回的平移效果。

1.3 缩放效果

缩放效果是指改变元素的大小，使元素在水平和垂直方向上放大或缩小。我们可以使用JavaScript中的setInterval方法来实现元素的缩放效果。

<!DOCTYPE html>
<html>
<head>
    <title>缩放效果</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: green;
            transition: transform 0.5s;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button onclick="scale()">缩放</button>

    <script>
        let intervalId;
        let scaleValue = 1;
        let step = 0.1;

        function scale() {
            intervalId = setInterval(() => {
                scaleValue += step;
                document.querySelector('.box').style.transform = `scale(${scaleValue})`;
                if (scaleValue >= 2 || scaleValue <= 0.5) {
                    step = -step;
                }
            }, 100);
        }
    </script>
</body>
</html>

在上面的示例中，我们通过点击按钮触发scale函数，实现了一个简单的缩放效果。当元素的大小大于2或小于0.5时，改变步进值的正负号，实现了来回的缩放效果。

2. 高级动画效果

2.1 动画队列

动画队列是指在一个动画结束后，立即开始下一个动画。我们可以使用JavaScript中的setTimeout函数来实现动画队列。

<!DOCTYPE html>
<html>
<head>
    <title>动画队列</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            transition: transform 1s;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button onclick="animate()">动画队列</button>

    <script>
        function animate() {
            moveRight().then(() => moveDown());
        }

        function moveRight() {
            return new Promise((resolve) => {
                setTimeout(() => {
                    document.querySelector('.box').style.transform = `translateX(100px)`;
                    resolve();
                }, 0);
            });
        }

        function moveDown() {
            return new Promise((resolve) => {
                setTimeout(() => {
                    document.querySelector('.box').style.transform = `translateY(100px)`;
                    resolve();
                }, 1000);
            });
        }
    </script>
</body>
</html>

在上面的示例中，我们通过点击按钮触发animate函数，实现了一个动画队列。先向右移动100px，然后向下移动100px。

2.2 缓动效果

缓动效果是指在动画开始时速度较快，然后逐渐减慢直至停止的效果。我们可以使用公式计算出每一帧的值，从而实现缓动效果。

<!DOCTYPE html>
<html>
<head>
    <title>缓动效果</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button onclick="easeOut()">缓动效果</button>

    <script>
        let intervalId;
        let positionX = 0;
        let targetX = 300;
        let duration = 1000;
        let startTime;

        function easeOut() {
            startTime = performance.now();
            intervalId = requestAnimationFrame(step);
        }

        function step(timestamp) {
            const elapsed = timestamp - startTime;
            positionX = easeOutCubic(elapsed, 0, targetX, duration);
            document.querySelector('.box').style.left = positionX + 'px';

            if (elapsed < duration) {
                intervalId = requestAnimationFrame(step);
            }
        }

        function easeOutCubic(t, b, c, d) {
            t /= d;
            t--;
            return c*(t*t*t + 1) + b;
        }
    </script>
</body>
</html>

在上面的示例中，我们通过点击按钮触发easeOut函数，实现了一个缓动效果。利用缓动函数easeOutCubic计算出每一帧的位置，从而实现缓动效果。