摘要：使用了緩動(dòng)函數(shù)，只需要通過當(dāng)前動(dòng)畫消耗的時(shí)間，搭配其他定義的配置項(xiàng)，就可以計(jì)算出當(dāng)前動(dòng)畫具體位置。此次解析就到這里結(jié)束，如有錯(cuò)誤，請(qǐng)指出，感謝

本次解析將分為2篇文章，當(dāng)前是第二篇，第一篇在這里

另外，為了能更好的理解這個(gè)庫(kù)，個(gè)人寫了一個(gè)此庫(kù)的壓縮版，實(shí)現(xiàn)了核心的功能(主要也是為了更好理解核心功能)，內(nèi)容更少方便閱讀，
地址在這里

繼續(xù)上一篇，先把結(jié)構(gòu)圖拉過來：

// anime主體
function anime(params){
  
  // 定義instance 也是最終返回值
  let instance = createNewInstance(params);
  
  // 外部API 從當(dāng)前位置開始執(zhí)行動(dòng)畫
  instance.play = function() {}
  
  // 配置 startTime 和 engineTime(關(guān)鍵)
   instance.tick = function(t) {}
   
  // 對(duì)當(dāng)前engineTime進(jìn)行判斷，確定動(dòng)畫方案(關(guān)鍵)
  function setInstanceProgress(engineTime) {}
  
  // 計(jì)算動(dòng)畫當(dāng)前位置 并且賦值(關(guān)鍵)
  function setAnimationsProgress(insTime){}

  // 直接跳到參數(shù)time的時(shí)間所在的位置
  instance.seek = function(time) {}
  // 外部API 暫停
  instance.pause = function() {}
  // 外部API 反轉(zhuǎn)
  instance.reverse = function() {}
  // 外部API reset
  instance.reset = function() {}
  // 外部API 重新開始
  instance.restart = function() {}
  /*...*/
  return instance
}

setAnimationsProgress(省略了一些配置的定義)

這個(gè)函數(shù)接受一個(gè)參數(shù)，就是當(dāng)前位置所消耗時(shí)間(動(dòng)畫起始點(diǎn))，然后在里面計(jì)算出每一個(gè)動(dòng)畫目標(biāo)的位置，并且賦值

// 計(jì)算動(dòng)畫當(dāng)前位置 并且賦值
function setAnimationsProgress(insTime) {
  /* ... */
  // 這個(gè)while逐個(gè)計(jì)算當(dāng)前實(shí)例中的每個(gè)動(dòng)畫的當(dāng)前位置(通過時(shí)間和算法)
  while (i < animationsLength) {
      /* ... */
    // 消耗的時(shí)間占總持續(xù)時(shí)間的比例 在起點(diǎn)終點(diǎn)之間
    const elapsed = minMaxValue(insTime - tween.start - tween.delay, 0, tween.duration) / tween.duration;
    // 通過算法計(jì)算當(dāng)前進(jìn)度
    const eased = isNaN(elapsed) ? 1 : tween.easing(elapsed, tween.elasticity);
    /* ... */
    // 遍歷每一個(gè)到達(dá)點(diǎn)執(zhí)行
    for (let n = 0; n < toNumbersLength; n++) {
      let value;
      const toNumber = tween.to.numbers[n];
      const fromNumber = tween.from.numbers[n];
      if (!tween.isPath) {
        // 計(jì)算當(dāng)前具體位置
        value = fromNumber + (eased * (toNumber - fromNumber));
      } else {
        // 進(jìn)行SVG path計(jì)算
        value = getPathProgress(tween.value, eased * toNumber);
      }
      /* ... */
      numbers.push(value);
    }
         /* ... */
        if (!isNaN(n)) {
          // 組合單位 "135.546"+"px"
          if (!b) {
            progress += n + " ";
          } else {
            progress += n + b;
          }
        }
    /* ... */
    // 組合結(jié)果 "translateX("+"135.546px"+")`
    setTweenProgress[anim.type](animatable.target, anim.property, progress, transforms, animatable.id);
    anim.currentValue = progress;
    i++;
  }
  // 遍歷結(jié)果，逐個(gè)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}`);
      }
      // 設(shè)置style
      instance.animatables[id].target.style[transformString] = transforms[id].join(" ");
    }
  }
  // 記錄當(dāng)前位置所對(duì)應(yīng)的時(shí)間
  instance.currentTime = insTime;
  // 設(shè)置進(jìn)度
  instance.progress = (insTime / instance.duration) * 100;
}

剩下的就是一些操作函數(shù)了：

instance.seek

// 直接跳到參數(shù)time的時(shí)間所在的位置
instance.seek = function(time) {
  setInstanceProgress(adjustTime(time));
}

instance.pause

// 外部API 暫停
instance.pause = function() {
  const i = activeInstances.indexOf(instance);
  // 刪除activeInstances 后續(xù)engine中找不到便不會(huì)執(zhí)行
  if (i > -1) activeInstances.splice(i, 1);
  instance.paused = true;
}

instance.reverse

// 外部API 反轉(zhuǎn)
instance.reverse = function() {
  toggleInstanceDirection();
  startTime = 0;
  lastTime = adjustTime(instance.currentTime);
}

instance.restart

// 外部API 重新執(zhí)行
instance.restart = function() {
  instance.pause();
  instance.reset();
  instance.play();
}

instance.reset

// 外部API reset
instance.reset = function() {
  const direction = instance.direction;
  const loops = instance.loop;
  // 當(dāng)前位置,進(jìn)度 歸零
  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();
  }
}

使用了requestAnimateFrame和CSS動(dòng)畫提高流暢度。

使用了緩動(dòng)函數(shù)，只需要通過當(dāng)前動(dòng)畫消耗的時(shí)間，搭配其他定義的配置項(xiàng)，就可以計(jì)算出當(dāng)前動(dòng)畫具體位置。

此次解析就到這里結(jié)束，如有錯(cuò)誤，請(qǐng)指出，感謝！