JavaScript自己写的缓冲动画问题

源代码展示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #div1{
                width: 100px;
                height: 100px;
                position: absolute;
                top: 100px;
                left: 100px;
                background: lightseagreen;
            }
        </style>
    </head>
    <body style="height:2000px;">
        <div id="div1"></div>
    </body>
    <script language="JavaScript">
        function doAnimate(obj, destination, attr, callback){
            var timer = obj.timer;
            var start = 0;
            var iSpeed = 0;
            
            clearInterval(timer);
            
            timer = setInterval(function(){
                
                if(attr != "opacity"){
                    start = parseInt(getStyle(obj, attr));
                }else{
                    start = parseInt(parseFloat(getStyle(obj, attr))*100);
                }
                
                var dis = (destination - start)/8;
                iSpeed = dis>0?Math.ceil(dis):Math.floor(dis);
                
                if(destination == start){
                    clearInterval(timer);
                    callback && callback();
                }
                
                start += iSpeed;
                if(attr != "opacity"){
                    obj.style[attr] = start + "px";
                }else{
                    obj.style.opacity = start/100;
                    obj.style.mozOpacity = start/100;
                    obj.style.filter = "filter:alpha(opacity="+start+")";
                }
            }, 30);
        }
        
        function getStyle(obj, attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj, false)[attr];
            }
        }
    </script>
    <script language="JavaScript">
        var oDiv = document.getElementById("div1");
        doAnimate(oDiv, 400, "left", function(){
            console.log("1:"+getStyle(oDiv, "left"));
            oDiv.style.left = 0+"px";
            console.log("2:"+getStyle(oDiv, "left"));
        });
    </script>
</html>

想要的效果

这个例子想要的效果是：div缓冲运动到400px处在立刻回到0px处，自己封装的doAnimate函数的回掉函数应该没问题，但是就是回掉函数中的对left的设置完全没起作用。

如上图所示，div的left属性并没有变成"0px"，问题就是这样，求大神帮忙看看

oDiv.style.left = 0+"px";

这一句是执行了的，div从左边开始，然后再次执行到下面这句时，start仍然是400，所以又跑到右边了

obj.style[attr] = start + "px";

改了一下楼主的代码，用requestAnimationFrame相对于settimeout方法可以提高动画效率，对于开始和结束可以在写的具体点，这里就简单的改成了以下代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #div1{
                width: 100px;
                height: 100px;
                position: absolute;
                top: 100px;
                left: 100px;
                background: lightseagreen;
            }
        </style>
    </head>
    <body style="height:2000px;">
        <div id="div1"></div>
    </body>
    <script language="JavaScript">
        window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame 
                              || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
        var ele = document.getElementById("div1");
        
        requestAnimationFrame(step);
        function step(timestamp) {
            start = parseInt(ele.style.left);
            start += 1;
            ele.style.left = start + "px";
            if (start < 200) {
                requestAnimationFrame(step);
            }else{
                ele.style.left = "100px";
                requestAnimationFrame(step);
            }
        }
    </script>
</html>

加个return;

if(destination == start){
    clearInterval(timer);
    callback && callback();
    return;
}

当你跑到400位置的时候执行如下代码

if(destination == start){
    clearInterval(timer);
    callback && callback();
}

执行完回调后，你并没有返回，这个时候start=400，代码继续往下执行。

start += iSpeed;
if(attr != "opacity"){
    obj.style[attr] = start + "px";
}else{
    obj.style.opacity = start/100;
    obj.style.mozOpacity = start/100;
    obj.style.filter = "filter:alpha(opacity="+start+")";
}

能发现问题所在了么？

【热门文章】