JS チェーンモーションフレームワークとサンプル (コード) の紹介-jsチュートリアル-php.cn

JS チェーンモーションフレームワークとサンプル (コード) の紹介

不言

リリース： 2018-09-01 11:47:31

オリジナル

1287 人が閲覧しました

この記事では、js チェーンモーションフレームワークに関する概要 (コード) とサンプルを紹介します。必要な方は参考にしていただければ幸いです。

上記で紹介したモーションはすべて、オブジェクトが移動した後に終了します。たとえば、最初に幅が広くなり、次に高くなり、最後に透明度が高くなるなど、他の操作がある場合、前のモーションフレームでは状況が満たされません。モーションフレームワークに基づいて 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>

ログイン後にコピー