1 line
11 KiB
JSON
1 line
11 KiB
JSON
|
{"ast":null,"code":"import { mixNumber, percent, px } from 'motion-dom';\nimport { progress, circOut, noop } from 'motion-utils';\nconst borders = [\"TopLeft\", \"TopRight\", \"BottomLeft\", \"BottomRight\"];\nconst numBorders = borders.length;\nconst asNumber = value => typeof value === \"string\" ? parseFloat(value) : value;\nconst isPx = value => typeof value === \"number\" || px.test(value);\nfunction mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {\n if (shouldCrossfadeOpacity) {\n var _lead$opacity, _follow$opacity;\n target.opacity = mixNumber(0, (_lead$opacity = lead.opacity) !== null && _lead$opacity !== void 0 ? _lead$opacity : 1, easeCrossfadeIn(progress));\n target.opacityExit = mixNumber((_follow$opacity = follow.opacity) !== null && _follow$opacity !== void 0 ? _follow$opacity : 1, 0, easeCrossfadeOut(progress));\n } else if (isOnlyMember) {\n var _follow$opacity2, _lead$opacity2;\n target.opacity = mixNumber((_follow$opacity2 = follow.opacity) !== null && _follow$opacity2 !== void 0 ? _follow$opacity2 : 1, (_lead$opacity2 = lead.opacity) !== null && _lead$opacity2 !== void 0 ? _lead$opacity2 : 1, progress);\n }\n /**\n * Mix border radius\n */\n for (let i = 0; i < numBorders; i++) {\n const borderLabel = \"border\".concat(borders[i], \"Radius\");\n let followRadius = getRadius(follow, borderLabel);\n let leadRadius = getRadius(lead, borderLabel);\n if (followRadius === undefined && leadRadius === undefined) continue;\n followRadius || (followRadius = 0);\n leadRadius || (leadRadius = 0);\n const canMix = followRadius === 0 || leadRadius === 0 || isPx(followRadius) === isPx(leadRadius);\n if (canMix) {\n target[borderLabel] = Math.max(mixNumber(asNumber(followRadius), asNumber(leadRadius), progress), 0);\n if (percent.test(leadRadius) || percent.test(followRadius)) {\n target[borderLabel] += \"%\";\n }\n } else {\n target[borderLabel] = leadRadius;\n }\n }\n /**\n * Mix rotation\n */\n if (follow.rotate || lead.rotate) {\n target.rotate = mixNumber(follow.rotate || 0, lead.rotate || 0, progress);\n }\n}\nfunction getRadius(values, radiusName) {\n return values[radiusName] !== undefined ? values[radiusName] : values.borderRadius;\n}\n// /**\n// * We only want to mix the background color if there's a follow element\n// * that we're not crossfading opacity between. For instance with switch\n// * AnimateSharedLayout animations, this helps the illusion of a continuous\n// * element being animated but also cuts down on the number of paints triggered\n// * for elements where opacity is doing that work for us.\n// */\n// if (\n// !hasFollowElement &&\n// latestLeadValues.backgroundColor &&\n// latestFollowValues.backgroundColor\n// ) {\n// /**\n// * This isn't ideal performance-wise as mixColor is creating a new function every frame.\n// * We could probably create a mixer that runs at the start of the animation but\n// * the idea behind the crossfader is that it runs dynamically between two potentially\n// * changing targets (ie opacity or borderRadius may be animating independently via variants)\n// */\n// leadState.backgroundColor = followState.backgroundColor = mixColor(\n// latestFollowValues.backgroundColor as string,\n// latestLeadValues.backgroundColor as string\n// )(p)\n// }\nconst easeCrossfadeIn = /*@__PURE__*/compress(0, 0.5, circOut);\nconst easeCrossfadeOut = /*@__PURE__*/compress(0.5, 0.95, noop);\nfunction compress(min, max, easing) {\n return p => {\n // Could replace ifs with clamp\n if (p < min) return 0;\n if (p > max) return 1;\n return easing(progress(min, max, p));\n };\n}\nexport { mixValues };","map":{"version":3,"names":["mixNumber","percent","px","progress","circOut","noop","borders","numBorders","length","asNumber","value","parseFloat","isPx","test","mixValues","target","follow","lead","shouldCrossfadeOpacity","isOnlyMember","_lead$opacity","_follow$opacity","opacity","easeCross
|