JavaScript アニメーションの実装に関する詳細な紹介

はじめに

現在、多くのページにアニメーションエフェクトが使用されています。適切なアニメーション効果はページの美しさをある程度向上させることができ、即効性のあるアニメーションはページの使いやすさを向上させることができます。

ページアニメーションを実装するには 2 つの方法があります。 1 つは、JavaScript を操作して CSS スタイルを間接的に操作し、update ごとに更新する方法で、もう 1 つは CSS を通じてアニメーションを直接定義する方法です。 2 番目の方法は、CSS3 が成熟した後に広く採用されました。この記事では、最初の方法の原理と実装について説明します。

JavaScript アニメーション実装原理

まず第一に、アニメーション時間プロセスとアニメーション効果プロセスという 2 つの重要な概念を知る必要があります。

アニメーション時間プロセスは、[0, 1] の間の数値で表されるアニメーションの完了を指します。アニメーションが タイム スタンプt1 で開始され、t2 で終了すると仮定します。現在のタイムスタンプは t であり、アニメーションの現在の進行状況は次のとおりです。アニメーションは (t-t1)/(t2-t1) です。理解できない場合は、紙とペンで描いてみることをお勧めします。この概念を理解することは、この記事を理解する上で非常に重要です。 t1开始，要在t2结束，当前时间戳为t，那么该动画目前的时间进程为(t-t1)/(t2-t1)。如果你不能理解，我建议你用纸笔画出来。理解这一概念对理解本文至关重要。

动画效果进程指被动画的属性值当前的增量。假设我们要将#el元素的CSS <a href="http://www.php.cn/wiki/907.html" target="_blank">left</a> 属性从100px变到200px，当前已经变到了130px，那么该动画目前的效果进程为130px - 100px = 30px。

假设动画时间进程和动画效果进程都是线性的。那么如果知道了动画时间进程，一定可以得到动画效果进程。

根据这个解释，我们很快可以编写出一个线性的动画。

(function() {
      var begin, // 开始动画的时间
        el, start, end, duration; 
      var INTERVAL = 13;

      function now() {
        return (new Date).getTime();
      }

      /**
       * 执行一步动画（更新属性）
       */
      function _animLeft() {
        var pos = (now() - begin) / duration;
        if (pos >= 1.0) {
          return false;
        }
        return !!(el.style.left = start + (end - start) * pos);
      }

      /**
       * 对一个DOM执行动画，left从_start到_end，执行时间为
       * _duration毫秒。
       * 
       * @param  {object} _el       要执行动画的DOM节点
       * @param  {integer} _start   left的起始值
       * @param  {integer} _end     left的最终值
       * @param  {integer} _duration  动画执行时间
       */
      function animLeft(_el, _start, _end, _duration) {
        stopped = false;
        begin = now();
        el = _el;
        start = _start;
        end = _end;
        duration = _duration || 1000;

        var step = function() {
          if (_animLeft()) {
            setTimeout(step, INTERVAL);
          }
        };
        setTimeout(step, 0);
      }

      window.animLeft = animLeft;
    })();

    animLeft(
      document.getElementById('el'),
      100,
      200
    )

JSBin

easing

很多时候，我们需要的动画并非线性的。所谓非线性，从直观上看，就是动画速度随着时间会产生变化。那么如何实现变速的动画呢？

由前所述，我们知道通过控制动画的时间进程就相当于控制动画的效果进程。随着真实世界的时间进程推移，动画的时间进程跟着推移，从而控制动画的效果进程推移。那么，我们可以通过修改真实世界的时间进程和动画的时间进程间的映射关系，从而控制动画进程。如果你感到困惑，没关系，请看下图：

这是线性动画中，真实世界的时间进程和动画进程的映射关系。接下来，我们将其进行变换

这条曲线实际上是函数y = x * x的图像。可以看到，两个曲线的定义域和值域并没有变化。曲线的斜率就是动画的速率。接下来我们将两张图重叠在一起做一个对比。

在真实世界的时间进行到x0的时候，动画进程原本应该进行到y0，在进行变换之后，只进行到y1。到最后，百川归海，两条线交汇于点(1, 1)。这里，y = x * xアニメーション効果プロセスとは、アニメーション化された 属性 値

の現在の増分を指します。 #el 要素の CSS を <a href="http://www.php.cn/wiki/907.html" target="_blank"> に変更するとします。 left<p> code> 属性が <code>100px から 200px に変更され、現在は 130px に変更され、アニメーションの現在のエフェクト プロセスが変更されます。 130px - 100px = 30px です。

アニメーション時間の進行とアニメーション効果の進行は両方とも線形であると仮定します。したがって、アニメーション時間プロセスを知っていれば、アニメーション効果プロセスを確実に取得できます。

この説明によると, リニアアニメーションを素早くプログラムできます。

function ease(time) {
      return time * time;
    }

    /**
     * 执行一步动画（更新属性）
     */
    function _animLeft() {
      var pos = (now() - begin) / duration;
      if (pos >= 1.0) {
        return false;
      }
      pos = ease(pos);
      return !!(el.style.left = (start + (end - start) * pos) + "px");
    }

JSBin

イージング

多くの場合、必要なアニメーションは線形ではありません。いわゆる非線形性とは、直感的に言えば、アニメーションの速度が時間とともに変化することを意味します。では、可変速アニメーションを実装するにはどうすればよいでしょうか?

上で述べたように、アニメーションの時間プロセスを制御することは、アニメーションのエフェクトプロセスを制御することと同等であることがわかります。現実世界の時間の進行に合わせてアニメーションの時間の進行も追従し、アニメーションのエフェクトの進行を制御します。次に、現実世界の時間プロセスとアニメーション時間プロセスの間のマッピング関係を変更することで、アニメーション プロセスを制御できます。混乱している場合でも、大丈夫です。下の写真を見てください:

🎜🎜🎜これは、現実世界の時間プロセスとリニア アニメーションにおけるアニメーション プロセスの間のマッピング関係です。次に、それを変換します 🎜🎜🎜 🎜この曲線は実際には関数🎜y = x * x画像です。 2 つの曲線の定義領域と値の範囲が変わっていないことがわかります。曲線の傾きがアニメーションの速度になります。次に、2 つの写真を重ねて比較してみます。 🎜🎜🎜🎜現実の世界時間が x0 に達すると、アニメーション処理は本来 y0 に進むはずですが、変換後は y1 にのみ進みます。最終的に、すべての川は海に戻り、2 つの線は点 (1, 1) で合流します。ここで、y = x * x はイージング関数 🎜 です。 🎜🎜アニメーションを非線形にするために上記の例を変更してみましょう。 🎜

jQuery.easing = {
      linear: function( p ) {
        return p;
      },
      swing: function( p ) {
        return 0.5 - Math.cos( p * Math.PI ) / 2;
      }
    };

🎜JSBin🎜🎜🎜jQuery🎜のコードにそのような関数が見られます。 🎜

 jQuery.easing.myEasing = function( p ) { return ... }

🎜 したがって、jQuery.easing にイージング関数を追加して、jQuery に新しいアニメーション レート制御メソッドをサポートさせることができます。イージング関数の定義域と値の範囲は [0, 1] である必要があることに注意してください。 🎜rrreee🎜概要🎜🎜JavaScriptアニメーションは基本的にCSSを操作してアニメーションを実行します。アニメーションの時間の進行によって、アニメーションのエフェクトの進行が決まります。現実世界の時間経過とアニメーションの時間経過との関係を操作することで、線形アニメーションを非線形アニメーションに変換できます。 🎜🎜🎜

以上がJavaScript アニメーションの実装に関する詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。