原生js自定义动画

1、创建容器与dom元素

 <!-- 容器 -->
    <div id="body">
        <!-- 需要运动的dom元素 -->
        <div id="box"></div>
    </div>

2、为容器和dom元素添加相对定位与绝对定位

  #body {
            width: 300px;
            height: 300px;
            background-color: yellow;
            position: relative;
        }

        #box {
            width: 120px;
            height: 120px;
            background: green;
            position: absolute;
        }

3、操作dom 的js代码

 var box = document.getElementById("box");

        function move(el, stepx, stepy) {
            //el--需要操作的dom元素,setpx--横向移动像素,setpy--纵向移动步数

            return setInterval(() => {//返回一个变量 用于清除定时器

                // 目前位置(offsetLeft与offsetTop只读)
                let initx = parseInt(el.offsetLeft);
                let inity = parseInt(el.offsetTop);

                //改变位置
                el.style.left = stepx + initx + "px"
                el.style.top = inity + stepy + "px"

                // 规定运动范围50xp之内，通过改变step使dom元素来回移动
                if (initx > 50) {
                    stepx = -1;
                } else if (initx == 0) stepx = 1.5;

                if (inity > 50) {
                    stepy = -1;
                } else if (inity == 0) stepy = 1;
            }, 1000 / 40);// 每秒 40 帧
        }

        move(box, 1, 1)