requestAnimationFrame使用问题，做三个小球loading

5037120243

发布于
2019-05-30

想做一个loading动画，三个小球依次上下跳动

不造哪里出了问题，一个小球调用时，速度看起来还算正常，三个调用速度六到飞起。。。【尴尬脸】

问：如何能让小球依次跳动？？

相关代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #wrap {
            margin: 0 auto;
            margin-top: 45%;
            width: 100px;
            height: 50px;
            border: 1px solid palegreen;
            position: relative;
        }

        span {
            position: absolute;
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: palevioletred;
        }

        #ball1 {
            left: 0px;
        }

        #ball2 {
            left: 25px;
            /* margin-top: 5px; */
        }

        #ball3 {
            left: 50px;
            /* margin-top: 10px; */
        }
    </style>
</head>

<body>
    <div id="wrap">
        <span id="ball1"></span>
        <span id="ball2"></span>
        <span id="ball3"></span>
    </div>

    <script>
        var wrapTop = document.getElementById('wrap');
        var ball1Top = document.getElementById('ball1');
        var ball2Top = document.getElementById('ball2');
        var ball3Top = document.getElementById('ball3');
        var i = 0,
            j, ball1, ball2, ball3;

        function loadingBall(ele) {
            // cancelAnimationFrame(t);
            var t = ele.getAttribute("id");

            function up() {
                i++;
                if (i < 30) {
                    t = window.requestAnimationFrame(up);
                } else {
                    j = i;
                    t = window.requestAnimationFrame(down);
                }
                ele.style.top = i +
                    'px'; // ball2Top.style.top=i + 'px' ; // ball3Top.style.top=i + 'px' ; } 
            }

            function down() {
                j--;
                if (j > 0) {
                    t = window.requestAnimationFrame(down);
                } else {
                    i = 0;
                    t = window.requestAnimationFrame(up);
                }
                ele.style.top = j + 'px';
                // ball2Top.style.top = j + 'px';
                // ball3Top.style.top = j + 'px';
            }
            t = window.requestAnimationFrame(up);
            console.log(t);

        }
        loadingBall(ball1Top);
        //此处注释，看一个小球速度，再把这两句加上看速度
        // loadingBall(ball2Top);
        // loadingBall(ball3Top);
    </script>
</body>

</html>

javascript

html5 css

阅读 3k

3 个回答

得票最新

yifeinianshao

973

发布于
2019-05-31

✓ 已被采纳

计数的变量有冲突，互相影响了，放到函数里面就好了

<script>
    var wrapTop = document.getElementById('wrap');
    var ball1Top = document.getElementById('ball1');
    var ball2Top = document.getElementById('ball2');
    var ball3Top = document.getElementById('ball3');
    function loadingBall(ele) {
        // cancelAnimationFrame(t);
        var i = 0, j;
        var t = ele.getAttribute("id");

        function up() {
            i++;
            if (i < 30) {
                t = window.requestAnimationFrame(up);
            } else {
                j = i;
                t = window.requestAnimationFrame(down);
            }
            ele.style.top = i +
                'px'; // ball2Top.style.top=i + 'px' ; // ball3Top.style.top=i + 'px' ; }
        }

        function down() {
            j--;
            if (j > 0) {
                t = window.requestAnimationFrame(down);
            } else {
                i = 0;
                t = window.requestAnimationFrame(up);
            }
            ele.style.top = j + 'px';
            // ball2Top.style.top = j + 'px';
            // ball3Top.style.top = j + 'px';
        }
        t = window.requestAnimationFrame(up);
        console.log(t);

    }
    loadingBall(ball1Top);
    //此处注释，看一个小球速度，再把这两句加上看速度
    loadingBall(ball2Top);
    loadingBall(ball3Top);
</script>

css来写不是挺好的嘛？一般能用css实现的动画建议还是用css呢～
以下代码，小球跳动速度都是可控制的

<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>

@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}
.bouncing-loader {
  display: flex;
  justify-content: center;
}
.bouncing-loader > div {
  width: 1rem;
  height: 1rem;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}

loading.gif

rain

5037120243

发布于
2019-05-31

js版本：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    #wrap {
        margin: 0 auto;
        margin-top: 45%;
        width: 100px;
        height: 50px;
        border: 1px solid palegreen;
        position: relative;
    }

    span {
        position: absolute;
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: palevioletred;
    }

    #ball1 {
        left: 0px;
    }

    #ball2 {
        left: 25px;
        /* margin-top: 5px; */
    }

    #ball3 {
        left: 50px;
        /* margin-top: 10px; */
    }
</style>

<div id="wrap">
    <span id="ball1"></span>
    <span id="ball2"></span>
    <span id="ball3"></span>
</div>

<script>
    var wrapTop = document.getElementById('wrap');
    var ball1Top = document.getElementById('ball1');
    var ball2Top = document.getElementById('ball2');
    var ball3Top = document.getElementById('ball3');
    // , ball1, ball2, ball3;

    function loadingBall(ele) {
        var i = 0,
            j;
        // cancelAnimationFrame(t);
        var t = ele.getAttribute("id");

        function up() {
            i++;
            if (i < 30) {
                t = window.requestAnimationFrame(up);
            } else {
                j = i;
                t = window.requestAnimationFrame(down);
            }
            ele.style.top = i +
                'px'; // ball2Top.style.top=i + 'px' ; // ball3Top.style.top=i + 'px' ; } 
        }

        function down() {
            j--;
            if (j > 0) {
                t = window.requestAnimationFrame(down);
            } else {
                i = 0;
                t = window.requestAnimationFrame(up);
            }
            ele.style.top = j + 'px';
            // ball2Top.style.top = j + 'px';
            // ball3Top.style.top = j + 'px';
        }
        t = window.requestAnimationFrame(up);
        console.log(t);

    }
    loadingBall(ball1Top);
    setTimeout(function () {
        loadingBall(ball2Top);
    }, 250);
    setTimeout(function () {
        loadingBall(ball3Top);
    }, 500);
</script>

CSS版本：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    #wrap {
        margin: 0 auto;
        margin-top: 45%;
        width: 100px;
        height: 50px;
        border: 1px solid palegreen;
        position: relative;
    }

    span {
        position: absolute;
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: palevioletred;
        animation: updown 0.5s infinite alternate;
    }

    #ball1 {
        left: 0px;
    }

    #ball2 {
        left: 25px;
        /* margin-top: 5px; */
        animation-delay: 0.15s;

    }

    #ball3 {
        left: 50px;
        animation-delay: 0.25s;

        /* margin-top: 10px; */
    }

    @keyframes updown {
        from {
            top: 0px;
        }

        to {
            top: 30px;
        }
    }
</style>

<div id="wrap">
    <span id="ball1"></span>
    <span id="ball2"></span>
    <span id="ball3"></span>
</div>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

requestAnimationFrame使用问题，做三个小球loading

想做一个loading动画，三个小球依次上下跳动

不造哪里出了问题，一个小球调用时，速度看起来还算正常，三个调用速度六到飞起。。。【尴尬脸】

问：如何能让小球依次跳动？？

相关代码

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

如何实现一个深拷贝函数？

快开发完的Vue3项目要做SEO该如何处理？

git提交记录问题？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？