JS 58 缓慢动画原理

最新推荐文章于 2020-09-21 19:49:50 发布

肝JOJO

最新推荐文章于 2020-09-21 19:49:50 发布

阅读量248

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_34620296/article/details/102719678

版权

JavaScript 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

1.概念:
    缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来
2.思路:
    ①让盒子每次移动的距离慢慢变小,速度就会慢慢落下来
    ②核心算法:(目标值-现在的位置)/10 作为每次移动的距离
    ③停止条件:当前盒子位置等于目标位置时停止计时器
    ④注意步长值要取整,避免小数 (例:正值往大取整 2.1~3,负值往小取整 -2.1~-3)
3.添加回调函数
    函数可以作为一个参数,将这个函数作为参数传到另一个函数里面,当那个函数执行
    完之后,再执行传进去的这个函数,这个过程就叫回调
    位置:写到定时器结束位置
4.动画函数封装到单独的JS文件中

代码:

        div {
            width: 100px;
            height: 100px;
            background-color: purple;
            position: absolute;
            top: 100px;
            left: 0;
        }

        window.onload=function(){
            var btn500=document.querySelector('.btn500');
            var btn800=document.querySelector('.btn800'); 
            var btn0=document.querySelector('.btn0');
            var div=document.querySelector('div');

            function animate(obj,target,callback){  //callback回调
                clearInterval(obj.timer);  //调用时,先清除原先的定时器,在开启新的,防止不断点击按钮,,开启太多定时器,导致动画越来越快
                obj.timer = setInterval(function(){
                    var step =(target - obj.offsetLeft) / 20;  //每次走的距离
                    step= step > 0 ? Math.ceil(step) : Math.floor(step);  //正值往大取整 2.1~3,负值往小取整 -2.1~-3
                    if(obj.offsetLeft == target){
                        clearInterval(obj.timer);  //停止定时器
                        if(callback){
                            callback();  //如果有回调函数,就在计时器停止时调用
                        }
                    }
                    //把每次加1修改为:(目标值-现在的位置)/10 
                   obj.style.left = obj.offsetLeft + step + 'px';
                },30);                
            }


            btn500.addEventListener('click',function(){
                animate(div,500,function(){
                    div.style.background='red';  //执行结束将盒子改为红色    
                });
            })
            btn800.addEventListener('click',function(){
                animate(div,800);
            })
            btn0.addEventListener('click',function(){
                animate(div,0);
            })  
                   
        }

<body>
    <div></div>
    <button class="btn500">走到500</button>
    <button class="btn800">走到800</button>
    <button class="btn0">回到原点</button>
</body>

引入JS动画文件代码:
案例要求

    1.鼠标经过sliderbar con盒子滑动到左侧
    2.鼠标离开sliderbar con盒子滑动到右侧

        .sliderbar {
            position: fixed; 
            /* 绝对定位，相对于窗口定位 */
            right: 0px;
            bottom: 300px;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;   
            background-color: purple;   
            cursor: pointer;
            
        }
        span{         
            z-index: -1;    
        }

        .con {           
            position: absolute;  
            left: 30px;
            top: 0;  
            width: 100px;
            height: 30px;
            background-color: purple;
            z-index: 1;
        }

    <script src="57.animate.js"></script>
    <script>
        window.onload=function(){
            var sliderbar = document.querySelector('.sliderbar');
            var con = document.querySelector('.con');
            sliderbar.addEventListener('mouseenter',function(){
                animate(con,-100,function(){
                    //当动画执行完毕,将←改为→
                    sliderbar.children[0].innerHTML = '→';
                });
            })
            sliderbar.addEventListener('mouseleave',function(){
                animate(con,100,function(){
                    sliderbar.children[0].innerHTML = '←'; 
                });

            })
        }
    </script>

<body>
    <div class="sliderbar">
        <span>←</span>
        <div class="con">问题反馈</div>
    </div>
</body>

肝JOJO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 58 缓慢动画原理

1.概念: 缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来2.思路: ①让盒子每次移动的距离慢慢变小,速度就会慢慢落下来 ②核心算法:(目标值-现在的位置)/10 作为每次移动的距离 ③停止条件:当前盒子位置等于目标位置时停止计时器代码: div { width: 100px; h...
复制链接

扫一扫