Javascript中遇到的问题: 缓动动画函数的封装

JavaScript

    • 1.缓动函数 - 匀速运动
    • 2.代码展示
    • 3.调用实例

来源博客:【Harryの心阁】

1.缓动函数 - 匀速运动

  1. 在匀速运动的过程中设置每次移动的距离如果大于1px,会使最后的目标位置变大,并且在封装过程中,if判断必须设置为>=,看一下样式效果
  2. 看控制台console(obj.offsetLeft)的值可以看出在设置匀速运动时,如果每次移动的距离大于1px,最后得到的距离左侧的位置大于目标位置,再做判断时要设置为对象距离左侧的位置>=目标位置
    Javascript中遇到的问题: 缓动动画函数的封装_第1张图片
  • 缓动动画函数 封装 【地址】

2.代码展示

// 封装一个匀速或者变速的缓动文件
// 第一是减速的
function animate(obj, target, speed,callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        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();
            }
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, speed)
}
// 第二个封装匀速
// 对象,目标位置,每次移动的距离,移动速度,回调函数
// var demo = animateun(obj, target, csteps, callback)
function animateun(obj, target,csteps,speed,callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        // 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();
            }
        }
        obj.style.left = obj.offsetLeft + csteps + 'px';
    }, speed)
}

3.调用实例


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="animate.js">script>
head>
<body>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .box {
            position: absolute;
            display: block;
            left: 0;
            width: 100px;
            height: 100px;
            margin: 100px 0;
            background-color: rgb(6, 143, 153);
        }
        span {
            position: absolute;
            display: block;
            left: 0;
            width: 100px;
            height: 100px;
            margin: 200px 0px;
            background-color: rgb(21, 8, 139);
        }
    style>
    <div class="box">div>
    <span>span>
    <script>
        
        var box = document.querySelector('.box');
        var span = document.querySelector('span');

        var box1 = animateun(box, 800, 1, 1, function () {
            box.style.backgroundColor = 'red';
            console.log(box.offsetLeft);
        });
        var span1 = animate(span, 900,150)
    script>
body>
html>

以上内容是我在实际操作过程中出现的问题

你可能感兴趣的:(技术·教程,#,JavaScript,js,vue,css,封装)