动画移动效果

利用定时器实现的移动效果:

css:

    <style>
        div {
            position: absolute;
            width: 100px;
            height: 200px;
            ">aqua;
        }

        span {
            height: 100px;
            width: 150px;
           
            display: block;
            position: absolute;
            top: 300px;
        }
    </style>
 
html:

<body>
    <button>点我启动变换形态</button>
    <button class="btn1">btn1缓动动画500</button>
    <button class="btn800">btn800</button>
    <div></div>
    <span>变换形态</span>
    <script>
        //简单动画函数的封装,一般有两个参数,对象和移动的最终目的地
        //给不同的元素指定不同的定时器,将其变为对象.属性 obj.timer 可以避免开辟内存空间
        var div = document.querySelector('div')
        var span = document.querySelector('span')
 
        var btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            animate(span, 400)
        })
 
        function animate(obj, target) {
            //当我们把这个函数调用在一个点击事件中,一直点击的话会加速,而且会超出目标距离,是因为有了太多的定时器
            //解决:每次点击时候会生成定时器 , 那先清除定时器,再生成.
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                if (obj.offsetLeft > target) {
                    //如果div的左偏移大于500,则停止移动
                    clearInterval(obj.timer);
                } else { //如果这个移动语句不在else中,那么到了目标位置点击之后还会继续走!
                    obj.style.left = obj.offsetLeft + 2 + 'px'
                }
            }, 30)
        }

        //调用函数
        animate(div, 500)
 
//缓动动画
   //缓动动画效果原理:让元素运动慢慢的降下来,最后停止
        //1.让盒子每次移动的距离慢慢变小,速度就回慢慢落下来.
        //2.核心算法: (目标值-现在的位置)/10 = 每次移动的距离步长
        //3.停止的条件:让盒子当前位置等于目标位置,就停止定时器
        var btn1 = document.querySelector('.btn1')
        var btn800 = document.querySelector('.btn800')
        btn1.addEventListener('click', function () {
            animate1(span, 500)
        })
        btn800.addEventListener('click', function () {
            animate1(span, 800, function () {
                alert('回调函数:我被调用了')
                span.style.backgroundColor = 'green';
            })
        })
 
  //给缓动动画添加回调函数 即形式参数callback
        function animate1(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                //把步长值写入定时器中  
                // var step = (target - obj.offsetLeft) / 10;
                //把步长值取整,不要出现小数的问题
                //var step = Math.ceil((target - obj.offsetLeft) / 10);
                //把步长取整,回退和前进的时候都不出现小数
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer);
                    //回调函数写在定时器结束里面,等定时器结束后再执行,而不是一调用就执行
                    if (callback) {//如果有回调函数,那就调用它
                        callback();
                    }
                } else {
                    //把每次变化的步长改为一个慢慢变小的值  步长公式:(目标值-当前的位置)
                    obj.style.left = obj.offsetLeft + step + 'px'
                }
            }, 15)
        }
        //匀速动画 盒子的left= 盒子当前的位置+固定的值
        //缓动动画 盒子的left=盒子当前的位置+变化的值 ((目标值-当前的位置))
    </script>
</body>
posted @ 2022-01-13 10:53  我的猫在哪里  阅读(53)  评论(0)    收藏  举报