                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

完美运动框架，不能实现链式运动哇！

按照这个方式写下来，同时运动是实现了，可是链式运动做不了哇。。求解！难道要用两套不一样的吗？

me_is_hero

2015-03-19

源自：JS动画效果 6-2

关注问题我要回答

1659

操作

收起

8 回答

林青石
2015-08-26

function startMove(obj,json,fnEnd){
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
		doMove(obj,json,fnEnd);
	},30);
}
function doMove(obj,json,fnEnd){
	var iCur = 0;
	var attr = null;
	var bStop = true;
	for(attr in json){
		if(attr=='opacity'){
			//if(parseInt(100*getStyle(obj,attr))==0){
				//iCur = parseInt(100*getStyle(obj,attr));
			//}
			iCur=Math.round(parseFloat(getStyle(obj,attr))*100);
			//else{
				//iCur = parseInt(100*getStyle(obj,attr)) || 100;
		     //}
		}
		else{
			iCur = parseInt(getStyle(obj,attr)) || 0;
		}
		var iSpeed = (json[attr] - iCur)/5;
		iSpeed = (iSpeed>0) ? Math.ceil(iSpeed) : Math.floor(iSpeed);
		if(json[attr]!=iCur){
			bStop = false;
		}
		if(attr=='opacity'){
			obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
			obj.style.opacity = (iCur + iSpeed)/100;
		}
		else{
			obj.style[attr] = iCur + iSpeed + 'px';
		}	
	}
	if(bStop){
		clearInterval(obj.timer);
		if(fnEnd){
			fnEnd.call(obj);
			
		}
	}
}
function stopMove(obj){
	clearInterval(obj.timer);
}
function getStyle(obj,attr){
	if(obj.currentStyle){
		return obj.currentStyle[attr];
	}
	else{
		return getComputedStyle(obj)[attr];
	}
}

1 回复有任何疑惑可以回复我~

收起回答

林青石

完美运动框架拿去研究用吧

2015-08-26 回复有任何疑惑可以回复我~

韩小亖
2015-07-22

你把startMove(oDiv,{width:301,top:100,opacity:100}中的width变大一点，比如400，就可以了。感觉是width变化时间太短导致的

0 回复有任何疑惑可以回复我~

收起回答

林青石
2015-07-11

不对应该这么写就没事了

if (icon==json[attr])
        {
            flag=true;

        }else{
            flag=false;
        }

0 回复有任何疑惑可以回复我~

收起回答

MIS_Lu

你好，这样写还是有问题啊。。就是同时运动达不到效果，请问你有遇到吗

2015-08-21 回复有任何疑惑可以回复我~

林青石
2015-07-11

我本以为我解决了问题不过又出来一堆问题大家多交流解决吧

0 回复有任何疑惑可以回复我~

收起回答

林青石
2015-07-11

是这老师不够严谨还是怎么他是不是漏了点代码

if (icon!=json[attr])
        {
            flag=false;

        }else{
            flag=true;
        }

else语句没写导致flag无法获得true值以致整个if(flag)都没执行，你们的链式运动GG了

0 回复有任何疑惑可以回复我~

收起回答

七月小麦麦
2015-06-17

我也是这样的，怎么回事？代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>运动框架最终版</title>
<script type="text/javascript" src="move.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
div{margin:0 auto;width:300px;height:200px;border:4px solid #FF0;background:#000;filter:alpha(opacity:30);opacity:0.3;position:relative;top:0;}
</style>
<script type="text/javascript">
window.onload=function () {
var oDiv=document.getElementById("box");
oDiv.onmouseover=function () {
startMove(oDiv,{width:301,top:100,opacity:100},function () {
alert(1)
});
}
oDiv.onmouseout=function () {
startMove(oDiv,{width:300,top:0,opacity:30});
}
}
//获取样式
function getStyle (obj,attr) {
  if (obj.currentStyle) {
    return obj.currentStyle.attr;
  } else{
    return getComputedStyle(obj,false)[attr];
  };
}

//运动函数
function startMove (obj,json,fn) {
  var flag=true;             //假设所有运动都达到了目标值
  clearInterval(obj.timer);
  obj.timer=setInterval(function(){
  //遍历json中的值
    for(var attr in json){
  //计算速度
  var iCur=parseInt(getStyle(obj,attr)) 
    if (attr=="opacity") {
     iCur=Math.round(parseFloat(getStyle(obj,attr))*100);
    } 
      speed=(json[attr]-iCur)/20;
      speed=speed<0?Math.floor(speed):Math.ceil(speed)
  //判断所有属性是否达到目标值
      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";
      };
  //判断所有属性是否达到目标值
      if (flag) {
        clearInterval(obj.timer);
  //判断是否有需要执行的下一个函数
        if (fn) {
          fn();
        } 
    }
  }
  },30)
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>

0 回复有任何疑惑可以回复我~

收起回答