js 체인 모션 프레임워크 및 예제 소개(코드)-JS 튜토리얼-php.cn

js 체인 모션 프레임워크 및 예제 소개(코드)

不言

풀어 주다： 2018-09-01 11:47:31

원래의

1331명이 탐색했습니다.

이 기사는 js 체인 모션 프레임워크 및 예제에 대한 소개(코드)를 제공합니다. 이는 특정 참고 가치가 있으므로 도움이 될 수 있습니다.

앞서 소개한 모션은 객체가 이동한 후 모두 완료됩니다. 예를 들어 p가 처음에는 넓어지고, 다음에는 높아지고, 최종적으로는 더 투명해지는 등의 다른 작업이 있는 경우 이전 모션 프레임은 상황을 만족시키지 못할 것입니다. . 모션 프레임워크를 기반으로 fnEnd 기능을 추가하여 모션이 완료된 후 작업을 수행할 수 있습니다.

체인 모션 프레임

function getStyle(obj,name){
  if(obj.currentStyle){
    return obj.currentStyle[name];
  }
  else{
    return getComputedStyle(obj,false)[name];
  }
}

function startMove(obj, attr, iTarget, fnEnd) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    var cur=0;
    if(attr==="opacity"){
      cur=Math.round(parseFloat(getStyle(obj,attr))*100);//有可能会出现误差0.07*100
    }
    else{
      cur=parseInt(getStyle(obj,attr));
    }
    var speed = (iTarget - cur) / 6;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    if (cur === iTarget) {
      clearInterval(obj.timer);
      if(fnEnd)fnEnd();//运动结束后，如果fnEnd参数传递进去了就执行fnEnd函数
    } else {
      if(attr==="opacity"){
        obj.style.filter="alpha(opacity:"+cur+speed+")";
        obj.style.opacity=(cur+speed)/100;
      }else{
        obj.style[attr]=cur+speed+"px";
      }
    }
  }, 30)
}

로그인 후 복사

체인 모션 예시

위의 체인 모션 프레임을 사용하여 먼저 이동하여 너비를 조정하고, 이동하여 높이를 조정하고, 마지막으로 이동하여 투명도를 조정하는 p를 만듭니다.

<!DOCTYPE html>
<html>
  <head>
    <title>链式运动</title>
    <script src="move2.js"></script>
    <style>
      #p1{
        width: 100px;
        height: 100px;
        background: red;
        filter:alpha(opacity:30);
        opacity:0.3;
      }
    </style>
    <script>
      window.onload=function(){
        var op=document.getElementById("p1");
        op.onmouseover=function(){
          startMove(op,"width",300,function(){
            startMove(op,"height",300,function(){
              startMove(op,"opacity",100);
            })
          })
        }
        op.onmouseout=function(){
          startMove(op,"opacity",30,function(){
            startMove(op,"height",100,function(){
              startMove(op,"width",100);
            })
          });
        }
      }
    </script>
  </head>
  <body>
    <p id="p1"></p>
  </body>
</html>

로그인 후 복사