@tamagui/animations-reanimated 1.9.4 → 1.9.6
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.
- package/dist/cjs/createAnimations.js +10 -10
- package/dist/cjs/createAnimations.js.map +2 -2
- package/dist/esm/createAnimations.js +10 -10
- package/dist/esm/createAnimations.js.map +2 -2
- package/dist/esm/createAnimations.mjs +10 -10
- package/dist/esm/createAnimations.mjs.map +2 -2
- package/package.json +5 -5
- package/src/createAnimations.tsx +11 -15
|
@@ -68,7 +68,7 @@ function createAnimations(animations) {
|
|
|
68
68
|
useAnimatedNumberReaction: import_useAnimatedNumber.useAnimatedNumberReaction,
|
|
69
69
|
useAnimatedNumberStyle: import_useAnimatedNumber.useAnimatedNumberStyle,
|
|
70
70
|
usePresence: import_use_presence.usePresence,
|
|
71
|
-
useAnimations: ({ props, style, presence, pseudos, onDidAnimate
|
|
71
|
+
useAnimations: ({ props, style, presence, pseudos, onDidAnimate }) => {
|
|
72
72
|
const isExiting = (presence == null ? void 0 : presence[0]) === false;
|
|
73
73
|
const sendExitComplete = presence == null ? void 0 : presence[1];
|
|
74
74
|
const reanimatedOnDidAnimated = (0, import_web.useEvent)(
|
|
@@ -131,7 +131,7 @@ function createAnimations(animations) {
|
|
|
131
131
|
const value = style2[key2];
|
|
132
132
|
const animationConfig = getAnimationConfig(key2, animations, props.animation);
|
|
133
133
|
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(key2, animationConfig, props.animateOnly);
|
|
134
|
-
const {
|
|
134
|
+
const { delay = null } = animationDelay(key2, animationConfig);
|
|
135
135
|
if (!animation) {
|
|
136
136
|
console.warn("No animation for", key2, "in", style2);
|
|
137
137
|
continue;
|
|
@@ -173,8 +173,8 @@ function createAnimations(animations) {
|
|
|
173
173
|
if (shouldRepeat) {
|
|
174
174
|
finalValue2 = (0, import_react_native_reanimated.withRepeat)(finalValue2, repeatCount, repeatReverse);
|
|
175
175
|
}
|
|
176
|
-
if (
|
|
177
|
-
final[key2][innerStyleKey] = (0, import_react_native_reanimated.withDelay)(
|
|
176
|
+
if (delay != null) {
|
|
177
|
+
final[key2][innerStyleKey] = (0, import_react_native_reanimated.withDelay)(delay, finalValue2);
|
|
178
178
|
} else {
|
|
179
179
|
final[key2][innerStyleKey] = finalValue2;
|
|
180
180
|
}
|
|
@@ -189,8 +189,8 @@ function createAnimations(animations) {
|
|
|
189
189
|
if (shouldRepeat) {
|
|
190
190
|
finalValue = (0, import_react_native_reanimated.withRepeat)(finalValue, repeatCount, repeatReverse);
|
|
191
191
|
}
|
|
192
|
-
if (
|
|
193
|
-
final[key2] = (0, import_react_native_reanimated.withDelay)(
|
|
192
|
+
if (delay != null && typeof delay === "number") {
|
|
193
|
+
final[key2] = (0, import_react_native_reanimated.withDelay)(delay, finalValue);
|
|
194
194
|
} else {
|
|
195
195
|
final[key2] = finalValue;
|
|
196
196
|
}
|
|
@@ -238,15 +238,15 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
238
238
|
type: found.type
|
|
239
239
|
};
|
|
240
240
|
}
|
|
241
|
-
function animationDelay(key, animation
|
|
241
|
+
function animationDelay(key, animation) {
|
|
242
242
|
"worklet";
|
|
243
|
-
if (!animation || !animation[key] || animation[key].
|
|
243
|
+
if (!animation || !animation[key] || animation[key].delay === void 0 || animation[key].delay === null) {
|
|
244
244
|
return {
|
|
245
|
-
|
|
245
|
+
delay: null
|
|
246
246
|
};
|
|
247
247
|
}
|
|
248
248
|
return {
|
|
249
|
-
|
|
249
|
+
delay: animation[key].delay
|
|
250
250
|
};
|
|
251
251
|
}
|
|
252
252
|
const isColor = (styleKey) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/use-presence'\nimport { AnimationDriver, AnimationProp, useEvent } from '@tamagui/web'\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6C;AAC7C,iBAAyD;AACzD,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;AAAA;AAAA;AAGX;AAEO,SAAS,iBACd,YACoB;AACpB,QAAM,eAAe,+BAAAA,QAAS;AAC9B,QAAM,eAAe,+BAAAA,QAAS;AAE9B,eAAa,aAAa,IAAI;AAC9B,eAAa,aAAa,IAAI;AAE9B,SAAO;AAAA,IACL,eAAe;AAAA,IACf;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA;AAAA;AAAA,IAIN,YAAY,oBAAAC,SAAW;AAAA,IAEvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,CAAC,EAAE,OAAO,OAAO,UAAU,SAAS,
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/use-presence'\nimport { AnimationDriver, AnimationProp, useEvent } from '@tamagui/web'\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 }) => {\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 { delay = null } = animationDelay(key, animationConfig)\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 (delay != null) {\n final[key][innerStyleKey] = withDelay(delay, 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 (delay != null && typeof delay === 'number') {\n final[key] = withDelay(delay, 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(key: string, animation: AnimationConfig | undefined) {\n 'worklet'\n if (\n !animation ||\n !animation[key] ||\n animation[key].delay === undefined ||\n animation[key].delay === null\n ) {\n return {\n delay: null,\n }\n }\n return {\n delay: animation[key].delay 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
|
}
|
|
@@ -47,7 +47,7 @@ function createAnimations(animations) {
|
|
|
47
47
|
useAnimatedNumberReaction,
|
|
48
48
|
useAnimatedNumberStyle,
|
|
49
49
|
usePresence,
|
|
50
|
-
useAnimations: ({ props, style, presence, pseudos, onDidAnimate
|
|
50
|
+
useAnimations: ({ props, style, presence, pseudos, onDidAnimate }) => {
|
|
51
51
|
const isExiting = (presence == null ? void 0 : presence[0]) === false;
|
|
52
52
|
const sendExitComplete = presence == null ? void 0 : presence[1];
|
|
53
53
|
const reanimatedOnDidAnimated = useEvent(
|
|
@@ -110,7 +110,7 @@ function createAnimations(animations) {
|
|
|
110
110
|
const value = style2[key2];
|
|
111
111
|
const animationConfig = getAnimationConfig(key2, animations, props.animation);
|
|
112
112
|
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(key2, animationConfig, props.animateOnly);
|
|
113
|
-
const {
|
|
113
|
+
const { delay = null } = animationDelay(key2, animationConfig);
|
|
114
114
|
if (!animation) {
|
|
115
115
|
console.warn("No animation for", key2, "in", style2);
|
|
116
116
|
continue;
|
|
@@ -152,8 +152,8 @@ function createAnimations(animations) {
|
|
|
152
152
|
if (shouldRepeat) {
|
|
153
153
|
finalValue2 = withRepeat(finalValue2, repeatCount, repeatReverse);
|
|
154
154
|
}
|
|
155
|
-
if (
|
|
156
|
-
final[key2][innerStyleKey] = withDelay(
|
|
155
|
+
if (delay != null) {
|
|
156
|
+
final[key2][innerStyleKey] = withDelay(delay, finalValue2);
|
|
157
157
|
} else {
|
|
158
158
|
final[key2][innerStyleKey] = finalValue2;
|
|
159
159
|
}
|
|
@@ -168,8 +168,8 @@ function createAnimations(animations) {
|
|
|
168
168
|
if (shouldRepeat) {
|
|
169
169
|
finalValue = withRepeat(finalValue, repeatCount, repeatReverse);
|
|
170
170
|
}
|
|
171
|
-
if (
|
|
172
|
-
final[key2] = withDelay(
|
|
171
|
+
if (delay != null && typeof delay === "number") {
|
|
172
|
+
final[key2] = withDelay(delay, finalValue);
|
|
173
173
|
} else {
|
|
174
174
|
final[key2] = finalValue;
|
|
175
175
|
}
|
|
@@ -217,15 +217,15 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
217
217
|
type: found.type
|
|
218
218
|
};
|
|
219
219
|
}
|
|
220
|
-
function animationDelay(key, animation
|
|
220
|
+
function animationDelay(key, animation) {
|
|
221
221
|
"worklet";
|
|
222
|
-
if (!animation || !animation[key] || animation[key].
|
|
222
|
+
if (!animation || !animation[key] || animation[key].delay === void 0 || animation[key].delay === null) {
|
|
223
223
|
return {
|
|
224
|
-
|
|
224
|
+
delay: null
|
|
225
225
|
};
|
|
226
226
|
}
|
|
227
227
|
return {
|
|
228
|
-
|
|
228
|
+
delay: animation[key].delay
|
|
229
229
|
};
|
|
230
230
|
}
|
|
231
231
|
const isColor = (styleKey) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/use-presence'\nimport { AnimationDriver, AnimationProp, useEvent } from '@tamagui/web'\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": "AAAA;AAAA,SAA0B,mBAAmB;AAC7C,SAAyC,gBAAgB;AACzD,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;AAAA;AAAA;AAGX;AAEO,SAAS,iBACd,YACoB;AACpB,QAAM,eAAe,SAAS;AAC9B,QAAM,eAAe,SAAS;AAE9B,eAAa,aAAa,IAAI;AAC9B,eAAa,aAAa,IAAI;AAE9B,SAAO;AAAA,IACL,eAAe;AAAA,IACf;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA;AAAA;AAAA,IAIN,YAAY,WAAW;AAAA,IAEvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,CAAC,EAAE,OAAO,OAAO,UAAU,SAAS,
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/use-presence'\nimport { AnimationDriver, AnimationProp, useEvent } from '@tamagui/web'\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 }) => {\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 { delay = null } = animationDelay(key, animationConfig)\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 (delay != null) {\n final[key][innerStyleKey] = withDelay(delay, 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 (delay != null && typeof delay === 'number') {\n final[key] = withDelay(delay, 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(key: string, animation: AnimationConfig | undefined) {\n 'worklet'\n if (\n !animation ||\n !animation[key] ||\n animation[key].delay === undefined ||\n animation[key].delay === null\n ) {\n return {\n delay: null,\n }\n }\n return {\n delay: animation[key].delay 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
|
}
|
|
@@ -47,7 +47,7 @@ function createAnimations(animations) {
|
|
|
47
47
|
useAnimatedNumberReaction,
|
|
48
48
|
useAnimatedNumberStyle,
|
|
49
49
|
usePresence,
|
|
50
|
-
useAnimations: ({ props, style, presence, pseudos, onDidAnimate
|
|
50
|
+
useAnimations: ({ props, style, presence, pseudos, onDidAnimate }) => {
|
|
51
51
|
const isExiting = (presence == null ? void 0 : presence[0]) === false;
|
|
52
52
|
const sendExitComplete = presence == null ? void 0 : presence[1];
|
|
53
53
|
const reanimatedOnDidAnimated = useEvent(
|
|
@@ -110,7 +110,7 @@ function createAnimations(animations) {
|
|
|
110
110
|
const value = style2[key2];
|
|
111
111
|
const animationConfig = getAnimationConfig(key2, animations, props.animation);
|
|
112
112
|
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(key2, animationConfig, props.animateOnly);
|
|
113
|
-
const {
|
|
113
|
+
const { delay = null } = animationDelay(key2, animationConfig);
|
|
114
114
|
if (!animation) {
|
|
115
115
|
console.warn("No animation for", key2, "in", style2);
|
|
116
116
|
continue;
|
|
@@ -152,8 +152,8 @@ function createAnimations(animations) {
|
|
|
152
152
|
if (shouldRepeat) {
|
|
153
153
|
finalValue2 = withRepeat(finalValue2, repeatCount, repeatReverse);
|
|
154
154
|
}
|
|
155
|
-
if (
|
|
156
|
-
final[key2][innerStyleKey] = withDelay(
|
|
155
|
+
if (delay != null) {
|
|
156
|
+
final[key2][innerStyleKey] = withDelay(delay, finalValue2);
|
|
157
157
|
} else {
|
|
158
158
|
final[key2][innerStyleKey] = finalValue2;
|
|
159
159
|
}
|
|
@@ -168,8 +168,8 @@ function createAnimations(animations) {
|
|
|
168
168
|
if (shouldRepeat) {
|
|
169
169
|
finalValue = withRepeat(finalValue, repeatCount, repeatReverse);
|
|
170
170
|
}
|
|
171
|
-
if (
|
|
172
|
-
final[key2] = withDelay(
|
|
171
|
+
if (delay != null && typeof delay === "number") {
|
|
172
|
+
final[key2] = withDelay(delay, finalValue);
|
|
173
173
|
} else {
|
|
174
174
|
final[key2] = finalValue;
|
|
175
175
|
}
|
|
@@ -217,15 +217,15 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
217
217
|
type: found.type
|
|
218
218
|
};
|
|
219
219
|
}
|
|
220
|
-
function animationDelay(key, animation
|
|
220
|
+
function animationDelay(key, animation) {
|
|
221
221
|
"worklet";
|
|
222
|
-
if (!animation || !animation[key] || animation[key].
|
|
222
|
+
if (!animation || !animation[key] || animation[key].delay === void 0 || animation[key].delay === null) {
|
|
223
223
|
return {
|
|
224
|
-
|
|
224
|
+
delay: null
|
|
225
225
|
};
|
|
226
226
|
}
|
|
227
227
|
return {
|
|
228
|
-
|
|
228
|
+
delay: animation[key].delay
|
|
229
229
|
};
|
|
230
230
|
}
|
|
231
231
|
const isColor = (styleKey) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/use-presence'\nimport { AnimationDriver, AnimationProp, useEvent } from '@tamagui/web'\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": "AAAA;AAAA,SAA0B,mBAAmB;AAC7C,SAAyC,gBAAgB;AACzD,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;AAAA;AAAA;AAGX;AAEO,SAAS,iBACd,YACoB;AACpB,QAAM,eAAe,SAAS;AAC9B,QAAM,eAAe,SAAS;AAE9B,eAAa,aAAa,IAAI;AAC9B,eAAa,aAAa,IAAI;AAE9B,SAAO;AAAA,IACL,eAAe;AAAA,IACf;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA;AAAA;AAAA,IAIN,YAAY,WAAW;AAAA,IAEvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,CAAC,EAAE,OAAO,OAAO,UAAU,SAAS,
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/use-presence'\nimport { AnimationDriver, AnimationProp, useEvent } from '@tamagui/web'\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 }) => {\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 { delay = null } = animationDelay(key, animationConfig)\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 (delay != null) {\n final[key][innerStyleKey] = withDelay(delay, 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 (delay != null && typeof delay === 'number') {\n final[key] = withDelay(delay, 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(key: string, animation: AnimationConfig | undefined) {\n 'worklet'\n if (\n !animation ||\n !animation[key] ||\n animation[key].delay === undefined ||\n animation[key].delay === null\n ) {\n return {\n delay: null,\n }\n }\n return {\n delay: animation[key].delay 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.9.
|
|
3
|
+
"version": "1.9.6",
|
|
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.9.
|
|
17
|
-
"@tamagui/use-presence": "1.9.
|
|
18
|
-
"@tamagui/web": "1.9.
|
|
16
|
+
"@tamagui/animations-react-native": "1.9.6",
|
|
17
|
+
"@tamagui/use-presence": "1.9.6",
|
|
18
|
+
"@tamagui/web": "1.9.6"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"@tamagui/build": "1.9.
|
|
21
|
+
"@tamagui/build": "1.9.6",
|
|
22
22
|
"react-native-reanimated": "^2.14.4"
|
|
23
23
|
},
|
|
24
24
|
"scripts": {
|
package/src/createAnimations.tsx
CHANGED
|
@@ -86,7 +86,7 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
86
86
|
useAnimatedNumberReaction,
|
|
87
87
|
useAnimatedNumberStyle,
|
|
88
88
|
usePresence,
|
|
89
|
-
useAnimations: ({ props, style, presence, pseudos, onDidAnimate
|
|
89
|
+
useAnimations: ({ props, style, presence, pseudos, onDidAnimate }) => {
|
|
90
90
|
const isExiting = presence?.[0] === false
|
|
91
91
|
const sendExitComplete = presence?.[1]
|
|
92
92
|
const reanimatedOnDidAnimated = useEvent<NonNullable<typeof onDidAnimate>>(
|
|
@@ -179,7 +179,7 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
179
179
|
const { animation, config, shouldRepeat, repeatCount, repeatReverse } =
|
|
180
180
|
getAnimation(key, animationConfig, props.animateOnly)
|
|
181
181
|
|
|
182
|
-
const {
|
|
182
|
+
const { delay = null } = animationDelay(key, animationConfig)
|
|
183
183
|
|
|
184
184
|
if (!animation) {
|
|
185
185
|
// eslint-disable-next-line no-console
|
|
@@ -229,8 +229,8 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
229
229
|
if (shouldRepeat) {
|
|
230
230
|
finalValue = withRepeat(finalValue, repeatCount, repeatReverse)
|
|
231
231
|
}
|
|
232
|
-
if (
|
|
233
|
-
final[key][innerStyleKey] = withDelay(
|
|
232
|
+
if (delay != null) {
|
|
233
|
+
final[key][innerStyleKey] = withDelay(delay, finalValue)
|
|
234
234
|
} else {
|
|
235
235
|
final[key][innerStyleKey] = finalValue
|
|
236
236
|
}
|
|
@@ -246,8 +246,8 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
246
246
|
if (shouldRepeat) {
|
|
247
247
|
finalValue = withRepeat(finalValue, repeatCount, repeatReverse)
|
|
248
248
|
}
|
|
249
|
-
if (
|
|
250
|
-
final[key] = withDelay(
|
|
249
|
+
if (delay != null && typeof delay === 'number') {
|
|
250
|
+
final[key] = withDelay(delay, finalValue)
|
|
251
251
|
} else {
|
|
252
252
|
final[key] = finalValue
|
|
253
253
|
}
|
|
@@ -306,24 +306,20 @@ function getAnimationConfig(
|
|
|
306
306
|
}
|
|
307
307
|
}
|
|
308
308
|
|
|
309
|
-
function animationDelay(
|
|
310
|
-
key: string,
|
|
311
|
-
animation: AnimationConfig | undefined,
|
|
312
|
-
defaultDelay?: number
|
|
313
|
-
) {
|
|
309
|
+
function animationDelay(key: string, animation: AnimationConfig | undefined) {
|
|
314
310
|
'worklet'
|
|
315
311
|
if (
|
|
316
312
|
!animation ||
|
|
317
313
|
!animation[key] ||
|
|
318
|
-
animation[key].
|
|
319
|
-
animation[key].
|
|
314
|
+
animation[key].delay === undefined ||
|
|
315
|
+
animation[key].delay === null
|
|
320
316
|
) {
|
|
321
317
|
return {
|
|
322
|
-
|
|
318
|
+
delay: null,
|
|
323
319
|
}
|
|
324
320
|
}
|
|
325
321
|
return {
|
|
326
|
-
|
|
322
|
+
delay: animation[key].delay as TransitionConfig['delay'],
|
|
327
323
|
}
|
|
328
324
|
}
|
|
329
325
|
|