JavaScript自己写的缓冲动画问题-PHP中文网问答

源代码展示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #p1{
                width: 100px;
                height: 100px;
                position: absolute;
                top: 100px;
                left: 100px;
                background: lightseagreen;
            }
        </style>
    </head>
    <body style="height:2000px;">
        <p id="p1"></p>
    </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 op = document.getElementById("p1");
        doAnimate(op, 400, "left", function(){
            console.log("1:"+getStyle(op, "left"));
            op.style.left = 0+"px";
            console.log("2:"+getStyle(op, "left"));
        });
    </script>
</html>

想要的效果

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

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

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+")"; }

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test</title> <style> *{ margin: 0; padding: 0; } #p1{ width: 100px; height: 100px; position: absolute; top: 100px; left: 100px; background: lightseagreen; } </style> </head> <body style="height:2000px;"> <p id="p1"></p> </body> <script language="JavaScript"> window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var ele = document.getElementById("p1"); 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>

全部回复(3)

PHP中文网2017-04-10 15:50:12 3楼

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

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

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

能发现问题所在了么？

赞 +0

添加回复

大家讲道理2017-04-10 15:50:12 2楼

加个return;

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

大家讲道理2017-04-10 15:50:12 1楼

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

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

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

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