JS动画效果_技术问答

慕尼黑0395993

根据老师前面讲的，我加了同时运动，宽度和高度没有到达指定的指，: 视频10：53处有解决方法; 2020-09-16 1回答·769浏览

qq_慕瓜5327221

定时器未关闭吧？

代码是存在问题，但错不在这，

var flag = true; 需要定义在定时器内

function commonStartMove(obj, json, fun) {

clearInterval(obj.timer);

obj.timer = setInterval(function () {

var flag = true; // 需要将flag定义在此处 ?

for (var attr in json) {

...

}

if (flag) {

clearInterval(obj.timer);

if (fun) {

fun();

}

}, 30);

}

按自己的理解改了部分代码：）

2020-02-22 1回答·868浏览

慕圣3402802

这个框架有问题吧，鼠标以不能做链式运动: 2019-04-25 3回答·791浏览

qq_无情胜有情_0

为什么在这段代码中还要用回调函数啊，回调函数难道不是是用来实现链式运动的？

朋友，谁说同时运动不可以有链式运动呀，比如说你要把 width 和 height 同时运动完成了，再运动透明度opacity。那这时，你不就是需要链式运动了吗。

PS最后这位大神姐姐这一课都标明了，是更好的运动框架，

既可以同时运动，也可以链式运动，你要什么情况你就码什么代码就可以了

2018-06-13 1回答·1240浏览

夜樱四重奏

麻烦帮忙看下，我写出来的代码没有效果

修改后的代码:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    *{margin: 0; padding: 0;}
    ul,li{list-style: none;}
    ul li{width:200px;height:100px;background:yellow;opacity:0.3;filter:alpha(opacity:30);border: #ccc 4px solid;}
  </style>
 </head>
 <script type="text/javascript"  >
  function startMove(obj, json, fn) {	
   clearInterval(obj.timer);		
   obj.timer = setInterval(function() {		
    var flag = true;		
    for(var attr in json) {	
     //目标值	
     var iCur = 0;	
     if(attr == 'opacity') {		
      iCur = Math.round(parseFloat(getStyle(obj,attr)) * 100);		
     } else {	
      iCur = parseInt(getStyle(obj,attr));		
     }				
     //speed		
     var iSpeed = (json[attr] - iCur) / 8;		
     iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);				
     //stop		
     if(iCur != json[attr]) {		
      flag = 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(flag){	
     clearInterval(obj.timer);	
     if(fn){		
      fn();		
     }	
    }		
   }, 30)
  }
  function getStyle(obj, attr) {
   if(obj.currentStyle) {
    return obj.currentStyle[attr];
   } else {
    return getComputedStyle(obj, false)[attr];
   }
  }
 </script>
 
 <script>
  window.onload = function(){
   var oLi=document.getElementById('li1');
   oLi.onmouseover = function(){
    startMove(oLi,{width:400,height:200,opacity:100});
   }
   oLi.onmouseout = function(){
    startMove(oLi,{width:200,height:100,opacity:30});
   }
  }
 </script>
 <body>
  <ul>
   <li id="li1"></li>
  </ul>
 </body>
</html>

2018-06-13 4回答·1222浏览

慕丝443484

flag值的改变？

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

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

2018-05-17 3回答·1615浏览

慕慕1506267

flag搞不清楚: 2018-05-09 3回答·1170浏览

慕慕1506267

flag怎么赋值

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

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

2018-05-09 2回答·1771浏览

ByThy

我也是跟着老师的写的，除了json不行外，链式和其他都行，麻烦大佬帮忙看一下

else {

icur = Math.round(parseFloat(getStyle(obj, attr)));

}

这句错了，应该是

else {

icur = parseInt(getStyle(obj, attr)); //整数型

}

2018-04-06 3回答·1315浏览

_Rainy

关于这个flag的问题: 要是缓冲运动就不需要flag; 2018-01-04 3回答·1456浏览

伴山客

幽灵Bug

终于想通了，还是flag的问题。大家注意，var flag =true;这句话一定一定要放在for-in外面

理解如下：

首先for-in虽然使得看起来是同步进行，但实际还是你定义的运动1，运动2，运动3 顺序操作。

当放在外面的时候，三个运动是修改一个flag，有一个没满足都是false。

而当flag定义放在循环里的时候，每一个运动的每一次操作，都会重置flag为true。

模拟一下：

假定速度为1.

首先第一圈。宽是false，然运动，达到目标。高是false，运动，仍未达到。透明度是false，运动，仍未达到。

第二圈，宽为true，无运动，高是false，运动，仍未达到。透明度是false，运动，仍未达到。

第N-1圈，高值196，false, =197 ，透明度值0.31 false = 0.3

第N圈，高值为197，判断为false之后，高变成198 。而因为在刚刚N-1圈的时候，透明度的运动刚好达到目标值。所以这一圈初始就把运动2判断为false的flag掰成了true。

清除定时器。BUG出现。这也是为什么速度值改变结果会不一样。

总结：如果flag定义放在for-in。则你定义的3个运动里如果某个运动时间大于排序靠后的，则这个运动无法完成。除非，你的速度够快。

2017-12-20 1回答·2019浏览

慕仙5237505

哪里错啦？老是报ReferenceError: attr is not defined这个，我上次错了别的语法也这么报，估计是其他原因写了attr没问题: 已采纳 qq_Moderato_0 的回答; 没有attr呀~ 你代码里的应该把attr改为i，for循环里 json的属性名。; 2017-11-01 1回答·1681浏览

zeroben

将一个div套进li，用链式动画设置了两者，结果了奇怪的问题……: 新手哈; 2017-09-21 1回答·759浏览

沈小布

for循环怎么成了同时执行了？: 不是应该第一个循环结束后，执行第二个吗？按理说应该是顺序啊！; 2017-09-08 3回答·1419浏览

风飘叶摇

根据同学们的评论和老师的代码，修改了下，但还是有BUG，跪求大神解答

仔细检查检查

2017-09-06 1回答·1287浏览

慕丝0963956

无法执行链式运动，还报错了: getComputedStyle( obj )[attr]; }需要flase，getComputedStyle要两个参数; 2017-09-04 2回答·859浏览

慕斯8803317

比起老师的startMove是不是能够用JS本身提供的animate更好呢？: 已采纳爱3 的回答; 你说的animate是指直接调用这个方法，主要传参就行了吗？; 2017-08-28 1回答·1316浏览

鼎晨要住顶层

为什么我跟着老师敲的代码，同时运动用json替代以后，没有效果？: 已采纳 qq_三六七_0 的回答; script标签不能写在<style></style>之间，而且函数名是startMove，调用的时候写出startMove1; 2017-07-07 1回答·1296浏览

qq_无所畏惧我就是我_0

美女老师你还开的有关于js的其它的课程没有？

有的这是vivian老师的主页

http://www.imooc.com/u/100329/courses?sort=publish

你可以在里面查看她的所有课程

2017-07-02 1回答·1174浏览

慕函数7258168

请问这个有错误吗``我用alert debug 发现进入这个smove后就出不来了``为什么: ``搞定了`` 一脸懵逼; 2017-05-21 3回答·990浏览

qq_宝怪儿_0

flag放在定时器内，为什么调试出现fn is not啊function?: 2017-05-19 2回答·927浏览

qq_宝怪儿_0

为什么同时运动可以了，而链式运动就不行了？: 2017-05-19 2回答·1144浏览

慕仰5658343

为什么我的js代码中attr识别不了: 不好意思，我已经找出来了，本人在for( var attr in json){}中把 attr 写成 i了，所以浏览器识别不了。; 2017-05-18 1回答·1807浏览

暮女神

不知道错在哪了??: 测试了一下可以用，看看是不是JS<script src="move.js"></script>引用路径有误，另外需要加Flag来保证只有每个值都达到target才停止动画，不然透明度到1宽度还没到400就不动了; 2017-05-02 1回答·744浏览

杨辰沁再不疯狂就老了

加了flag判断后，不能执行链式运动了？: 已采纳 Edge2J 的回答; 把flag定义在定时器里，for循环外。评论里第一说了，你可以看下; 2017-04-11 2回答·966浏览

qq_沃德天维森陌拉莫帅yb_0

写json属性的时候不用加双引号吗？: startMove{this,opacity:100,width:300}; 2017-04-09 1回答·2194浏览

慕用9244143

动画案例那一节的问题

已采纳东方既白233 的回答

这是因为你要确定你设置的多运动都完成后才去清除定时器，这个flag就是用来判断你设置的所有运动，比如高度宽度透明度是否都达到了目标值，flag才为true，否则之前flag会变成flase，不执行清除定时器

2017-04-05 6回答·1051浏览

10点

难道大家都觉得flag是放在计时器里才对？？我的天

//同步运动函数
function move(obj, json, fn) {
	//清除定时器，避免出现多个定时器	
	clearInterval(obj.timer);

	//设定定时器
	obj.timer = setInterval(function () {
		//声明标杆变量
		var flag = true;
		//遍历同步运动属性
		for (var attr in json) {
			//获取属性值
			var icur = 0;
			if (attr == 'opacity') {
				icur = Math.round(parseFloat(getStyle(obj,attr)) * 100);
			} else {
				icur = parseInt(getStyle(obj, attr));
			}

			//设置运动速度
			var speed = (json[attr] - icur)/100;
			speed = speed>0?Math.ceil(speed):Math.floor(speed);

			// 判断是否所有值都达到了目标值，判定暂停定时器的指标
			if (icur != json[attr]) {
				flag = false;
			}
			if (attr == 'opacity') {
				obj.style.opacity = (icur + speed) / 100;
				obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
			} else {
				obj.style[attr] = (icur + speed) + 'px';
			}
		}	
		
		//清除定时器
		if(flag){
			clearInterval(obj.timer);
			if(fn){
				fn();
			}
		}		
	}, 1);
}


//获取任意属性
function getStyle(obj, attr) {
	if (obj.currentStyle) {
		return obj.currentStyle[attr]; //IE取样式
	} else {
		return getComputedStyle(obj, false)[attr];
	}
}

2017-03-26 6回答·997浏览

六月ovo

flag = false 是什么时候被重置为true的？

经过多番测试，视频中的完美运动代码存在bug，这个框架只可以实现同步动画，不可以实现链式动画。

同步动画最后会停止，不是因为

if(flag){
    clearInterval(obj.timer);
    if(fn){
        fn();
     }
}

而是代码中的

speed = (json[attr] - icur)/8;

这一部分等于0了，也就是说，动画不再变化了，看起来就好像清除了定时器一样。

如果在清除定时器的判定语句中加入一个测试语句，可以发现，第一次鼠标移入目标的时候，第一次执行到这个动画，是不会执行到测试的语句的，说明定时器的判定语句并未执行。

if(flag){
    alert(12345678978979); //注意这部分，第一次执行动画的时候，是不会执行到这里的。因为flag一直是false
    clearInterval(obj.timer);
    if(fn){
        fn();
     }
}

如果没有onmouseout的动画，那么，第二次鼠标移进去的时候，在执行动画之前，都满足

json[attr]=icur;

也就是说speed在第二次执行动画的时候，一直是0，那么这个时候，下面这个判定就没有执行了

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

于是flag就是第二次执行动画的初始值，也就是：

var flag = true;

自然而然的，后面的这部分代码就能够执行了。

if(flag){
    alert(12345678978979);//第二次执行onmouseover动画，就会执行到这里了
    clearInterval(obj.timer);
    if(fn){
        fn();
     }
}

上面讲得比较啰嗦，不知道大家有没有看懂，没看懂的可以照着一步一步去尝试一下，会得到我说的这个结果的

2017-03-26 12回答·8700浏览

慕粉1703136593

不知道为什么透明度变不了目标值，是不是starMove这个函数存在问题？移进去的时候透明度就变不了0，最后也变不了100？？？？

这是老师的你看看可能我们的方法名称不一样

2017-03-12 1回答·973浏览