1 line
28 KiB
JSON
1 line
28 KiB
JSON
|
{"ast":null,"code":"import { warnOnce, SubscriptionManager, velocityPerSecond } from 'motion-utils';\nimport { time } from '../frameloop/sync-time.mjs';\nimport { frame } from '../frameloop/frame.mjs';\n\n/**\n * Maximum time between the value of two frames, beyond which we\n * assume the velocity has since been 0.\n */\nconst MAX_VELOCITY_DELTA = 30;\nconst isFloat = value => {\n return !isNaN(parseFloat(value));\n};\nconst collectMotionValues = {\n current: undefined\n};\n/**\n * `MotionValue` is used to track the state and velocity of motion values.\n *\n * @public\n */\nclass MotionValue {\n /**\n * @param init - The initiating value\n * @param config - Optional configuration options\n *\n * - `transformer`: A function to transform incoming values with.\n */\n constructor(init) {\n var _this = this;\n let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n /**\n * Tracks whether this value can output a velocity. Currently this is only true\n * if the value is numerical, but we might be able to widen the scope here and support\n * other value types.\n *\n * @internal\n */\n this.canTrackVelocity = null;\n /**\n * An object containing a SubscriptionManager for each active event.\n */\n this.events = {};\n this.updateAndNotify = function (v) {\n let render = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n const currentTime = time.now();\n /**\n * If we're updating the value during another frame or eventloop\n * than the previous frame, then the we set the previous frame value\n * to current.\n */\n if (_this.updatedAt !== currentTime) {\n _this.setPrevFrameValue();\n }\n _this.prev = _this.current;\n _this.setCurrent(v);\n // Update update subscribers\n if (_this.current !== _this.prev) {\n var _this$events$change;\n (_this$events$change = _this.events.change) === null || _this$events$change === void 0 || _this$events$change.notify(_this.current);\n if (_this.dependents) {\n for (const dependent of _this.dependents) {\n dependent.dirty();\n }\n }\n }\n // Update render subscribers\n if (render) {\n var _this$events$renderRe;\n (_this$events$renderRe = _this.events.renderRequest) === null || _this$events$renderRe === void 0 || _this$events$renderRe.notify(_this.current);\n }\n };\n this.hasAnimated = false;\n this.setCurrent(init);\n this.owner = options.owner;\n }\n setCurrent(current) {\n this.current = current;\n this.updatedAt = time.now();\n if (this.canTrackVelocity === null && current !== undefined) {\n this.canTrackVelocity = isFloat(this.current);\n }\n }\n setPrevFrameValue() {\n let prevFrameValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.current;\n this.prevFrameValue = prevFrameValue;\n this.prevUpdatedAt = this.updatedAt;\n }\n /**\n * Adds a function that will be notified when the `MotionValue` is updated.\n *\n * It returns a function that, when called, will cancel the subscription.\n *\n * When calling `onChange` inside a React component, it should be wrapped with the\n * `useEffect` hook. As it returns an unsubscribe function, this should be returned\n * from the `useEffect` function to ensure you don't add duplicate subscribers..\n *\n * ```jsx\n * export const MyComponent = () => {\n * const x = useMotionValue(0)\n * const y = useMotionValue(0)\n * const opacity = useMotionValue(1)\n *\n * useEffect(() => {\n * function updateOpacity() {\n * const maxXY = Math.max(x.get(), y.get())\n * const newOpacity = transform(maxXY, [0, 100], [1, 0])\n * opacity.set(newOpacity)\n * }\n *\n * const unsubscribeX = x.on(\"change\", updateOpacity)\n * const unsubscribeY = y.on(\"change\", updateOpacity)\n *\n * return () => {\n * unsubscribeX()\n
|