借助tween.js小球沿div四边跑的动画效果

程序员欢欢技术 2022年11月7日

0 收藏 732 点赞 729 浏览 1266 个字

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        #wrap {
            background-color:#0094ff;
            height:600px;
            width:600px;
        }
        #round {
            height:100px;
            width:100px;
            background-color:#452692;
            border-radius:50%;
            position:absolute;
        }
    </style>
    <script src="tween.js"></script>
</head>
<body>
    <div id="wrap">
        <div id="round"></div>
    </div>
    <script>
        var round = document.getElementById("round");
        function r() {
        var t = 0;
        var b = 0;
        var c = 500;
        var d = 2000;
        var timer = setInterval(run, 20)
        function run() {
            t += 10;
            if (t >= d) {
                clearInterval(timer);
               myfunction();
            }
            round.style.left =Tween.Bounce.easeInOut(t, b, c, d) + "px";             }
        }
        function myfunction() {
            var t = 0;
            var b = 0;
            var c = 500;
            var d = 2000;
            var timer1 = setInterval(we, 20)
            function we() {
                t += 10;
                if (t>=d) {
                    clearInterval(timer1);
                    myfunc();
                }
                round.style.top =Tween.Bounce.easeInOut(t, b, c, d) + "px";
            }
        }
        function myfunc() {
            var t = 0;
            var b = 0;
            var c = 500;
            var d = 2000;
            var timer2 = setInterval(we, 20)
            function we() {
                t += 10;
                if (t >= d) {
                    clearInterval(timer2);
                    myfun();
                }
                round.style.left =c-Tween.Bounce.easeInOut(t, b, c, d) + "px";
            }
        }
        function myfun() {
            var t = 0;
            var b = 0;
            var c = 500;
            var d = 2000;
            var timer3 = setInterval(we, 20)
            function we() {
                t += 10;
                if (t >= d) {
                    clearInterval(timer3);
                    r();
                }
                round.style.top =c-Tween.Bounce.easeInOut(t, b, c, d) + "px";
            }
        }r();
    </script>
</body>
</html>