ネイティブ JS で jquery 関数 animate() アニメーション効果を実装する簡単な例

会社での 1 か月のインターンシップの後、私は CSS と HTML に少しずつ慣れてきました。ここ数日で js の勉強を始めました。今日、js で jquery animate 関数を作成しました。テストしたところ、パフォーマンスは問題ありませんでした。個人的には、jquery はフレームワークであるため、animate 関数と同様に記述が難しく、オプションのパラメーターが少なく、意図した効果が得られない場合もあると感じています。

コメント部分はテスト用です。jsをあまり丁寧に使っていないので、メソッドは大体知っていて使っていますが、本当にアニメーションを実装したい場合に使用します。 function 詳細を間違って書くと、場合によっては人々を困惑させる可能性があります。

関数にはいくつかのパラメータがあります。

•obj、関数のオブジェクトです。

•json、{attr: "value", attr: "value"} の形式で、ここでは を指します。アニメーション化するオブジェクト モーション属性

•間隔、各変更の間隔 ここで変更されるのは、オブジェクトが属性値

•sp、値の変換速度であるため、アニメーションにはバッファリング効果がありません。一定速度だけです (sp は 1)

•fn、コールバック関数、アニメーション実行後の動作

コードは比較的単純ですが、注意する必要がある詳細がいくつかあります。

•オブジェクトのプロパティを直接宣言する必要はないため、関数clearInterval (obj.timer);の最初の文はエラーを報告しません。

•各オブジェクトにタイマーを追加する必要があります。そうしないと、相互に影響を及ぼし、タイマーを共有すると、タイマーの複数のオブジェクトの動きが停止します。

•son データ形式: オブジェクトのアニメーション化されたプロパティをトラバースする場合、各プロパティがターゲット値に達したかどうかを判断するには、 icur != json[arr] が必要です。このフラグの機能は、属性の 1 つが最初にターゲット値に到達したときに、clearInterval(obj.timer) がタイマーをクリアしないようにすることです。その結果、他のアニメーション属性がターゲット値に到達しなくなります。したがって、ターゲット属性に到達しないオブジェクトが検出される限り、フラグ値は各走査中に true に初期化され、オブジェクトのすべての属性がターゲット値に到達してタイマーがクリアされるまで、フラグは false に設定されます。

•speed = Speed > 0 ? Math.ceil(speed): Math.floor(speed);

属性値には不透明度以外の小数点がないため、この文の機能は属性値を四捨五入することです。

•for ループを使用する場合、特に入れ子のループを使用する場合に i の値が最大値になっている場合は、arr[i] 形式を任意に使用することはできません。

js

function animate(obj, json, interval, sp, fn) {
  clearInterval(obj.timer);
  //var k = 0;
  //var j = 0;
  function getStyle(obj, arr) {
    if(obj.currentStyle){
      return obj.currentStyle[arr];  //针对ie
    } else {
      return document.defaultView.getComputedStyle(obj, null)[arr]; 
    }
  }
  obj.timer = setInterval(function(){
    //j ++;
    var flag = true;
    for(var arr in json) {
      var icur = 0;
      //k++;
      if(arr == "opacity") {
        icur = Math.round(parseFloat(getStyle(obj, arr))*100);
      } else {
        icur = parseInt(getStyle(obj, arr));
      }
      var speed = (json[arr] - icur) * sp;
      speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
      if(icur != json[arr]){
        flag = false;
      } 
      if(arr == "opacity"){
        obj.style.filter = "alpha(opacity : '+(icur + speed)+' )";
        obj.style.opacity = (icur + speed)/100;
      }else {
        obj.style[arr] = icur + speed + "px";
      }
      //console.log(j + "," + arr +":"+ flag);
    }
 
    if(flag){
      clearInterval(obj.timer);
      //console.log(j + ":" + flag); 
      //console.log("k = " + k);
      //console.log("j = " + j);
      //console.log("DONE");
      if(fn){
        fn();
      }
    }
  },interval);
}

呼び出しメソッド:

<script>
  var move = document.getElementById("move").getElementsByTagName("li");
  for(var i = 0; i < move.length; i ++){
    move[i].onmouseover = function(){
      var _this = this;
      animate(_this, {width: 500, height: 200},10, 0.01, function(){
        animate(_this, {width: 300, height: 200},10, 0.01);
      });
 
    }
  }
 
</script>

jquery 関数 animate() アニメーション効果を実装するネイティブ js の上記の簡単な例は、エディターが共有するすべての内容です。参考にしていただければ幸いです。 PHP中国語ウェブサイトをもっと活用してください。

jquery 関数 animate() アニメーション効果を実装するネイティブ js のより簡単な例については、PHP 中国語 Web サイトの関連記事に注目してください。