首页 > 其他分享> 文章详细

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

2021-07-13 11:00:06 阅读：113 来源： 互联网

标签：function 动画定时器封装 box50 js animate box100

原生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>

效果展现：

标签：function,动画,定时器,封装,box50,js,animate,box100
来源： https://www.cnblogs.com/Abbynameswld/p/15005481.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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