CubismMotionApplier

最終更新： 2023年3月14日

概述

通过使用CubismMotionApplier组件，您将能够使用Cocos Creator的AnimationController（AnimationGraph）进行动画处理。

使用时，您需要在同一个Node中安装CubismMotionApplier、CubismModel组件和Cocos Creator的AnimationController。
AnimationController组件中必须设置AnimationGraph。

请参考此处查看相关教程文章。

为了将AnimationController（AnimationGraph）中的动画应用到CubismModel的参数和部件上，进行了以下处理。

获取要操作的参数和部件参考

在CubismMotionApplier.starts中，CubismModel通过设置为AnimationController（AnimationGraph）的AnimationClip进行操作，同时缓存对CubismModel的参数和部件的引用。

此时，为了根据AnimationClip中记录的Path信息查找操作对象，根据Path信息缓存Map。

if (parameters != null) {
  for (let i = 0; i < parameters.length; i++) {
    const path = makePath(parameters[i], model);
    this.parameters.set(path, new ValueCache(parameters[i]));
  }
}
if (parts != null) {
  for (let i = 0; i < parts.length; i++) {
    const path = makePath(parts[i], model);
    this.parts.set(path, new ValueCache(parts[i]));
  }
}

这个处理由CubismMotionApplier.refresh执行。

值的应用

每帧CubismMotionApplier.onLateUpdate都会计算并应用该值。

对层数重复以下处理。

根据当前播放状态调用一个处理。

此外，转换时会通过追加来处理。

this.valueUpdate(currentClipStatuses, currentStateStatus.progress);

this.valueUpdate(nextClipStatuses, nextStateStatus.progress, transProgress);

从AnimationClip中回收值

CubismMotionApplier.setCache从AnimationClip获取变更目标Path和当前值，分别调用CubismMotionApplier.setParameterCache和CubismMotionApplier.setPartCache。

CubismMotionApplier.setParameterCache、CubismMotionApplier.setPartCache缓存从该AnimationClip中获取的信息用于计算。

const cache = this.parameters.get(nodePath);
if (cache == null) {
  return;
}
if (Number.isNaN(cache.calcValue)) {
  cache.calcValue = value;
} else {
  cache.calcValue = math.lerp(cache.calcValue, value, transProgress);
}

应用层权重

将预处理层和当前处理层与当前层的权重值混合。

this.parameters.forEach((cache, _key, _map) => {
  if (Number.isNaN(cache.value)) {
    cache.value = cache.calcValue;
  } else if (!Number.isNaN(cache.calcValue)) {
    cache.value = math.lerp(cache.value, cache.calcValue, layerWeight);
  }
  cache.calcValue = Number.NaN;
});
this.parts.forEach((cache, _key, _map) => {
  if (Number.isNaN(cache.value)) {
    cache.value = cache.calcValue;
  } else if (!Number.isNaN(cache.calcValue)) {
    cache.value = math.lerp(cache.value, cache.calcValue, layerWeight);
  }
  cache.calcValue = Number.NaN;
});

这个处理由CubismMotionApplier.calcCache执行。