Javascript使用三大家族和事件来DIY动画效果相关笔记（二）

本文链接：https://blog.csdn.net/jwlLWJ_2018/article/details/80814960

本文详细介绍了JavaScript中offset家族的特性，指出其在处理小数时会进行四舍五入。深入讲解了匀速与缓速动画的原理，并探讨了缓速动画可能遇到的问题及解决方案。通过封装基础缓速动画函数，演示了如何用此方法制作导航背景的绿色筋斗云动画效果。

摘要由CSDN通过智能技术生成

1.offset家族补充

◆offset取值返回时一个number类型的数值，但是它不会返回带小数的整数，内部做了四舍五入的处理，如style.left=9.4px，offsetLeft获取到的值是9，然而style.left=9.5px，offsetLeft获取到的值是10。

2.缓速动画与匀速动画的原理

◆匀速动画的原理：this.style.left=this.offsetLeft+步长（也就是每次递增多少递减多少），步长的递增和递减取决于指定的位置是大于当前位置还是小于当前位置。

◆缓速动画的原理：this.style.left=this.offsetLeft+步长，这个步长是动态的，speed=（指定的位置-this.offsetLeft）/10，因为只有这样速度才会从快的到慢，但是可能会出现当步长过小时，this.offsetLeft从this.style.left哪里获取到的值被四舍五入了，然后造成永远达不到指定的位置并且定时器也无法清除，解决的方法是，每次都对步长进行向上或者向下取舍。

//每次移动的步长
 element.spend = (target - element.offsetLeft) / 10
//对步长进行取整，避免offsetLeft底层的四舍五入的影响
            element.spend = element.spend > 0 ? Math.ceil(element.spend) : Math.floor(element.spend);

这样就能够达到，当步长大于0就向上取整，就不担心offsetLeft四舍五入掉0.5以下的值了，如果步长为负数时，也能够做到-0.5直接向下取整变成-1，于是就解决了指定的位置小于当前位置而造成的不移动并且定时器不停的问题，判断当前的位置和指定的位置是否符合停止定时器的核心代码

 //目标位置减去当前位置的绝对值 如果小于步长的绝对值 那么就说明也就一步之遥了，
  // 那么直接移动到指定的位置清除计时器算了。
if (Math.abs(target - element.offsetLeft) <= Math.abs(element.spend)) {
                element.style.left = target + "px";
                clearInterval(element.timer);
                return;
            }

都是判断左右步长是否小于或者等于当前位置距离指定位置的长度，如果符合条件那么可以直接停止计时器了，这一点无论是匀速还是缓速动画都是一样的。

3.使用offsetLeft和style.left来DIY动画补充

◆封装基础的缓速动画简单版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用offset封装缓速动画</title>
    <style type="text/css">
        #box {
            height: 200px;
            background-color: #eee;
            position: relative;
        }

        #box1 {
            position: absolute;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: #f09;
        }

    </style>
</head>
<body>
<div id="box">
    <button id="btn1">移动到200</button>
    <button id="btn2">移动到600</button>
    <div id="box1"></div>
</div>
<script>
    //需求：当点击移动到200时 盒子移动到200 当点击移动到600时 盒子移动到600（要求是缓速而不是匀速或闪速）
    //思路： 匀速：动画原理=盒子原来的位置+步长
    //      缓速：动画原理=盒子原来的位置+(指定位置-盒子原来的位置)/10
    //      缓速的步长=(指定位置-盒子原来的位置)/10；
    //步骤：
    // 1.获取事件源及相关元素对象
    // 2.绑定事件
    // 3.书写事件驱动程序


    // 1.获取事件源及相关元素对象
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    var box1 = document.getElementById("box1");

    // 2.绑定事件
    btn1.onclick = function () {
        // 3.书写事件驱动程序
        animate(box1, 200);

//
//        //绑定计时器之前先清除定时器
//        clearInterval(box1.timer);
//        box1.timer = setInterval(function () {
//
//            //bug:offsetLeft取值会进行四舍五入，所以只要spend为0.5以下
//            //就会导致 box1.style.left属性转换为box1.offsetLeft时永远都是向下取整
//            //如box1.style.left=9.4px，那么box1.offsetLe