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
执行。