js动画

<!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>
            #block {
                position: absolute;
                width: 100px;
                height: 100px;
                background-color: red;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div id="block"></div>
        <script type="text/javascript">
            window.onload = function () {
                // API实现
                const requestAnimationFrameHandle = () => {
                    const element = document.getElementById('block');
                    let start = null;
                    let animate = null;
                    const step = timestamp => {
                        if (!start) start = timestamp;
                        const progress = timestamp - start;
                        element.style.left =
                            Math.min(progress / 10, 500) + 'px';
                        if (progress < 5000) {
                            animate = window.requestAnimationFrame(step);
                        } else {
                            window.cancelAnimationFrame(animate);
                        }
                    };
                    animate = window.requestAnimationFrame(step);
                };
                requestAnimationFrameHandle();
                // 定时器实现
                const timeAnimation = () => {
                    const element = document.getElementById('block');
                    let progress = 0;
                    let timer = setInterval(() => {
                        element.style.left =
                            Math.min(progress / 10, 500) + 'px';
                        progress = progress + 10;
                        if (progress > 5000) {
                            clearInterval(timer);
                            timer = null;
                        }
                    }, 10);
                };
                timeAnimation();
            };
        </script>
    </body>
</html>

相关阅读:
【算法】一致性Hash算法
P1576 最小花费题解
Vijos1234 口袋的天空题解
P1379 八数码难题题解
Tarjan求无向图必经点笔记
P3372 【模板】线段树 1 题解
CF1332A Exercising Walk 题解
P6270 [SHOI2002]取石子游戏题解
P6269 [SHOI2002]空中都市题解
P6268 [SHOI2002]舞会题解

原文地址：https://www.cnblogs.com/tllw/p/12888916.html