1 line
7.8 KiB
Plaintext
1 line
7.8 KiB
Plaintext
|
{"version":3,"file":"follow-value.mjs","sources":["../../../src/value/follow-value.ts"],"sourcesContent":["import { MotionValue, motionValue } from \".\"\nimport { JSAnimation } from \"../animation/JSAnimation\"\nimport { AnyResolvedKeyframe, ValueAnimationTransition } from \"../animation/types\"\nimport { frame } from \"../frameloop\"\nimport { isMotionValue } from \"./utils/is-motion-value\"\n\n/**\n * Options for useFollowValue hook, extending ValueAnimationTransition\n * but excluding lifecycle callbacks that don't make sense for the hook pattern.\n */\nexport type FollowValueOptions = Omit<\n ValueAnimationTransition,\n \"onUpdate\" | \"onComplete\" | \"onPlay\" | \"onRepeat\" | \"onStop\"\n> & {\n /**\n * When true, the first change from a tracked `MotionValue` source\n * will jump to the new value instead of animating. Subsequent\n * changes animate normally. This prevents unwanted animations\n * on page refresh or back navigation (e.g. `useScroll` + `useSpring`).\n *\n * @default false\n */\n skipInitialAnimation?: boolean\n}\n\n/**\n * Create a `MotionValue` that animates to its latest value using any transition type.\n * Can either be a value or track another `MotionValue`.\n *\n * ```jsx\n * const x = motionValue(0)\n * const y = followValue(x, { type: \"spring\", stiffness: 300 })\n * // or with tween\n * const z = followValue(x, { type: \"tween\", duration: 0.5, ease: \"easeOut\" })\n * ```\n *\n * @param source - Initial value or MotionValue to track\n * @param options - Animation transition options\n * @returns `MotionValue`\n *\n * @public\n */\nexport function followValue<T extends AnyResolvedKeyframe>(\n source: T | MotionValue<T>,\n options?: FollowValueOptions\n) {\n const initialValue = isMotionValue(source) ? source.get() : source\n const value = motionValue(initialValue)\n\n attachFollow(value, source, options)\n\n return value\n}\n\n/**\n * Attach an animation to a MotionValue that will animate whenever the value changes.\n * Similar to attachSpring but supports any transition type (spring, tween, inertia, etc.)\n *\n * @param value - The MotionValue to animate\n * @param source - Initial value or MotionValue to track\n * @param options - Animation transition options\n * @returns Cleanup function\n *\n * @public\n */\nexport function attachFollow<T extends AnyResolvedKeyframe>(\n value: MotionValue<T>,\n source: T | MotionValue<T>,\n options: FollowValueOptions = {}\n): VoidFunction {\n const initialValue = value.get()\n\n let activeAnimation: JSAnimation<number> | null = null\n let latestValue = initialValue\n let latestSetter: (v: T) => void\n\n const unit =\n typeof initialValue === \"string\"\n ? initialValue.replace(/[\\d.-]/g, \"\")\n : undefined\n\n const stopAnimation = () => {\n if (activeAnimation) {\n activeAnimation.stop()\n activeAnimation = null\n }\n }\n\n const startAnimation = () => {\n const currentValue = asNumber(value.get())\n const targetValue = asNumber(latestValue)\n\n // Don't animate if we're already at the target\n if (currentValue === targetValue) {\n stopAnimation()\n return\n }\n\n // Use the running animation's analytical velocity for accuracy,\n // falling back to the MotionValue's velocity for the initial animation.\n // This prevents systematic velocity loss at high frame rates (240hz+).\n const velocity = activeAnimation\n ? activeAnimation.getGeneratorVelocity()\n : value.getVelocity()\n\n stopAnimation()\n\n activeAnimation = new JSAnimation({\n keyframes: [currentValue, targetValue],\n velocity,\n // Default to spring if no type specified (matches useSpring behavior)\n type: \"spring\",\n restDelta: 0.001,\n restSpeed: 0.01,\n ...options,\n onUpdate: latestSetter,\n })\n }\n\n // Use a st
|