原生js实现动画函数的封装及核心原理

原生js实现动画函数的封装及核心原理

一、动画实现原理

核心原理:通过定时器setInterval()不断移动盒子的位置

二、实现步骤

1、获得盒子当前的位置

2、让盒子在当前位置加上移动的距离(步长)

3、注意元素需要添加定位,才能使用element.style.left

4、利用定时器不断重复这个操作

5、加上一个结束定时器的条件

     停止的条件:让当前盒子的位置等于目标位置就停止定时器(实质是删除定时器)

6、回调函数写的位置:定时器结束的位置,当动画执行结束后才去调用该该函数

‘三、代码展示

function animate(obj, target, callback) {
  //添加定时器前先清除以前的定时器,只保留当前一个定时器
    window.clearInterval(obj.timer);
    obj.timer = window.setInterval(function() {
        //步长值写在定时器里面
        /*把我们的步长值改为整数,不要出现小数问题
        1)步长值>0,向上取整
        2)步长值<0,向下取整 */
        var step = (target - obj.offsetLeft) / 10;//缓动效果核心算法
        step = step >= 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            //停止动画 本质停止定时器
            window.clearInterval(obj.timer);
            //回调函数一定要写到定时器结束里面
            if (callback) {
                callback();
            }
        } else {
            obj.style.left = obj.offsetLeft + step + ‘px‘;
        }
    }, 15)
}

将以上代码可以专门写入annimate.js文件,用到animate动画函数,将js文件引入

注意:

1、使用动画函数的前提,该元素必须的定位

2、若index.js依赖animate.js,所以animate.js要写到index.js上面

四、应用

【轮播图的实现】

html文件

<body>
    <div class="banner1">
        <button class="forward50">前进50</button>
        <button class="back50">后退50</button>
        <div class="box50">50</div>
    </div>
    <div class="banner2">
        <button class="forward100">前进100</button>
        <button class="back100">后退100</button>
        <div class="box100">100</div>
    </div>
</body>

 

css文件

<style>
    .banner1,
    .banner12 {
        position: relative;
        height: 150px;
    }
    
    .box50 {
        position: absolute;
        width: 50px;
        height: 50px;
        border: 3px solid #eeeeee;
        border-radius: 7px;
        background-color: peru;
        color: teal;
        font-weight: 700;
        text-align: center;
        line-height: 50px;
    }
    
    .box100 {
        position: absolute;
        width: 100px;
        height: 100px;
        border: 3px solid #eeeeee;
        border-radius: 7px;
        background-color: peru;
        color: teal;
        font-weight: 700;
        text-align: center;
        line-height: 100px;
    }
    
    .finish {
        background-color: tomato;
    }
</style>

js文件

<script>
    // 1、获取元素
    var box50 = document.querySelector(‘.box50‘);
    var box100 = document.querySelector(‘.box100‘);
    var forward50 = document.querySelector(‘.forward50‘);
    var back50 = document.querySelector(‘.back50‘);
    var forward100 = document.querySelector(‘.forward100‘);
    var back100 = document.querySelector(‘.back100‘);
//2、注册事件
//前进50
forward50.addEventListener(
‘click‘, function() { animate(box50, 50, function() { box50.style.backgroundColor = ‘tomato‘; console.log(box50.offsetLeft); }); })
//后退50 back50.addEventListener(
‘click‘, function() { animate(box50, 0, function() { box50.style.backgroundColor = ‘peru‘; console.log(box50.offsetLeft); }) })
//前进100 forward100.addEventListener(
‘click‘, function() { animate(box100, 100, function() { box100.style.backgroundColor = ‘tomato‘; console.log(box100.offsetLeft); }) })
//后退100 back100.addEventListener(
‘click‘, function() { animate(box100, 0, function() { box100.style.backgroundColor = ‘peru‘; console.log(box100.offsetLeft); }) }) </script>

效果展现:

 

原生js实现动画函数的封装及核心原理

 

原生js实现动画函数的封装及核心原理

 

原生js实现动画函数的封装及核心原理

上一篇:十九、.net core使用SoapCore开发webservice接口,以及使用HttpClientFactory动态访问webservice接口


下一篇:Jquery反复操作复选框(CheckBox)