JS运动总结

跟着视频学习了JS的运动基础以及相关的应用，总结了以下一套运动框架，可以直接调用。（以下所有项目调用的move.js文件均为此函数）

/**
 * 获取非行间样式,  兼容IE6--8
 * @param styObj    属性对象
 * @param name      属性名
 * return string    样式值
 */
function getStyle(styObj,name) {

    if(styObj.currentStyle){
        return styObj.currentStyle[name];
    }else {
        return getComputedStyle(styObj,false)[name];
    }
}

/**
 * 运动函数
 * @param obj           运动对象
 * @param json          json属性数组
 *                      json={ attr1:target1,attr2:target2 ......}
 * @param fnElement     回调函数
 */
function startMoving(obj,json,fnElement) {

    if(obj.timer != null)       // 多物体运动时，定时器各自工作，互不干扰
        clearInterval(obj.timer);

    obj.timer = setInterval(function () {
        let stop = true;        // 假设所有的值都已到了

        for(let attr in json){ 

            let currVal = 0;  // 当前属性样式值
            if(attr == "opacity"){
                currVal = Math.round(parseFloat(getStyle(obj,attr))*100);
            }else {
                currVal = parseInt(getStyle(obj,attr));
            }

            let speed = (json[attr] - currVal) / 8; // 运动速度
            speed = speed>0? Math.ceil(speed) : Math.floor(speed);  // 速度取整

            // 判断当前值是否等于目标值，如果不等，说明还未到达运动停止条件
            if(currVal != json[attr])
                stop=false;

            if(attr == "opacity"){
                obj.filter = "alpha(opacity:"+(currVal + speed)+")";
                obj.style.opacity = (currVal + speed) / 100;
            }else {
                obj.style[attr] = currVal + speed +"px";
            }
        }

        // 如果stop==true,说明中间没有出现未到达情况
        if(stop){
            clearInterval(obj.timer);
            if(fnElement) fnElement();
        }
    },30);
}

该框架可实现多个属性同时发生改变时的运用。需要注意的是，在开启定时器时，一定要先给每个对象都加入属于自己的定时器，这样当开启多个定时器时，才不会引起一系列不必要的问题。

---

运用运动框架，我写了几个简单的小案例，供参考学习和巩固。

案例1：

    
    
    


显示

 

案例2：实现类似于论坛发帖的效果，新消息显示在最前面，并添加从上往下的动画效果。

总结：在这个案例中，又把前面学过的DOM操作复习了遍。从创建子节点到追加和插入子节点，以及JS的运动函数。在实现的过程中，对于可变长的li高度问题，需要通过offsetHight来获取待插入节点的高，然后再设置其运动的距离。

我在写的过程中，最开始设置了li的宽度，然后高度设为了100%，这样导致了我在插入的时候出现了两个问题：

1. 运动的过程变得很快，看起来就很生硬。而且当li设置了border-bottom时，插入时文字会最先全部出来，然后border-bottom才缓慢下来，这种现象在当ul里面没有li时，插入第一个li 体现最明显。
2. 当我每次添加新内容，新内容和旧内容从上往下出来时，旧内容的背景是透明的，原因我还不是很明白。

针对出现的问题，后来我发现是宽高出了问题，不应该设置宽高，内容的宽高应该由padding撑开。对于这种自适应的，应该要注意这个问题，很关键！！！

写在最后的话：

我在查阅资料的时候，发现了一个作者写的JS运动系列，里面的案例比我的更丰富一些，写得也确实比我的好。

https://www.cnblogs.com/xiaohuochai/p/5980424.html