@tamagui/animations-reanimated 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -104,7 +104,7 @@ function createAnimations(animations) {
|
|
|
104
104
|
transform: []
|
|
105
105
|
};
|
|
106
106
|
const exitingStyleProps = {};
|
|
107
|
-
if (pseudos.exitStyle) {
|
|
107
|
+
if (pseudos == null ? void 0 : pseudos.exitStyle) {
|
|
108
108
|
for (const key2 in pseudos.exitStyle) {
|
|
109
109
|
if (key2 === "transform") {
|
|
110
110
|
const val = pseudos.exitStyle[key2];
|
|
@@ -121,11 +121,7 @@ function createAnimations(animations) {
|
|
|
121
121
|
}
|
|
122
122
|
for (const key2 in style2) {
|
|
123
123
|
const value = style2[key2];
|
|
124
|
-
const animationConfig = getAnimationConfig(
|
|
125
|
-
key2,
|
|
126
|
-
animations,
|
|
127
|
-
props.animation
|
|
128
|
-
);
|
|
124
|
+
const animationConfig = getAnimationConfig(key2, animations, props.animation);
|
|
129
125
|
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(key2, animationConfig, props.animateOnly);
|
|
130
126
|
const { delayMs = null } = animationDelay(key2, animationConfig, delay);
|
|
131
127
|
if (!animation) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { AnimationDriver, AnimationProp, useEvent } from '@tamagui/core'\nimport { PresenceContext, usePresence } from '@tamagui/use-presence'\nimport { useContext, useMemo } from 'react'\n// until we fix Sheet\nimport { FlatList, Animated as RNAnimated } from 'react-native'\nimport Animated, {\n WithDecayConfig,\n WithSpringConfig,\n WithTimingConfig,\n runOnJS,\n useAnimatedStyle,\n withDecay,\n withDelay,\n withRepeat,\n withSpring,\n withTiming,\n} from 'react-native-reanimated'\n\nimport {\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n} from './useAnimatedNumber'\n\n// add nice warning for if mis-configured next config:\nif (process.env.NODE_ENV === 'development') {\n if (FlatList?.['_isProxyWorm']) {\n // eslint-disable-next-line no-console\n console.warn(\n `Using reanimated with excludeReactNativeWebExports including FlatList, adjust your next.config.js, reanimated currently doesn't support tree-shaking and needs *List components around.`,\n )\n }\n}\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig =\n | ({\n type: 'timing'\n loop?: number\n repeat?: number\n repeatReverse?: boolean\n } & WithTimingConfig)\n | ({\n type: 'spring'\n loop?: number\n repeat?: number\n repeatReverse?: boolean\n } & WithSpringConfig)\n | ({\n type: 'decay'\n loop?: number\n repeat?: number\n repeatReverse?: boolean\n } & WithDecayConfig)\n\nconst animatedStyleKey = {\n transform: true,\n opacity: true,\n // backgroundColor: true,\n // color: true,\n}\n\nexport function createAnimations<A extends AnimationsConfig>(\n animations: A,\n): AnimationDriver<A> {\n const AnimatedView = Animated.View\n const AnimatedText = Animated.Text\n\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n isReactNative: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n\n // temp\n // @ts-ignore\n NumberView: RNAnimated.View,\n\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n usePresence,\n useAnimations: ({ props, style, presence, pseudos, onDidAnimate, delay }) => {\n const isExiting = presence?.[0] === false\n const sendExitComplete = presence?.[1]\n const reanimatedOnDidAnimated = useEvent<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n )\n\n const all = style\n\n const [animatedStyles, nonAnimatedStyle] = [{}, {}]\n for (const key of Object.keys(all)) {\n if (animatedStyleKey[key]) {\n animatedStyles[key] = all[key]\n } else {\n nonAnimatedStyle[key] = all[key]\n }\n }\n\n const animatedString = JSON.stringify(animatedStyles)\n const key = animatedString // +\n // JSON.stringify([\n // state.unmounted,\n // state.hover,\n // state.press,\n // state.pressIn,\n // state.focus,\n // delay,\n // isPresent,\n // ])\n\n const callback = (\n isExiting: boolean,\n exitingStyleProps: Record<string, boolean>,\n key: string,\n value: any,\n ) => {\n 'worklet'\n return (completed: boolean | undefined, current: any) => {\n 'worklet'\n runOnJS(reanimatedOnDidAnimated)(key, completed, current, {\n attemptedValue: value,\n })\n if (isExiting) {\n exitingStyleProps[key] = false\n const areStylesExiting = Object.values(exitingStyleProps).some(Boolean)\n // if this is true, then we've finished our exit animations\n if (!areStylesExiting) {\n if (sendExitComplete) {\n runOnJS(sendExitComplete)()\n }\n }\n }\n }\n }\n\n const animatedStyle = useAnimatedStyle(() => {\n 'worklet'\n\n // getting issues with native unless this :/\n const style = JSON.parse(animatedString)\n\n const final = {\n transform: [] as any[],\n }\n\n const exitingStyleProps: Record<string, boolean> = {}\n\n // TODO this needs various manual checks, untested\n // psuedos.exitStyle wont have the exitVariant on it unless we add that\n if (pseudos.exitStyle) {\n for (const key in pseudos.exitStyle) {\n if (key === 'transform') {\n const val = pseudos.exitStyle[key]\n if (val) {\n for (const attr of val) {\n const tkey = Object.keys(attr)[0]\n exitingStyleProps[tkey] = true\n }\n }\n } else {\n exitingStyleProps[key] = true\n }\n }\n }\n\n for (const key in style) {\n const value = style[key]\n const animationConfig = getAnimationConfig(\n key,\n animations,\n props.animation,\n )\n const { animation, config, shouldRepeat, repeatCount, repeatReverse } =\n getAnimation(key, animationConfig, props.animateOnly)\n\n const { delayMs = null } = animationDelay(key, animationConfig, delay)\n\n if (!animation) {\n // eslint-disable-next-line no-console\n console.warn('No animation for', key, 'in', style)\n continue\n }\n if (!config) {\n // eslint-disable-next-line no-console\n console.warn('No animation config for', key, 'in', style)\n continue\n }\n\n if (key === 'transform') {\n if (!Array.isArray(value)) {\n // eslint-disable-next-line no-console\n console.error(`Invalid transform value. Needs to be an array.`)\n continue\n }\n\n for (const transformObject of value) {\n const key = Object.keys(transformObject)[0]\n const transformValue = transformObject[key]\n let finalValue = animation(\n transformValue,\n config as any,\n callback(isExiting, exitingStyleProps, key, value),\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n final['transform'].push({\n [key]: finalValue,\n })\n }\n continue\n }\n\n if (typeof value === 'object') {\n // shadows\n final[key] = {}\n for (const innerStyleKey of Object.keys(value || {})) {\n let finalValue = animation(\n value,\n config as any,\n callback(isExiting, exitingStyleProps, key, value),\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n if (delayMs != null) {\n final[key][innerStyleKey] = withDelay(delayMs, finalValue)\n } else {\n final[key][innerStyleKey] = finalValue\n }\n }\n continue\n }\n\n let finalValue = animation(\n value,\n config as any,\n callback(isExiting, exitingStyleProps, key, value),\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n if (delayMs != null && typeof delayMs === 'number') {\n final[key] = withDelay(delayMs, finalValue)\n } else {\n final[key] = finalValue\n }\n\n // end for (key in mergedStyles)\n }\n\n return final\n }, [key])\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [key])\n },\n }\n}\n\nfunction getAnimationConfig(\n key: string,\n animations: AnimationsConfig,\n animation?: AnimationProp,\n) {\n 'worklet'\n if (typeof animation === 'string') {\n return animations[animation]\n }\n let type = ''\n let extraConf: any\n if (Array.isArray(animation)) {\n type = animation[0] as string\n const conf = animation[1] && animation[1][key]\n if (conf) {\n if (typeof conf === 'string') {\n type = conf\n } else {\n type = (conf as any).type || type\n extraConf = conf\n }\n }\n } else {\n const val = animation?.[key]\n type = val?.type\n extraConf = val\n }\n const found = animations[type]\n if (!found) {\n throw new Error(`No animation of type \"${type}\" for key \"${key}\"`)\n }\n return {\n ...found,\n ...extraConf,\n type: found.type,\n }\n}\n\nfunction animationDelay(\n key: string,\n animation: AnimationConfig | undefined,\n defaultDelay?: number,\n) {\n 'worklet'\n if (\n !animation ||\n !animation[key] ||\n animation[key].delayMs === undefined ||\n animation[key].delayMs === null\n ) {\n return {\n delayMs: null,\n }\n }\n return {\n delayMs: animation[key].delayMs as TransitionConfig['delay'],\n }\n}\n\ntype TransitionConfigWithoutRepeats = (\n | ({ type?: 'spring' } & WithSpringConfig)\n | ({ type: 'timing' } & WithTimingConfig)\n | ({ type: 'decay' } & WithDecayConfig)\n) & {\n delay?: number\n}\n\ntype TransitionConfig = TransitionConfigWithoutRepeats & {\n /**\n * Number of times this animation should repeat. To make it infinite, use the `loop` boolean.\n *\n * Default: `0`\n *\n * It's worth noting that this value isn't *exactly* a `repeat`. Instead, it uses Reanimated's `withRepeat` function under the hood, which repeats back to the **previous value**. If you want a repeated animation, I recommend setting it to `true` from the start, and make sure you have a `from` value.\n *\n * As a result, this value cannot be reliably changed on the fly. If you would like animations to repeat based on the `from` value, `repeat` must be a number when the component initializes. You can set it to `0` to stop it, but you won't be able to start it again. You might be better off using the sequence array API if you need to update its repetitiveness on the fly.\n */\n repeat?: number\n /**\n * Setting this to `true` is the same as `repeat: Infinity`\n *\n * Default: `false`\n *\n * Note: this value cannot be set on the fly. If you would like animations to repeat based on the `from` value, it must be `true` when the component initializes. You can set it to `false` to stop it, but you won't be able to start it again. You might be better off using the sequence array API if you need to update its repetitiveness on the fly.\n */\n loop?: boolean\n /**\n * Whether or not the animation repetition should alternate in direction.\n *\n * By default, this is `true`.\n *\n * If `false`, any animations with `loop` or `repeat` will not go back and forth. Instead, they will go from 0 -> 1, and again from 0 -> 1.\n *\n * If `true`, then animations will go 0 -> 1 -> 0.\n *\n * Setting this to `true` is like setting `animationDirection: alternate` in CSS.\n */\n repeatReverse?: boolean\n}\n\nconst isColor = (styleKey: string) => {\n 'worklet'\n return [\n 'backgroundColor',\n 'borderBottomColor',\n 'borderColor',\n 'borderEndColor',\n 'borderLeftColor',\n 'borderRightColor',\n 'borderStartColor',\n 'borderTopColor',\n 'color',\n ].includes(styleKey)\n}\n\nfunction getAnimation(\n key: string,\n animationConfig: AnimationConfig | undefined,\n animateOnly?: string[],\n) {\n 'worklet'\n if (!animationConfig || (animateOnly && !animateOnly.includes(key))) {\n return {}\n }\n\n let repeatCount = 0\n const repeatReverse = animationConfig.repeatReverse || false\n let animationType: Required<TransitionConfig>['type'] =\n animationConfig?.type || 'spring'\n\n if (isColor(key) || key === 'opacity') {\n animationType = 'timing'\n }\n\n if ('repeat' in animationConfig) {\n repeatCount = animationConfig.repeat || 0\n } else {\n if (animationConfig.loop) {\n repeatCount = animationConfig.loop ? -1 : 0\n }\n }\n\n let config = animationConfig\n let animation: typeof withTiming | typeof withSpring | typeof withDecay\n\n if (animationType === 'timing') {\n animation = withTiming\n } else if (animationType === 'spring') {\n animation = withSpring\n } else if (animationType === 'decay') {\n animation = withDecay\n config = config || {\n velocity: 2,\n deceleration: 2,\n }\n } else {\n animation = withSpring\n }\n\n return {\n animation,\n config,\n repeatReverse,\n repeatCount,\n shouldRepeat: !!repeatCount,\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAyD;AACzD,0BAA6C;AAC7C,mBAAoC;AAEpC,0BAAiD;AACjD,qCAWO;AAEP,+BAIO;AAtBP;AAyBA,IAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,OAAI,yDAAW,iBAAiB;AAE9B,YAAQ;AAAA,MACN;AAAA,IACF;AAAA,EACF;AACF;AA0BA,MAAM,mBAAmB;AAAA,EACvB,WAAW;AAAA,EACX,SAAS;AAGX;AAEO,SAAS,iBACd,YACoB;AACpB,QAAM,eAAe,+BAAAA,QAAS;AAC9B,QAAM,eAAe,+BAAAA,QAAS;AAE9B,eAAa,iBAAiB;AAC9B,eAAa,iBAAiB;AAE9B,SAAO;AAAA,IACL,eAAe;AAAA,IACf;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IAIN,YAAY,oBAAAC,SAAW;AAAA,IAEvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,CAAC,EAAE,OAAO,OAAO,UAAU,SAAS,cAAc,MAAM,MAAM;AAC3E,YAAM,aAAY,qCAAW,QAAO;AACpC,YAAM,mBAAmB,qCAAW;AACpC,YAAM,8BAA0B;AAAA,QAC9B,IAAI,SAAS;AACX,uDAAe,GAAG;AAAA,QACpB;AAAA,MACF;AAEA,YAAM,MAAM;AAEZ,YAAM,CAAC,gBAAgB,gBAAgB,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;AAClD,iBAAWC,QAAO,OAAO,KAAK,GAAG,GAAG;AAClC,YAAI,iBAAiBA,OAAM;AACzB,yBAAeA,QAAO,IAAIA;AAAA,QAC5B,OAAO;AACL,2BAAiBA,QAAO,IAAIA;AAAA,QAC9B;AAAA,MACF;AAEA,YAAM,iBAAiB,KAAK,UAAU,cAAc;AACpD,YAAM,MAAM;AAWZ,YAAM,WAAW,CACfC,YACA,mBACAD,MACA,UACG;AACH;AACA,eAAO,CAAC,WAAgC,YAAiB;AACvD;AACA,sDAAQ,uBAAuB,EAAEA,MAAK,WAAW,SAAS;AAAA,YACxD,gBAAgB;AAAA,UAClB,CAAC;AACD,cAAIC,YAAW;AACb,8BAAkBD,QAAO;AACzB,kBAAM,mBAAmB,OAAO,OAAO,iBAAiB,EAAE,KAAK,OAAO;AAEtE,gBAAI,CAAC,kBAAkB;AACrB,kBAAI,kBAAkB;AACpB,4DAAQ,gBAAgB,EAAE;AAAA,cAC5B;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAEA,YAAM,oBAAgB,iDAAiB,MAAM;AAC3C;AAGA,cAAME,SAAQ,KAAK,MAAM,cAAc;AAEvC,cAAM,QAAQ;AAAA,UACZ,WAAW,CAAC;AAAA,QACd;AAEA,cAAM,oBAA6C,CAAC;AAIpD,YAAI,
|
|
4
|
+
"sourcesContent": ["import { AnimationDriver, AnimationProp, useEvent } from '@tamagui/core'\nimport { PresenceContext, usePresence } from '@tamagui/use-presence'\nimport { useContext, useMemo } from 'react'\n// until we fix Sheet\nimport { FlatList, Animated as RNAnimated } from 'react-native'\nimport Animated, {\n WithDecayConfig,\n WithSpringConfig,\n WithTimingConfig,\n runOnJS,\n useAnimatedStyle,\n withDecay,\n withDelay,\n withRepeat,\n withSpring,\n withTiming,\n} from 'react-native-reanimated'\n\nimport {\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n} from './useAnimatedNumber'\n\n// add nice warning for if mis-configured next config:\nif (process.env.NODE_ENV === 'development') {\n if (FlatList?.['_isProxyWorm']) {\n // eslint-disable-next-line no-console\n console.warn(\n `Using reanimated with excludeReactNativeWebExports including FlatList, adjust your next.config.js, reanimated currently doesn't support tree-shaking and needs *List components around.`\n )\n }\n}\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig =\n | ({\n type: 'timing'\n loop?: number\n repeat?: number\n repeatReverse?: boolean\n } & WithTimingConfig)\n | ({\n type: 'spring'\n loop?: number\n repeat?: number\n repeatReverse?: boolean\n } & WithSpringConfig)\n | ({\n type: 'decay'\n loop?: number\n repeat?: number\n repeatReverse?: boolean\n } & WithDecayConfig)\n\nconst animatedStyleKey = {\n transform: true,\n opacity: true,\n // backgroundColor: true,\n // color: true,\n}\n\nexport function createAnimations<A extends AnimationsConfig>(\n animations: A\n): AnimationDriver<A> {\n const AnimatedView = Animated.View\n const AnimatedText = Animated.Text\n\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n isReactNative: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n\n // temp\n // @ts-ignore\n NumberView: RNAnimated.View,\n\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n usePresence,\n useAnimations: ({ props, style, presence, pseudos, onDidAnimate, delay }) => {\n const isExiting = presence?.[0] === false\n const sendExitComplete = presence?.[1]\n const reanimatedOnDidAnimated = useEvent<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n }\n )\n\n const all = style\n\n const [animatedStyles, nonAnimatedStyle] = [{}, {}]\n for (const key of Object.keys(all)) {\n if (animatedStyleKey[key]) {\n animatedStyles[key] = all[key]\n } else {\n nonAnimatedStyle[key] = all[key]\n }\n }\n\n const animatedString = JSON.stringify(animatedStyles)\n const key = animatedString // +\n // JSON.stringify([\n // state.unmounted,\n // state.hover,\n // state.press,\n // state.pressIn,\n // state.focus,\n // delay,\n // isPresent,\n // ])\n\n const callback = (\n isExiting: boolean,\n exitingStyleProps: Record<string, boolean>,\n key: string,\n value: any\n ) => {\n 'worklet'\n return (completed: boolean | undefined, current: any) => {\n 'worklet'\n runOnJS(reanimatedOnDidAnimated)(key, completed, current, {\n attemptedValue: value,\n })\n if (isExiting) {\n exitingStyleProps[key] = false\n const areStylesExiting = Object.values(exitingStyleProps).some(Boolean)\n // if this is true, then we've finished our exit animations\n if (!areStylesExiting) {\n if (sendExitComplete) {\n runOnJS(sendExitComplete)()\n }\n }\n }\n }\n }\n\n const animatedStyle = useAnimatedStyle(() => {\n 'worklet'\n\n // getting issues with native unless this :/\n const style = JSON.parse(animatedString)\n\n const final = {\n transform: [] as any[],\n }\n\n const exitingStyleProps: Record<string, boolean> = {}\n\n // TODO this needs various manual checks, untested\n // psuedos.exitStyle wont have the exitVariant on it unless we add that\n if (pseudos?.exitStyle) {\n for (const key in pseudos.exitStyle) {\n if (key === 'transform') {\n const val = pseudos.exitStyle[key]\n if (val) {\n for (const attr of val) {\n const tkey = Object.keys(attr)[0]\n exitingStyleProps[tkey] = true\n }\n }\n } else {\n exitingStyleProps[key] = true\n }\n }\n }\n\n for (const key in style) {\n const value = style[key]\n const animationConfig = getAnimationConfig(key, animations, props.animation)\n const { animation, config, shouldRepeat, repeatCount, repeatReverse } =\n getAnimation(key, animationConfig, props.animateOnly)\n\n const { delayMs = null } = animationDelay(key, animationConfig, delay)\n\n if (!animation) {\n // eslint-disable-next-line no-console\n console.warn('No animation for', key, 'in', style)\n continue\n }\n if (!config) {\n // eslint-disable-next-line no-console\n console.warn('No animation config for', key, 'in', style)\n continue\n }\n\n if (key === 'transform') {\n if (!Array.isArray(value)) {\n // eslint-disable-next-line no-console\n console.error(`Invalid transform value. Needs to be an array.`)\n continue\n }\n\n for (const transformObject of value) {\n const key = Object.keys(transformObject)[0]\n const transformValue = transformObject[key]\n let finalValue = animation(\n transformValue,\n config as any,\n callback(isExiting, exitingStyleProps, key, value)\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n final['transform'].push({\n [key]: finalValue,\n })\n }\n continue\n }\n\n if (typeof value === 'object') {\n // shadows\n final[key] = {}\n for (const innerStyleKey of Object.keys(value || {})) {\n let finalValue = animation(\n value,\n config as any,\n callback(isExiting, exitingStyleProps, key, value)\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n if (delayMs != null) {\n final[key][innerStyleKey] = withDelay(delayMs, finalValue)\n } else {\n final[key][innerStyleKey] = finalValue\n }\n }\n continue\n }\n\n let finalValue = animation(\n value,\n config as any,\n callback(isExiting, exitingStyleProps, key, value)\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n if (delayMs != null && typeof delayMs === 'number') {\n final[key] = withDelay(delayMs, finalValue)\n } else {\n final[key] = finalValue\n }\n\n // end for (key in mergedStyles)\n }\n\n return final\n }, [key])\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [key])\n },\n }\n}\n\nfunction getAnimationConfig(\n key: string,\n animations: AnimationsConfig,\n animation?: AnimationProp\n) {\n 'worklet'\n if (typeof animation === 'string') {\n return animations[animation]\n }\n let type = ''\n let extraConf: any\n if (Array.isArray(animation)) {\n type = animation[0] as string\n const conf = animation[1] && animation[1][key]\n if (conf) {\n if (typeof conf === 'string') {\n type = conf\n } else {\n type = (conf as any).type || type\n extraConf = conf\n }\n }\n } else {\n const val = animation?.[key]\n type = val?.type\n extraConf = val\n }\n const found = animations[type]\n if (!found) {\n throw new Error(`No animation of type \"${type}\" for key \"${key}\"`)\n }\n return {\n ...found,\n ...extraConf,\n type: found.type,\n }\n}\n\nfunction animationDelay(\n key: string,\n animation: AnimationConfig | undefined,\n defaultDelay?: number\n) {\n 'worklet'\n if (\n !animation ||\n !animation[key] ||\n animation[key].delayMs === undefined ||\n animation[key].delayMs === null\n ) {\n return {\n delayMs: null,\n }\n }\n return {\n delayMs: animation[key].delayMs as TransitionConfig['delay'],\n }\n}\n\ntype TransitionConfigWithoutRepeats = (\n | ({ type?: 'spring' } & WithSpringConfig)\n | ({ type: 'timing' } & WithTimingConfig)\n | ({ type: 'decay' } & WithDecayConfig)\n) & {\n delay?: number\n}\n\ntype TransitionConfig = TransitionConfigWithoutRepeats & {\n /**\n * Number of times this animation should repeat. To make it infinite, use the `loop` boolean.\n *\n * Default: `0`\n *\n * It's worth noting that this value isn't *exactly* a `repeat`. Instead, it uses Reanimated's `withRepeat` function under the hood, which repeats back to the **previous value**. If you want a repeated animation, I recommend setting it to `true` from the start, and make sure you have a `from` value.\n *\n * As a result, this value cannot be reliably changed on the fly. If you would like animations to repeat based on the `from` value, `repeat` must be a number when the component initializes. You can set it to `0` to stop it, but you won't be able to start it again. You might be better off using the sequence array API if you need to update its repetitiveness on the fly.\n */\n repeat?: number\n /**\n * Setting this to `true` is the same as `repeat: Infinity`\n *\n * Default: `false`\n *\n * Note: this value cannot be set on the fly. If you would like animations to repeat based on the `from` value, it must be `true` when the component initializes. You can set it to `false` to stop it, but you won't be able to start it again. You might be better off using the sequence array API if you need to update its repetitiveness on the fly.\n */\n loop?: boolean\n /**\n * Whether or not the animation repetition should alternate in direction.\n *\n * By default, this is `true`.\n *\n * If `false`, any animations with `loop` or `repeat` will not go back and forth. Instead, they will go from 0 -> 1, and again from 0 -> 1.\n *\n * If `true`, then animations will go 0 -> 1 -> 0.\n *\n * Setting this to `true` is like setting `animationDirection: alternate` in CSS.\n */\n repeatReverse?: boolean\n}\n\nconst isColor = (styleKey: string) => {\n 'worklet'\n return [\n 'backgroundColor',\n 'borderBottomColor',\n 'borderColor',\n 'borderEndColor',\n 'borderLeftColor',\n 'borderRightColor',\n 'borderStartColor',\n 'borderTopColor',\n 'color',\n ].includes(styleKey)\n}\n\nfunction getAnimation(\n key: string,\n animationConfig: AnimationConfig | undefined,\n animateOnly?: string[]\n) {\n 'worklet'\n if (!animationConfig || (animateOnly && !animateOnly.includes(key))) {\n return {}\n }\n\n let repeatCount = 0\n const repeatReverse = animationConfig.repeatReverse || false\n let animationType: Required<TransitionConfig>['type'] =\n animationConfig?.type || 'spring'\n\n if (isColor(key) || key === 'opacity') {\n animationType = 'timing'\n }\n\n if ('repeat' in animationConfig) {\n repeatCount = animationConfig.repeat || 0\n } else {\n if (animationConfig.loop) {\n repeatCount = animationConfig.loop ? -1 : 0\n }\n }\n\n let config = animationConfig\n let animation: typeof withTiming | typeof withSpring | typeof withDecay\n\n if (animationType === 'timing') {\n animation = withTiming\n } else if (animationType === 'spring') {\n animation = withSpring\n } else if (animationType === 'decay') {\n animation = withDecay\n config = config || {\n velocity: 2,\n deceleration: 2,\n }\n } else {\n animation = withSpring\n }\n\n return {\n animation,\n config,\n repeatReverse,\n repeatCount,\n shouldRepeat: !!repeatCount,\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Animated", "RNAnimated", "key", "isExiting", "style", "finalValue"]
|
|
7
7
|
}
|
|
@@ -87,7 +87,7 @@ function createAnimations(animations) {
|
|
|
87
87
|
transform: []
|
|
88
88
|
};
|
|
89
89
|
const exitingStyleProps = {};
|
|
90
|
-
if (pseudos.exitStyle) {
|
|
90
|
+
if (pseudos == null ? void 0 : pseudos.exitStyle) {
|
|
91
91
|
for (const key2 in pseudos.exitStyle) {
|
|
92
92
|
if (key2 === "transform") {
|
|
93
93
|
const val = pseudos.exitStyle[key2];
|
|
@@ -104,11 +104,7 @@ function createAnimations(animations) {
|
|
|
104
104
|
}
|
|
105
105
|
for (const key2 in style2) {
|
|
106
106
|
const value = style2[key2];
|
|
107
|
-
const animationConfig = getAnimationConfig(
|
|
108
|
-
key2,
|
|
109
|
-
animations,
|
|
110
|
-
props.animation
|
|
111
|
-
);
|
|
107
|
+
const animationConfig = getAnimationConfig(key2, animations, props.animation);
|
|
112
108
|
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(key2, animationConfig, props.animateOnly);
|
|
113
109
|
const { delayMs = null } = animationDelay(key2, animationConfig, delay);
|
|
114
110
|
if (!animation) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { AnimationDriver, AnimationProp, useEvent } from '@tamagui/core'\nimport { PresenceContext, usePresence } from '@tamagui/use-presence'\nimport { useContext, useMemo } from 'react'\n// until we fix Sheet\nimport { FlatList, Animated as RNAnimated } from 'react-native'\nimport Animated, {\n WithDecayConfig,\n WithSpringConfig,\n WithTimingConfig,\n runOnJS,\n useAnimatedStyle,\n withDecay,\n withDelay,\n withRepeat,\n withSpring,\n withTiming,\n} from 'react-native-reanimated'\n\nimport {\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n} from './useAnimatedNumber'\n\n// add nice warning for if mis-configured next config:\nif (process.env.NODE_ENV === 'development') {\n if (FlatList?.['_isProxyWorm']) {\n // eslint-disable-next-line no-console\n console.warn(\n `Using reanimated with excludeReactNativeWebExports including FlatList, adjust your next.config.js, reanimated currently doesn't support tree-shaking and needs *List components around.`,\n )\n }\n}\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig =\n | ({\n type: 'timing'\n loop?: number\n repeat?: number\n repeatReverse?: boolean\n } & WithTimingConfig)\n | ({\n type: 'spring'\n loop?: number\n repeat?: number\n repeatReverse?: boolean\n } & WithSpringConfig)\n | ({\n type: 'decay'\n loop?: number\n repeat?: number\n repeatReverse?: boolean\n } & WithDecayConfig)\n\nconst animatedStyleKey = {\n transform: true,\n opacity: true,\n // backgroundColor: true,\n // color: true,\n}\n\nexport function createAnimations<A extends AnimationsConfig>(\n animations: A,\n): AnimationDriver<A> {\n const AnimatedView = Animated.View\n const AnimatedText = Animated.Text\n\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n isReactNative: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n\n // temp\n // @ts-ignore\n NumberView: RNAnimated.View,\n\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n usePresence,\n useAnimations: ({ props, style, presence, pseudos, onDidAnimate, delay }) => {\n const isExiting = presence?.[0] === false\n const sendExitComplete = presence?.[1]\n const reanimatedOnDidAnimated = useEvent<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n )\n\n const all = style\n\n const [animatedStyles, nonAnimatedStyle] = [{}, {}]\n for (const key of Object.keys(all)) {\n if (animatedStyleKey[key]) {\n animatedStyles[key] = all[key]\n } else {\n nonAnimatedStyle[key] = all[key]\n }\n }\n\n const animatedString = JSON.stringify(animatedStyles)\n const key = animatedString // +\n // JSON.stringify([\n // state.unmounted,\n // state.hover,\n // state.press,\n // state.pressIn,\n // state.focus,\n // delay,\n // isPresent,\n // ])\n\n const callback = (\n isExiting: boolean,\n exitingStyleProps: Record<string, boolean>,\n key: string,\n value: any,\n ) => {\n 'worklet'\n return (completed: boolean | undefined, current: any) => {\n 'worklet'\n runOnJS(reanimatedOnDidAnimated)(key, completed, current, {\n attemptedValue: value,\n })\n if (isExiting) {\n exitingStyleProps[key] = false\n const areStylesExiting = Object.values(exitingStyleProps).some(Boolean)\n // if this is true, then we've finished our exit animations\n if (!areStylesExiting) {\n if (sendExitComplete) {\n runOnJS(sendExitComplete)()\n }\n }\n }\n }\n }\n\n const animatedStyle = useAnimatedStyle(() => {\n 'worklet'\n\n // getting issues with native unless this :/\n const style = JSON.parse(animatedString)\n\n const final = {\n transform: [] as any[],\n }\n\n const exitingStyleProps: Record<string, boolean> = {}\n\n // TODO this needs various manual checks, untested\n // psuedos.exitStyle wont have the exitVariant on it unless we add that\n if (pseudos.exitStyle) {\n for (const key in pseudos.exitStyle) {\n if (key === 'transform') {\n const val = pseudos.exitStyle[key]\n if (val) {\n for (const attr of val) {\n const tkey = Object.keys(attr)[0]\n exitingStyleProps[tkey] = true\n }\n }\n } else {\n exitingStyleProps[key] = true\n }\n }\n }\n\n for (const key in style) {\n const value = style[key]\n const animationConfig = getAnimationConfig(\n key,\n animations,\n props.animation,\n )\n const { animation, config, shouldRepeat, repeatCount, repeatReverse } =\n getAnimation(key, animationConfig, props.animateOnly)\n\n const { delayMs = null } = animationDelay(key, animationConfig, delay)\n\n if (!animation) {\n // eslint-disable-next-line no-console\n console.warn('No animation for', key, 'in', style)\n continue\n }\n if (!config) {\n // eslint-disable-next-line no-console\n console.warn('No animation config for', key, 'in', style)\n continue\n }\n\n if (key === 'transform') {\n if (!Array.isArray(value)) {\n // eslint-disable-next-line no-console\n console.error(`Invalid transform value. Needs to be an array.`)\n continue\n }\n\n for (const transformObject of value) {\n const key = Object.keys(transformObject)[0]\n const transformValue = transformObject[key]\n let finalValue = animation(\n transformValue,\n config as any,\n callback(isExiting, exitingStyleProps, key, value),\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n final['transform'].push({\n [key]: finalValue,\n })\n }\n continue\n }\n\n if (typeof value === 'object') {\n // shadows\n final[key] = {}\n for (const innerStyleKey of Object.keys(value || {})) {\n let finalValue = animation(\n value,\n config as any,\n callback(isExiting, exitingStyleProps, key, value),\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n if (delayMs != null) {\n final[key][innerStyleKey] = withDelay(delayMs, finalValue)\n } else {\n final[key][innerStyleKey] = finalValue\n }\n }\n continue\n }\n\n let finalValue = animation(\n value,\n config as any,\n callback(isExiting, exitingStyleProps, key, value),\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n if (delayMs != null && typeof delayMs === 'number') {\n final[key] = withDelay(delayMs, finalValue)\n } else {\n final[key] = finalValue\n }\n\n // end for (key in mergedStyles)\n }\n\n return final\n }, [key])\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [key])\n },\n }\n}\n\nfunction getAnimationConfig(\n key: string,\n animations: AnimationsConfig,\n animation?: AnimationProp,\n) {\n 'worklet'\n if (typeof animation === 'string') {\n return animations[animation]\n }\n let type = ''\n let extraConf: any\n if (Array.isArray(animation)) {\n type = animation[0] as string\n const conf = animation[1] && animation[1][key]\n if (conf) {\n if (typeof conf === 'string') {\n type = conf\n } else {\n type = (conf as any).type || type\n extraConf = conf\n }\n }\n } else {\n const val = animation?.[key]\n type = val?.type\n extraConf = val\n }\n const found = animations[type]\n if (!found) {\n throw new Error(`No animation of type \"${type}\" for key \"${key}\"`)\n }\n return {\n ...found,\n ...extraConf,\n type: found.type,\n }\n}\n\nfunction animationDelay(\n key: string,\n animation: AnimationConfig | undefined,\n defaultDelay?: number,\n) {\n 'worklet'\n if (\n !animation ||\n !animation[key] ||\n animation[key].delayMs === undefined ||\n animation[key].delayMs === null\n ) {\n return {\n delayMs: null,\n }\n }\n return {\n delayMs: animation[key].delayMs as TransitionConfig['delay'],\n }\n}\n\ntype TransitionConfigWithoutRepeats = (\n | ({ type?: 'spring' } & WithSpringConfig)\n | ({ type: 'timing' } & WithTimingConfig)\n | ({ type: 'decay' } & WithDecayConfig)\n) & {\n delay?: number\n}\n\ntype TransitionConfig = TransitionConfigWithoutRepeats & {\n /**\n * Number of times this animation should repeat. To make it infinite, use the `loop` boolean.\n *\n * Default: `0`\n *\n * It's worth noting that this value isn't *exactly* a `repeat`. Instead, it uses Reanimated's `withRepeat` function under the hood, which repeats back to the **previous value**. If you want a repeated animation, I recommend setting it to `true` from the start, and make sure you have a `from` value.\n *\n * As a result, this value cannot be reliably changed on the fly. If you would like animations to repeat based on the `from` value, `repeat` must be a number when the component initializes. You can set it to `0` to stop it, but you won't be able to start it again. You might be better off using the sequence array API if you need to update its repetitiveness on the fly.\n */\n repeat?: number\n /**\n * Setting this to `true` is the same as `repeat: Infinity`\n *\n * Default: `false`\n *\n * Note: this value cannot be set on the fly. If you would like animations to repeat based on the `from` value, it must be `true` when the component initializes. You can set it to `false` to stop it, but you won't be able to start it again. You might be better off using the sequence array API if you need to update its repetitiveness on the fly.\n */\n loop?: boolean\n /**\n * Whether or not the animation repetition should alternate in direction.\n *\n * By default, this is `true`.\n *\n * If `false`, any animations with `loop` or `repeat` will not go back and forth. Instead, they will go from 0 -> 1, and again from 0 -> 1.\n *\n * If `true`, then animations will go 0 -> 1 -> 0.\n *\n * Setting this to `true` is like setting `animationDirection: alternate` in CSS.\n */\n repeatReverse?: boolean\n}\n\nconst isColor = (styleKey: string) => {\n 'worklet'\n return [\n 'backgroundColor',\n 'borderBottomColor',\n 'borderColor',\n 'borderEndColor',\n 'borderLeftColor',\n 'borderRightColor',\n 'borderStartColor',\n 'borderTopColor',\n 'color',\n ].includes(styleKey)\n}\n\nfunction getAnimation(\n key: string,\n animationConfig: AnimationConfig | undefined,\n animateOnly?: string[],\n) {\n 'worklet'\n if (!animationConfig || (animateOnly && !animateOnly.includes(key))) {\n return {}\n }\n\n let repeatCount = 0\n const repeatReverse = animationConfig.repeatReverse || false\n let animationType: Required<TransitionConfig>['type'] =\n animationConfig?.type || 'spring'\n\n if (isColor(key) || key === 'opacity') {\n animationType = 'timing'\n }\n\n if ('repeat' in animationConfig) {\n repeatCount = animationConfig.repeat || 0\n } else {\n if (animationConfig.loop) {\n repeatCount = animationConfig.loop ? -1 : 0\n }\n }\n\n let config = animationConfig\n let animation: typeof withTiming | typeof withSpring | typeof withDecay\n\n if (animationType === 'timing') {\n animation = withTiming\n } else if (animationType === 'spring') {\n animation = withSpring\n } else if (animationType === 'decay') {\n animation = withDecay\n config = config || {\n velocity: 2,\n deceleration: 2,\n }\n } else {\n animation = withSpring\n }\n\n return {\n animation,\n config,\n repeatReverse,\n repeatCount,\n shouldRepeat: !!repeatCount,\n }\n}\n"],
|
|
5
|
-
"mappings": "AAAA;AAAA,SAAyC,gBAAgB;AACzD,SAA0B,mBAAmB;AAC7C,SAAqB,eAAe;AAEpC,SAAS,UAAU,YAAY,kBAAkB;AACjD,OAAO;AAAA,EAIL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,IAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,OAAI,qCAAW,iBAAiB;AAE9B,YAAQ;AAAA,MACN;AAAA,IACF;AAAA,EACF;AACF;AA0BA,MAAM,mBAAmB;AAAA,EACvB,WAAW;AAAA,EACX,SAAS;AAGX;AAEO,SAAS,iBACd,YACoB;AACpB,QAAM,eAAe,SAAS;AAC9B,QAAM,eAAe,SAAS;AAE9B,eAAa,iBAAiB;AAC9B,eAAa,iBAAiB;AAE9B,SAAO;AAAA,IACL,eAAe;AAAA,IACf;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IAIN,YAAY,WAAW;AAAA,IAEvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,CAAC,EAAE,OAAO,OAAO,UAAU,SAAS,cAAc,MAAM,MAAM;AAC3E,YAAM,aAAY,qCAAW,QAAO;AACpC,YAAM,mBAAmB,qCAAW;AACpC,YAAM,0BAA0B;AAAA,QAC9B,IAAI,SAAS;AACX,uDAAe,GAAG;AAAA,QACpB;AAAA,MACF;AAEA,YAAM,MAAM;AAEZ,YAAM,CAAC,gBAAgB,gBAAgB,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;AAClD,iBAAWA,QAAO,OAAO,KAAK,GAAG,GAAG;AAClC,YAAI,iBAAiBA,OAAM;AACzB,yBAAeA,QAAO,IAAIA;AAAA,QAC5B,OAAO;AACL,2BAAiBA,QAAO,IAAIA;AAAA,QAC9B;AAAA,MACF;AAEA,YAAM,iBAAiB,KAAK,UAAU,cAAc;AACpD,YAAM,MAAM;AAWZ,YAAM,WAAW,CACfC,YACA,mBACAD,MACA,UACG;AACH;AACA,eAAO,CAAC,WAAgC,YAAiB;AACvD;AACA,kBAAQ,uBAAuB,EAAEA,MAAK,WAAW,SAAS;AAAA,YACxD,gBAAgB;AAAA,UAClB,CAAC;AACD,cAAIC,YAAW;AACb,8BAAkBD,QAAO;AACzB,kBAAM,mBAAmB,OAAO,OAAO,iBAAiB,EAAE,KAAK,OAAO;AAEtE,gBAAI,CAAC,kBAAkB;AACrB,kBAAI,kBAAkB;AACpB,wBAAQ,gBAAgB,EAAE;AAAA,cAC5B;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAEA,YAAM,gBAAgB,iBAAiB,MAAM;AAC3C;AAGA,cAAME,SAAQ,KAAK,MAAM,cAAc;AAEvC,cAAM,QAAQ;AAAA,UACZ,WAAW,CAAC;AAAA,QACd;AAEA,cAAM,oBAA6C,CAAC;AAIpD,YAAI,
|
|
4
|
+
"sourcesContent": ["import { AnimationDriver, AnimationProp, useEvent } from '@tamagui/core'\nimport { PresenceContext, usePresence } from '@tamagui/use-presence'\nimport { useContext, useMemo } from 'react'\n// until we fix Sheet\nimport { FlatList, Animated as RNAnimated } from 'react-native'\nimport Animated, {\n WithDecayConfig,\n WithSpringConfig,\n WithTimingConfig,\n runOnJS,\n useAnimatedStyle,\n withDecay,\n withDelay,\n withRepeat,\n withSpring,\n withTiming,\n} from 'react-native-reanimated'\n\nimport {\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n} from './useAnimatedNumber'\n\n// add nice warning for if mis-configured next config:\nif (process.env.NODE_ENV === 'development') {\n if (FlatList?.['_isProxyWorm']) {\n // eslint-disable-next-line no-console\n console.warn(\n `Using reanimated with excludeReactNativeWebExports including FlatList, adjust your next.config.js, reanimated currently doesn't support tree-shaking and needs *List components around.`\n )\n }\n}\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig =\n | ({\n type: 'timing'\n loop?: number\n repeat?: number\n repeatReverse?: boolean\n } & WithTimingConfig)\n | ({\n type: 'spring'\n loop?: number\n repeat?: number\n repeatReverse?: boolean\n } & WithSpringConfig)\n | ({\n type: 'decay'\n loop?: number\n repeat?: number\n repeatReverse?: boolean\n } & WithDecayConfig)\n\nconst animatedStyleKey = {\n transform: true,\n opacity: true,\n // backgroundColor: true,\n // color: true,\n}\n\nexport function createAnimations<A extends AnimationsConfig>(\n animations: A\n): AnimationDriver<A> {\n const AnimatedView = Animated.View\n const AnimatedText = Animated.Text\n\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n isReactNative: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n\n // temp\n // @ts-ignore\n NumberView: RNAnimated.View,\n\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n usePresence,\n useAnimations: ({ props, style, presence, pseudos, onDidAnimate, delay }) => {\n const isExiting = presence?.[0] === false\n const sendExitComplete = presence?.[1]\n const reanimatedOnDidAnimated = useEvent<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n }\n )\n\n const all = style\n\n const [animatedStyles, nonAnimatedStyle] = [{}, {}]\n for (const key of Object.keys(all)) {\n if (animatedStyleKey[key]) {\n animatedStyles[key] = all[key]\n } else {\n nonAnimatedStyle[key] = all[key]\n }\n }\n\n const animatedString = JSON.stringify(animatedStyles)\n const key = animatedString // +\n // JSON.stringify([\n // state.unmounted,\n // state.hover,\n // state.press,\n // state.pressIn,\n // state.focus,\n // delay,\n // isPresent,\n // ])\n\n const callback = (\n isExiting: boolean,\n exitingStyleProps: Record<string, boolean>,\n key: string,\n value: any\n ) => {\n 'worklet'\n return (completed: boolean | undefined, current: any) => {\n 'worklet'\n runOnJS(reanimatedOnDidAnimated)(key, completed, current, {\n attemptedValue: value,\n })\n if (isExiting) {\n exitingStyleProps[key] = false\n const areStylesExiting = Object.values(exitingStyleProps).some(Boolean)\n // if this is true, then we've finished our exit animations\n if (!areStylesExiting) {\n if (sendExitComplete) {\n runOnJS(sendExitComplete)()\n }\n }\n }\n }\n }\n\n const animatedStyle = useAnimatedStyle(() => {\n 'worklet'\n\n // getting issues with native unless this :/\n const style = JSON.parse(animatedString)\n\n const final = {\n transform: [] as any[],\n }\n\n const exitingStyleProps: Record<string, boolean> = {}\n\n // TODO this needs various manual checks, untested\n // psuedos.exitStyle wont have the exitVariant on it unless we add that\n if (pseudos?.exitStyle) {\n for (const key in pseudos.exitStyle) {\n if (key === 'transform') {\n const val = pseudos.exitStyle[key]\n if (val) {\n for (const attr of val) {\n const tkey = Object.keys(attr)[0]\n exitingStyleProps[tkey] = true\n }\n }\n } else {\n exitingStyleProps[key] = true\n }\n }\n }\n\n for (const key in style) {\n const value = style[key]\n const animationConfig = getAnimationConfig(key, animations, props.animation)\n const { animation, config, shouldRepeat, repeatCount, repeatReverse } =\n getAnimation(key, animationConfig, props.animateOnly)\n\n const { delayMs = null } = animationDelay(key, animationConfig, delay)\n\n if (!animation) {\n // eslint-disable-next-line no-console\n console.warn('No animation for', key, 'in', style)\n continue\n }\n if (!config) {\n // eslint-disable-next-line no-console\n console.warn('No animation config for', key, 'in', style)\n continue\n }\n\n if (key === 'transform') {\n if (!Array.isArray(value)) {\n // eslint-disable-next-line no-console\n console.error(`Invalid transform value. Needs to be an array.`)\n continue\n }\n\n for (const transformObject of value) {\n const key = Object.keys(transformObject)[0]\n const transformValue = transformObject[key]\n let finalValue = animation(\n transformValue,\n config as any,\n callback(isExiting, exitingStyleProps, key, value)\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n final['transform'].push({\n [key]: finalValue,\n })\n }\n continue\n }\n\n if (typeof value === 'object') {\n // shadows\n final[key] = {}\n for (const innerStyleKey of Object.keys(value || {})) {\n let finalValue = animation(\n value,\n config as any,\n callback(isExiting, exitingStyleProps, key, value)\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n if (delayMs != null) {\n final[key][innerStyleKey] = withDelay(delayMs, finalValue)\n } else {\n final[key][innerStyleKey] = finalValue\n }\n }\n continue\n }\n\n let finalValue = animation(\n value,\n config as any,\n callback(isExiting, exitingStyleProps, key, value)\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n if (delayMs != null && typeof delayMs === 'number') {\n final[key] = withDelay(delayMs, finalValue)\n } else {\n final[key] = finalValue\n }\n\n // end for (key in mergedStyles)\n }\n\n return final\n }, [key])\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [key])\n },\n }\n}\n\nfunction getAnimationConfig(\n key: string,\n animations: AnimationsConfig,\n animation?: AnimationProp\n) {\n 'worklet'\n if (typeof animation === 'string') {\n return animations[animation]\n }\n let type = ''\n let extraConf: any\n if (Array.isArray(animation)) {\n type = animation[0] as string\n const conf = animation[1] && animation[1][key]\n if (conf) {\n if (typeof conf === 'string') {\n type = conf\n } else {\n type = (conf as any).type || type\n extraConf = conf\n }\n }\n } else {\n const val = animation?.[key]\n type = val?.type\n extraConf = val\n }\n const found = animations[type]\n if (!found) {\n throw new Error(`No animation of type \"${type}\" for key \"${key}\"`)\n }\n return {\n ...found,\n ...extraConf,\n type: found.type,\n }\n}\n\nfunction animationDelay(\n key: string,\n animation: AnimationConfig | undefined,\n defaultDelay?: number\n) {\n 'worklet'\n if (\n !animation ||\n !animation[key] ||\n animation[key].delayMs === undefined ||\n animation[key].delayMs === null\n ) {\n return {\n delayMs: null,\n }\n }\n return {\n delayMs: animation[key].delayMs as TransitionConfig['delay'],\n }\n}\n\ntype TransitionConfigWithoutRepeats = (\n | ({ type?: 'spring' } & WithSpringConfig)\n | ({ type: 'timing' } & WithTimingConfig)\n | ({ type: 'decay' } & WithDecayConfig)\n) & {\n delay?: number\n}\n\ntype TransitionConfig = TransitionConfigWithoutRepeats & {\n /**\n * Number of times this animation should repeat. To make it infinite, use the `loop` boolean.\n *\n * Default: `0`\n *\n * It's worth noting that this value isn't *exactly* a `repeat`. Instead, it uses Reanimated's `withRepeat` function under the hood, which repeats back to the **previous value**. If you want a repeated animation, I recommend setting it to `true` from the start, and make sure you have a `from` value.\n *\n * As a result, this value cannot be reliably changed on the fly. If you would like animations to repeat based on the `from` value, `repeat` must be a number when the component initializes. You can set it to `0` to stop it, but you won't be able to start it again. You might be better off using the sequence array API if you need to update its repetitiveness on the fly.\n */\n repeat?: number\n /**\n * Setting this to `true` is the same as `repeat: Infinity`\n *\n * Default: `false`\n *\n * Note: this value cannot be set on the fly. If you would like animations to repeat based on the `from` value, it must be `true` when the component initializes. You can set it to `false` to stop it, but you won't be able to start it again. You might be better off using the sequence array API if you need to update its repetitiveness on the fly.\n */\n loop?: boolean\n /**\n * Whether or not the animation repetition should alternate in direction.\n *\n * By default, this is `true`.\n *\n * If `false`, any animations with `loop` or `repeat` will not go back and forth. Instead, they will go from 0 -> 1, and again from 0 -> 1.\n *\n * If `true`, then animations will go 0 -> 1 -> 0.\n *\n * Setting this to `true` is like setting `animationDirection: alternate` in CSS.\n */\n repeatReverse?: boolean\n}\n\nconst isColor = (styleKey: string) => {\n 'worklet'\n return [\n 'backgroundColor',\n 'borderBottomColor',\n 'borderColor',\n 'borderEndColor',\n 'borderLeftColor',\n 'borderRightColor',\n 'borderStartColor',\n 'borderTopColor',\n 'color',\n ].includes(styleKey)\n}\n\nfunction getAnimation(\n key: string,\n animationConfig: AnimationConfig | undefined,\n animateOnly?: string[]\n) {\n 'worklet'\n if (!animationConfig || (animateOnly && !animateOnly.includes(key))) {\n return {}\n }\n\n let repeatCount = 0\n const repeatReverse = animationConfig.repeatReverse || false\n let animationType: Required<TransitionConfig>['type'] =\n animationConfig?.type || 'spring'\n\n if (isColor(key) || key === 'opacity') {\n animationType = 'timing'\n }\n\n if ('repeat' in animationConfig) {\n repeatCount = animationConfig.repeat || 0\n } else {\n if (animationConfig.loop) {\n repeatCount = animationConfig.loop ? -1 : 0\n }\n }\n\n let config = animationConfig\n let animation: typeof withTiming | typeof withSpring | typeof withDecay\n\n if (animationType === 'timing') {\n animation = withTiming\n } else if (animationType === 'spring') {\n animation = withSpring\n } else if (animationType === 'decay') {\n animation = withDecay\n config = config || {\n velocity: 2,\n deceleration: 2,\n }\n } else {\n animation = withSpring\n }\n\n return {\n animation,\n config,\n repeatReverse,\n repeatCount,\n shouldRepeat: !!repeatCount,\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["key", "isExiting", "style", "finalValue"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/animations-reanimated",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"sideEffects": true,
|
|
6
6
|
"license": "MIT",
|
|
@@ -13,12 +13,12 @@
|
|
|
13
13
|
"dist"
|
|
14
14
|
],
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@tamagui/animations-react-native": "^1.0.
|
|
17
|
-
"@tamagui/core": "^1.0.
|
|
18
|
-
"@tamagui/use-presence": "^1.0.
|
|
16
|
+
"@tamagui/animations-react-native": "^1.0.4",
|
|
17
|
+
"@tamagui/core": "^1.0.4",
|
|
18
|
+
"@tamagui/use-presence": "^1.0.4"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"@tamagui/build": "^1.0.
|
|
21
|
+
"@tamagui/build": "^1.0.4",
|
|
22
22
|
"react-native-reanimated": "^2.12.0"
|
|
23
23
|
},
|
|
24
24
|
"scripts": {
|
package/src/createAnimations.tsx
CHANGED
|
@@ -27,7 +27,7 @@ if (process.env.NODE_ENV === 'development') {
|
|
|
27
27
|
if (FlatList?.['_isProxyWorm']) {
|
|
28
28
|
// eslint-disable-next-line no-console
|
|
29
29
|
console.warn(
|
|
30
|
-
`Using reanimated with excludeReactNativeWebExports including FlatList, adjust your next.config.js, reanimated currently doesn't support tree-shaking and needs *List components around
|
|
30
|
+
`Using reanimated with excludeReactNativeWebExports including FlatList, adjust your next.config.js, reanimated currently doesn't support tree-shaking and needs *List components around.`
|
|
31
31
|
)
|
|
32
32
|
}
|
|
33
33
|
}
|
|
@@ -64,7 +64,7 @@ const animatedStyleKey = {
|
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
export function createAnimations<A extends AnimationsConfig>(
|
|
67
|
-
animations: A
|
|
67
|
+
animations: A
|
|
68
68
|
): AnimationDriver<A> {
|
|
69
69
|
const AnimatedView = Animated.View
|
|
70
70
|
const AnimatedText = Animated.Text
|
|
@@ -92,7 +92,7 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
92
92
|
const reanimatedOnDidAnimated = useEvent<NonNullable<typeof onDidAnimate>>(
|
|
93
93
|
(...args) => {
|
|
94
94
|
onDidAnimate?.(...args)
|
|
95
|
-
}
|
|
95
|
+
}
|
|
96
96
|
)
|
|
97
97
|
|
|
98
98
|
const all = style
|
|
@@ -122,7 +122,7 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
122
122
|
isExiting: boolean,
|
|
123
123
|
exitingStyleProps: Record<string, boolean>,
|
|
124
124
|
key: string,
|
|
125
|
-
value: any
|
|
125
|
+
value: any
|
|
126
126
|
) => {
|
|
127
127
|
'worklet'
|
|
128
128
|
return (completed: boolean | undefined, current: any) => {
|
|
@@ -157,7 +157,7 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
157
157
|
|
|
158
158
|
// TODO this needs various manual checks, untested
|
|
159
159
|
// psuedos.exitStyle wont have the exitVariant on it unless we add that
|
|
160
|
-
if (pseudos
|
|
160
|
+
if (pseudos?.exitStyle) {
|
|
161
161
|
for (const key in pseudos.exitStyle) {
|
|
162
162
|
if (key === 'transform') {
|
|
163
163
|
const val = pseudos.exitStyle[key]
|
|
@@ -175,11 +175,7 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
175
175
|
|
|
176
176
|
for (const key in style) {
|
|
177
177
|
const value = style[key]
|
|
178
|
-
const animationConfig = getAnimationConfig(
|
|
179
|
-
key,
|
|
180
|
-
animations,
|
|
181
|
-
props.animation,
|
|
182
|
-
)
|
|
178
|
+
const animationConfig = getAnimationConfig(key, animations, props.animation)
|
|
183
179
|
const { animation, config, shouldRepeat, repeatCount, repeatReverse } =
|
|
184
180
|
getAnimation(key, animationConfig, props.animateOnly)
|
|
185
181
|
|
|
@@ -209,7 +205,7 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
209
205
|
let finalValue = animation(
|
|
210
206
|
transformValue,
|
|
211
207
|
config as any,
|
|
212
|
-
callback(isExiting, exitingStyleProps, key, value)
|
|
208
|
+
callback(isExiting, exitingStyleProps, key, value)
|
|
213
209
|
)
|
|
214
210
|
if (shouldRepeat) {
|
|
215
211
|
finalValue = withRepeat(finalValue, repeatCount, repeatReverse)
|
|
@@ -228,7 +224,7 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
228
224
|
let finalValue = animation(
|
|
229
225
|
value,
|
|
230
226
|
config as any,
|
|
231
|
-
callback(isExiting, exitingStyleProps, key, value)
|
|
227
|
+
callback(isExiting, exitingStyleProps, key, value)
|
|
232
228
|
)
|
|
233
229
|
if (shouldRepeat) {
|
|
234
230
|
finalValue = withRepeat(finalValue, repeatCount, repeatReverse)
|
|
@@ -245,7 +241,7 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
245
241
|
let finalValue = animation(
|
|
246
242
|
value,
|
|
247
243
|
config as any,
|
|
248
|
-
callback(isExiting, exitingStyleProps, key, value)
|
|
244
|
+
callback(isExiting, exitingStyleProps, key, value)
|
|
249
245
|
)
|
|
250
246
|
if (shouldRepeat) {
|
|
251
247
|
finalValue = withRepeat(finalValue, repeatCount, repeatReverse)
|
|
@@ -275,7 +271,7 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
275
271
|
function getAnimationConfig(
|
|
276
272
|
key: string,
|
|
277
273
|
animations: AnimationsConfig,
|
|
278
|
-
animation?: AnimationProp
|
|
274
|
+
animation?: AnimationProp
|
|
279
275
|
) {
|
|
280
276
|
'worklet'
|
|
281
277
|
if (typeof animation === 'string') {
|
|
@@ -313,7 +309,7 @@ function getAnimationConfig(
|
|
|
313
309
|
function animationDelay(
|
|
314
310
|
key: string,
|
|
315
311
|
animation: AnimationConfig | undefined,
|
|
316
|
-
defaultDelay?: number
|
|
312
|
+
defaultDelay?: number
|
|
317
313
|
) {
|
|
318
314
|
'worklet'
|
|
319
315
|
if (
|
|
@@ -390,7 +386,7 @@ const isColor = (styleKey: string) => {
|
|
|
390
386
|
function getAnimation(
|
|
391
387
|
key: string,
|
|
392
388
|
animationConfig: AnimationConfig | undefined,
|
|
393
|
-
animateOnly?: string[]
|
|
389
|
+
animateOnly?: string[]
|
|
394
390
|
) {
|
|
395
391
|
'worklet'
|
|
396
392
|
if (!animationConfig || (animateOnly && !animateOnly.includes(key))) {
|