diff --git a/components/d/character/Index.vue b/components/d/character/Index.vue index 5554457..6307f59 100644 --- a/components/d/character/Index.vue +++ b/components/d/character/Index.vue @@ -94,15 +94,16 @@ watch( useHref.value = `#${newPose}-shape` return } - const interpolator = interpolate( - poseShapeMap[oldPose]?.getAttribute('d') ?? '', - poseShapeMap[newPose]?.getAttribute('d') ?? '', - { maxSegmentLength: 100 } - ) - console.log(interpolator) + const interpolator = useCache(`character:morph:${oldPose}-${newPose}`, () => { + return interpolate( + poseShapeMap[oldPose]?.getAttribute('d') ?? '', + poseShapeMap[newPose]?.getAttribute('d') ?? '', + { maxSegmentLength: 30 } + ) + }) const howFarAlongTheAnimationIsOnAScaleOfZeroToOne = - createTimeInterpolator(150) + createTimeInterpolator(200) requestAnimationFrame(draw) diff --git a/composables/calculations.ts b/composables/calculations.ts new file mode 100644 index 0000000..167b700 --- /dev/null +++ b/composables/calculations.ts @@ -0,0 +1,10 @@ +const cache = new Map() + +export function useCache(key: string, fn: () => T): T { + if (cache.has(key)) { + return cache.get(key) + } + const value = fn() + cache.set(key, value) + return value +}