02-JS特效-匀速动画

最新推荐文章于 2023-08-10 20:14:15 发布

ruoshui0914

最新推荐文章于 2023-08-10 20:14:15 发布

阅读量245

点赞数

分类专栏： JS--特效

本文链接：https://blog.csdn.net/liqianmo/article/details/75067453

版权

JS--特效专栏收录该内容

2 篇文章 0 订阅

订阅专栏

动画的种类

动画原理 = 盒子位置 + 步长。

1.闪动。（瞬间到达）

2.匀速。（每次走一样距离）

3.缓动。（开始特快越走越慢，步长越来越小.类似刹车，电梯停止，压缩弹簧…）

动画的原理：盒子的位置=盒子本身所在的位置+步长

<style>
    * {
        padding: 0;
        margin: 0;
    }
    div {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 5px;
        background-color: pink;
    }
    .box2 {
        background-color: yellowgreen;
        top: 140px;
    }
</style>
<body>
<button>到200位置</button>
<button>到400位置</button>
<div></div>
<div class="box2"></div>
<script>
//需求：点击按钮，盒子移动

var btnArr = document.getElementsByTagName("button");
var box = document.getElementsByTagName("div")[0];
var box2 = document.getElementsByTagName("div")[1];

btnArr[0].onclick = function () {
    animate(box, 200);
    animate(box2, 200);
}
btnArr[1].onclick = function () {
    animate(box, 400);
    animate(box2, 400);
}

//匀速动画封装
function animate(ele, target) {
    //要用定时器，先清定时器。（把老定时器清掉，这样不会影响新的定时器）
    clearInterval(ele.timer);
    ele.timer = setInterval(function () {
        //判断：如果目标位置大于当前位置步长是10；小于当前位置是-10；
        var step = target > ele.offsetLeft ? 10 : -10;
        //leader获取当前位置；
        var leader = ele.offsetLeft;
        ele.style.left = ele.offsetLeft + step + "px";
        //如果目标位置和当前位置只差小于步长，就可以清除定时器了。
        if (Math.abs(target - leader) < Math.abs(step)) {
            //直接到达指定位置
            ele.style.left = target + "px";
            clearInterval(ele.timer);
        }
    }, 30);
}
</script>
</body>

案例

02.1-滑动轮播图
02.2-左右焦点图
02.3-带有定时器的无缝轮播图

ruoshui0914

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
02-JS特效-匀速动画

动画的种类动画原理 = 盒子位置 + 步长。1.闪动。（瞬间到达）2.匀速。（每次走一样距离）3.缓动。（开始特快越走越慢，步长越来越小.类似刹车，电梯停止，压缩弹簧…）动画的原理：盒子的位置=盒子本身所在的位置+步长 * { padding: 0; margin: 0; } div {
复制链接

扫一扫