flag是怎么变成true的??

来源:6-2 完美运动框架

慕粉3673019

2018-09-14 16:27

window.onload = function(){
    var li = document.getElementById('li1');
    li.onmouseover = function(){
        startMove(li,{'width':400,'height':200})
    }			
    li.onmouseout = function(){				
        startMove(li,{'width':200,'height':100})			
    }		 
}		

//运动框架 startMove函数		
function startMove(obj,json,fn){			
    clearInterval(obj.timer);
    var flag = true;			
    //开启定时器			
    obj.timer = setInterval(function(){				
        //遍历json				
        for (var attr in json) {					
            var speed = 0;					
            //取当前值 icur					
            if (attr == 'opacity') {						
                var icur = Math.round(parseFloat(getStyle(obj,attr))*100);					
            }else{						
                var icur = parseInt(getStyle(obj,attr));					
            }					
            //算速度:speed
            //目标值:json[attr]					
            if (icur < json[attr]) {						
                speed = Math.ceil((json[attr] - icur)/8);					
            }else{						
                speed = Math.floor((json[attr] - icur)/8);					
            }							
            //检测停止					
            if (icur != json[attr]) {						
                flag = false					
            }					
            if (attr == 'opacity') {						
                obj.style.filter = 'alpha(opacity:'+icur+speed+')';						
                obj.style.opacity = (icur+speed)/100;					
            }else{						
                obj.style[attr] = icur + speed + 'px';					
            }   
        }
        //动画结束时,这里 flag 是怎么变成 true 的???????				
        if (flag) {					
            clearInterval(obj.timer);					
            if (fn) {fn()}				
        }         				
    },30)		
}


写回答 关注

1回答

  • 慕粉3673019
    2018-09-14 18:14:30

    视频中flag的声明位置应该是写错了,实际上应该是写在定时器内。

    视频中为什么动画会停止?完全是因为speed归0了,动画停止了,但实际上定时器并没有停止,还在继续运行。

    感谢 @纸丶两面白   同学!

    慕粉2147... 回复慕粉2147...

    我说错了,是if(flag==true)一定要在for(var attr in jsno){....}循环外面,flag=true,可以放在for(var attr in jsno){....}这个循环外面,也可以在里面

    2018-11-19 21:33:35

    共 3 条回复 >

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113920 学习 · 1450 问题

查看课程

相似问题