【ソース読み取り】解析Anime(JSアニメーションライブラリ)の核心(2)


今回の解析は2つの文章に分けられます.現在は2編目、1編目はここです.
また、このライブラリをよりよく理解するために、個人的にこのライブラリの圧縮版を書いて、核心機能を実現しました.(主に核心機能をよりよく理解するためです.)内容はもっと少なくて、読みやすいです.住所はここです.
前の編を続けて構造図を引いてください.
// anime  
function anime(params){
  
  //   instance        
  let instance = createNewInstance(params);
  
  //   API            
  instance.play = function() {}
  
  //    startTime   engineTime(  )
   instance.tick = function(t) {}
   
  //    engineTime    ,      (  )
  function setInstanceProgress(engineTime) {}
  
  //              (  )
  function setAnimationsProgress(insTime){}

  //       time        
  instance.seek = function(time) {}
  //   API   
  instance.pause = function() {}
  //   API   
  instance.reverse = function() {}
  //   API reset
  instance.reset = function() {}
  //   API     
  instance.restart = function() {}
  /*...*/
  return instance
}
  • set AnimationPrograss(いくつかの構成の定義を省略しました)
  • この関数は、現在の位置で消費されている時間(アニメーションの開始点)を指定して、アニメーションの各オブジェクトの位置を計算し、値を割り当てます.
    //              
    function setAnimationsProgress(insTime) {
      /* ... */
      //   while                   (       )
      while (i < animationsLength) {
          /* ... */
        //                       
        const elapsed = minMaxValue(insTime - tween.start - tween.delay, 0, tween.duration) / tween.duration;
        //           
        const eased = isNaN(elapsed) ? 1 : tween.easing(elapsed, tween.elasticity);
        /* ... */
        //           
        for (let n = 0; n < toNumbersLength; n++) {
          let value;
          const toNumber = tween.to.numbers[n];
          const fromNumber = tween.from.numbers[n];
          if (!tween.isPath) {
            //         
            value = fromNumber + (eased * (toNumber - fromNumber));
          } else {
            //   SVG path  
            value = getPathProgress(tween.value, eased * toNumber);
          }
          /* ... */
          numbers.push(value);
        }
             /* ... */
            if (!isNaN(n)) {
              //      '135.546'+'px'
              if (!b) {
                progress += n + ' ';
              } else {
                progress += n + b;
              }
            }
        /* ... */
        //      'translateX('+'135.546px'+')`
        setTweenProgress[anim.type](animatable.target, anim.property, progress, transforms, animatable.id);
        anim.currentValue = progress;
        i++;
      }
      //     ,  target  
      const transformsLength = Object.keys(transforms).length;
      if (transformsLength) {
        for (let id = 0; id < transformsLength; id++) {
          if (!transformString) {
            const t = 'transform';
            //      
            transformString = (getCSSValue(document.body, t) ? t : `-webkit-${t}`);
          }
          //   style
          instance.animatables[id].target.style[transformString] = transforms[id].join(' ');
        }
      }
      //             
      instance.currentTime = insTime;
      //     
      instance.progress = (insTime / instance.duration) * 100;
    }
    残りはいくつかの操作関数です.
  • instance.seek
  • //       time        
    instance.seek = function(time) {
      setInstanceProgress(adjustTime(time));
    }
  • instance.pause
  • //   API   
    instance.pause = function() {
      const i = activeInstances.indexOf(instance);
      //   activeInstances   engine         
      if (i > -1) activeInstances.splice(i, 1);
      instance.paused = true;
    }
  • instance.reverse
  • //   API   
    instance.reverse = function() {
      toggleInstanceDirection();
      startTime = 0;
      lastTime = adjustTime(instance.currentTime);
    }
  • instance.retart
  • //   API     
    instance.restart = function() {
      instance.pause();
      instance.reset();
      instance.play();
    }
  • instance.reset
  • //   API reset
    instance.reset = function() {
      const direction = instance.direction;
      const loops = instance.loop;
      //     ,     
      instance.currentTime = 0;
      instance.progress = 0;
      instance.paused = true;
      instance.began = false;
      instance.completed = false;
      instance.reversed = direction === 'reverse';
      instance.remaining = direction === 'alternate' && loops === 1 ? 2 : loops;
      setAnimationsProgress(0);
      for (let i = instance.children.length; i--; ){
        instance.children[i].reset();
      }
    }
    締め括りをつける
  • は、requestAnimateFrameCSSのアニメーションを使用して、なめらかさを高めています.
  • は、緩動関数を使用しており、 を介して他の定義された構成項目と組み合わせるだけで、現在のアニメーションの具体的な位置を計算することができる.
  • 今回の解析はここで終わります.間違いがあれば、指摘してください.ありがとうございます.