setInterval动画的缺点和requestAnimationFrame对比试验

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: absolute;
        }

        #app1 {
            background: red;
            top: 100px;
        }


        #app2 {
            background: blue;
            top: 250px;
        }

        #app3 {
            background: yellow;
            top: 400px;
        }

        #app4 {
            background: purple;
            top: 550px;
        }

        #app5 {
            background: green;
            top: 700px;
        }
    </style>
</head>

<body>
    <button id="btn">重置</button>
    <h2>紫和绿同样的速度时间比值，但是绿色更快，因为chrome的最小时间间隔4ms</h2>
    <h2>如果切出别的页面，蓝会停止，但黄不会等你</h2>
    <h2>蓝黄同样的速度，但是黄会更快一点，因为有排队时间补偿</h2>
    <div id="app1" class="circle"></div>
    <div id="app2" class="circle"></div>
    <div id="app3" class="circle"></div>
    <div id="app4" class="circle"></div>
    <div id="app5" class="circle"></div>

    <script>
        const animationCreate = (app, speed, interval, left) => setInterval(() => {
            left = left + speed;
            app.style.left = left + 'px';
        }, interval)
        window.onload = () => {
            document.getElementById('btn').addEventListener('click', ()=>location.reload());

            const red = document.getElementById("app1");
            const blue = document.getElementById("app2");
            const yellow = document.getElementById("app3");
            const purple = document.getElementById("app4");
            const green = document.getElementById("app5");
            var left1 = 0;
            var left2 = 0;
            var left4 = 0;
            var left5 = 0;


            // purple 慢 green 快
            var speed4 = 1;
            var speed5 = 2;
            animationCreate(purple, speed4, speed4, left4); // 每过 1 毫秒向左移动 1 px
            animationCreate(green, speed5, speed5, left5);// 每过 2 毫秒向左移动 2 px

            // 齐头并进
            var speed1 = 5;
            var speed2 = 15;
            animationCreate(red, speed1, 4 * speed1, left1); // 每过 20 毫秒向左移动 5 px
            animationCreate(blue, speed2, 4 * speed2, left2); // 每过 60 毫秒向左移动 15 px


            // requestAnimationFrame
            var start = null;
            const step = (timesamp) => {
                if (!start) {
                    start = timesamp;
                }
                yellow.style.left = (timesamp - start) / 15 * 4 + 'px';
                window.requestAnimationFrame(step);
            }
            window.requestAnimationFrame(step);


        }
    </script>
</body>

</html>
tips

如果还不清楚或者想交个朋友的同学可以微信联系我：qq981145483（备注:csdn）
良纵
发布了79 篇原创文章 · 获赞 9 · 访问量 3万+
私信关注
setInterval动画的缺点和requestAnimationFrame对比试验

tips

猜你喜欢
