JS动画效果_技术问答

慕尼黑0395993

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

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回答·967浏览

慕圣3402802

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

慕粉3673019

flag是怎么变成true的？？

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

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

感谢 @纸丶两面白同学！

2018-09-14 1回答·931浏览

Fishzz

关于链式和多属性运动的另一种情况

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
    margin: 0px;
}
li {
    width:200px;
    height:50px;
    list-style-type:none;
    margin-bottom:10px;
    background-color:brown;
    filter:alpha(opacity=30); 
    opacity:0.3;
}
</style>
<script type="text/javascript">   
window.onload = function(){
      var li = document.getElementsByTagName('li');
      for(var i=0;i<li.length;i++){
      li[i].timer=null; 
      li[i].onmouseover = function(){
      startMove(this,{'width':400},function(obj){//这里的obj参数由startMobe方法调用回调那里传回来，方便解决这行的函数找不到对象的问题
          startMove(obj,{'height':300,'opacity':100});//用了json同时实现高和透明度的修改
      });
             } 
             //鼠标移开
      li[i].onmouseout = function(){
      startMove(this,{'width':200,'height':50,'opacity':30});//用了json同时实现宽高透明度的修改
              }
         }
    }
      var alpha=30;
   function startMove(obj,json,fn){
      clearInterval(obj.timer);
      var curStyle=0;
      obj.timer = setInterval(function(){
        var flag=true;//flag如果放在外面的话在计时器里面被修改之后就不会再变回true的值了，如果在计时器里面，每次计时都会把flag重新赋值true
          for(var attr in json){
      curStyle=(attr=='opacity')?Math.round(parseFloat(getStyle(obj,attr))*100):parseInt(getStyle(obj,attr));//这里把if（）｛｝else｛｝的判断是不是opacity写成一句了
            var speed = (json[attr]-curStyle)/10;
      speed = (attr=='opacity')?speed:(speed>0?Math.ceil(speed):Math.floor(speed));
      if(curStyle!=json[attr]){//如果不能同时满足所有当前的属性值等于目标值就给flag赋值false
         flag=false;
         }
         obj.style[attr]=(attr=='opacity')?(curStyle+speed)/100:(curStyle+speed+'px');
         if(flag){
      clearInterval(obj.timer);    
            if(fn){
              fn(obj);//这里把obj做成参数主要是方便处理回调函数fn的对象问题
          }
         }
              }
          
      },30)
   }
  
  function getStyle(obj,attr){
      if(obj.currentStyle){
         return obj.currentStyle[attr];
      }else{
          return window.getComputedStyle(obj,false)[attr];
        
      }
  }
 </script>
</head>

<body>
<li id="li"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</body>
</html>

--------------------------------------------------------------------------------------

花了大半天写好的，不知道有没有你想要的“第二个属性和第三个属性继续同步完成”

2018-06-18 1回答·731浏览

qq_无情胜有情_0

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

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

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

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

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

夜樱四重奏

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

修改后的代码:

<!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回答·1301浏览