@tamagui/animations-reanimated 1.0.1-beta.100 → 1.0.1-beta.103
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 +6 -6
- package/dist/cjs/createAnimations.js.map +2 -2
- package/dist/esm/createAnimations.js +6 -6
- package/dist/esm/createAnimations.js.map +2 -2
- package/dist/jsx/createAnimations.js +6 -6
- package/dist/jsx/createAnimations.js.map +2 -2
- package/package.json +4 -4
- package/src/createAnimations.tsx +9 -6
- package/types/createAnimations.d.ts.map +1 -1
- package/types/polyfill.d.ts +1 -0
- package/types/polyfill.d.ts.map +1 -0
|
@@ -43,6 +43,10 @@ module.exports = __toCommonJS(createAnimations_exports);
|
|
|
43
43
|
var import_animate_presence = require("@tamagui/animate-presence");
|
|
44
44
|
var import_react = require("react");
|
|
45
45
|
var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
|
|
46
|
+
const animatedStyleKey = {
|
|
47
|
+
transform: true,
|
|
48
|
+
opacity: true
|
|
49
|
+
};
|
|
46
50
|
function createAnimations(animations) {
|
|
47
51
|
const AnimatedView = import_react_native_reanimated.default.View;
|
|
48
52
|
const AnimatedText = import_react_native_reanimated.default.Text;
|
|
@@ -71,10 +75,6 @@ function createAnimations(animations) {
|
|
|
71
75
|
enterVariant: presence == null ? void 0 : presence.enterVariant
|
|
72
76
|
});
|
|
73
77
|
const [animatedStyles, nonAnimatedStyle] = [{}, {}];
|
|
74
|
-
const animatedStyleKey = {
|
|
75
|
-
transform: true,
|
|
76
|
-
opacity: true
|
|
77
|
-
};
|
|
78
78
|
for (const key of Object.keys(all)) {
|
|
79
79
|
if (animatedStyleKey[key]) {
|
|
80
80
|
animatedStyles[key] = all[key];
|
|
@@ -138,7 +138,7 @@ function createAnimations(animations) {
|
|
|
138
138
|
const value = style[key];
|
|
139
139
|
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
140
140
|
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(key, animationConfig, props.animateOnly);
|
|
141
|
-
|
|
141
|
+
const { delayMs = null } = animationDelay(key, animationConfig, delay);
|
|
142
142
|
if (!animation) {
|
|
143
143
|
console.warn("No animation for", key, "in", style);
|
|
144
144
|
continue;
|
|
@@ -262,7 +262,7 @@ function getAnimation(key, animationConfig, animateOnly) {
|
|
|
262
262
|
return {};
|
|
263
263
|
}
|
|
264
264
|
let repeatCount = 0;
|
|
265
|
-
|
|
265
|
+
const repeatReverse = animationConfig.repeatReverse || false;
|
|
266
266
|
let animationType = (animationConfig == null ? void 0 : animationConfig.type) || "spring";
|
|
267
267
|
if (isColor(key) || key === "opacity") {
|
|
268
268
|
animationType = "timing";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp } from '@tamagui/core'\nimport { useCallback, useContext, useMemo } from 'react'\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\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig =\n | ({ type: 'timing'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithTimingConfig)\n | ({ type: 'spring'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithSpringConfig)\n | ({ type: 'decay'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithDecayConfig)\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): 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 avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimations: (props, helpers) => {\n const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers\n const [isPresent, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n\n const exitStyle = presence?.exitVariant\n ? staticConfig.variantsParsed?.[presence.exitVariant]?.true || pseudos.exitStyle\n : pseudos.exitStyle\n\n const reanimatedOnDidAnimated = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\n )\n\n const isExiting = isPresent === false\n const isEntering = !state.mounted\n\n const all = getStyle({\n isExiting,\n isEntering,\n exitVariant: presence?.exitVariant,\n enterVariant: presence?.enterVariant,\n })\n\n const [animatedStyles, nonAnimatedStyle] = [{}, {}]\n const animatedStyleKey = {\n transform: true,\n opacity: true,\n }\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 args = [\n JSON.stringify(all),\n state.mounted,\n state.hover,\n state.press,\n state.pressIn,\n state.focus,\n delay,\n isPresent,\n onDidAnimate,\n reanimatedOnDidAnimated,\n presence?.exitVariant,\n presence?.enterVariant,\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, current) => {\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 const style = animatedStyles\n\n const final = {\n transform: [] as any[],\n }\n\n const isExiting = isPresent === false\n\n const exitingStyleProps: Record<string, boolean> = {}\n if (exitStyle) {\n for (const key in exitStyle) {\n if (key === 'transform') {\n for (const attr of exitStyle[key]) {\n const tkey = Object.keys(attr)[0]\n exitingStyleProps[tkey] = true\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 } = getAnimation(\n key,\n animationConfig,\n props.animateOnly\n )\n\n let { delayMs = null } = animationDelay(key, animationConfig, delay)\n\n if (!animation) {\n console.warn('No animation for', key, 'in', style)\n continue\n }\n if (!config) {\n console.warn('No animation config for', key, 'in', style)\n continue\n }\n\n if (key === 'transform') {\n if (!Array.isArray(value)) {\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 }, args)\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n }, args)\n },\n }\n}\n\nfunction getAnimationConfig(key: string, animations: AnimationsConfig, animation?: AnimationProp) {\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 let repeatReverse = animationConfig.repeatReverse || false\n let animationType: Required<TransitionConfig>['type'] = 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 console.warn('no type of animation?', animationType)\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,8BAA6C;AAE7C,mBAAiD;AACjD,qCAWO;
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp } from '@tamagui/core'\nimport { useCallback, useContext, useMemo } from 'react'\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\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig =\n | ({ type: 'timing'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithTimingConfig)\n | ({ type: 'spring'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithSpringConfig)\n | ({ type: 'decay'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithDecayConfig)\n\nconst animatedStyleKey = {\n transform: true,\n opacity: true,\n // backgroundColor: true,\n // color: true,\n}\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): 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 avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimations: (props, helpers) => {\n const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers\n const [isPresent, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n\n const exitStyle = presence?.exitVariant\n ? staticConfig.variantsParsed?.[presence.exitVariant]?.true || pseudos.exitStyle\n : pseudos.exitStyle\n\n const reanimatedOnDidAnimated = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\n )\n\n const isExiting = isPresent === false\n const isEntering = !state.mounted\n\n const all = getStyle({\n isExiting,\n isEntering,\n exitVariant: presence?.exitVariant,\n enterVariant: presence?.enterVariant,\n })\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 args = [\n JSON.stringify(all),\n state.mounted,\n state.hover,\n state.press,\n state.pressIn,\n state.focus,\n delay,\n isPresent,\n onDidAnimate,\n reanimatedOnDidAnimated,\n presence?.exitVariant,\n presence?.enterVariant,\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, current) => {\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 const style = animatedStyles\n\n const final = {\n transform: [] as any[],\n }\n\n const isExiting = isPresent === false\n\n const exitingStyleProps: Record<string, boolean> = {}\n if (exitStyle) {\n for (const key in exitStyle) {\n if (key === 'transform') {\n for (const attr of exitStyle[key]) {\n const tkey = Object.keys(attr)[0]\n exitingStyleProps[tkey] = true\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 } = getAnimation(\n key,\n animationConfig,\n props.animateOnly\n )\n\n const { delayMs = null } = animationDelay(key, animationConfig, delay)\n\n if (!animation) {\n console.warn('No animation for', key, 'in', style)\n continue\n }\n if (!config) {\n console.warn('No animation config for', key, 'in', style)\n continue\n }\n\n if (key === 'transform') {\n if (!Array.isArray(value)) {\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 }, args)\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n }, args)\n },\n }\n}\n\nfunction getAnimationConfig(key: string, animations: AnimationsConfig, animation?: AnimationProp) {\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'] = 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 console.warn('no type of animation?', animationType)\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": []
|
|
7
7
|
}
|
|
@@ -28,6 +28,10 @@ import Animated, {
|
|
|
28
28
|
withSpring,
|
|
29
29
|
withTiming
|
|
30
30
|
} from "react-native-reanimated";
|
|
31
|
+
const animatedStyleKey = {
|
|
32
|
+
transform: true,
|
|
33
|
+
opacity: true
|
|
34
|
+
};
|
|
31
35
|
function createAnimations(animations) {
|
|
32
36
|
const AnimatedView = Animated.View;
|
|
33
37
|
const AnimatedText = Animated.Text;
|
|
@@ -56,10 +60,6 @@ function createAnimations(animations) {
|
|
|
56
60
|
enterVariant: presence == null ? void 0 : presence.enterVariant
|
|
57
61
|
});
|
|
58
62
|
const [animatedStyles, nonAnimatedStyle] = [{}, {}];
|
|
59
|
-
const animatedStyleKey = {
|
|
60
|
-
transform: true,
|
|
61
|
-
opacity: true
|
|
62
|
-
};
|
|
63
63
|
for (const key of Object.keys(all)) {
|
|
64
64
|
if (animatedStyleKey[key]) {
|
|
65
65
|
animatedStyles[key] = all[key];
|
|
@@ -123,7 +123,7 @@ function createAnimations(animations) {
|
|
|
123
123
|
const value = style[key];
|
|
124
124
|
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
125
125
|
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(key, animationConfig, props.animateOnly);
|
|
126
|
-
|
|
126
|
+
const { delayMs = null } = animationDelay(key, animationConfig, delay);
|
|
127
127
|
if (!animation) {
|
|
128
128
|
console.warn("No animation for", key, "in", style);
|
|
129
129
|
continue;
|
|
@@ -247,7 +247,7 @@ function getAnimation(key, animationConfig, animateOnly) {
|
|
|
247
247
|
return {};
|
|
248
248
|
}
|
|
249
249
|
let repeatCount = 0;
|
|
250
|
-
|
|
250
|
+
const repeatReverse = animationConfig.repeatReverse || false;
|
|
251
251
|
let animationType = (animationConfig == null ? void 0 : animationConfig.type) || "spring";
|
|
252
252
|
if (isColor(key) || key === "opacity") {
|
|
253
253
|
animationType = "timing";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp } from '@tamagui/core'\nimport { useCallback, useContext, useMemo } from 'react'\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\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig =\n | ({ type: 'timing'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithTimingConfig)\n | ({ type: 'spring'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithSpringConfig)\n | ({ type: 'decay'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithDecayConfig)\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): 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 avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimations: (props, helpers) => {\n const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers\n const [isPresent, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n\n const exitStyle = presence?.exitVariant\n ? staticConfig.variantsParsed?.[presence.exitVariant]?.true || pseudos.exitStyle\n : pseudos.exitStyle\n\n const reanimatedOnDidAnimated = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\n )\n\n const isExiting = isPresent === false\n const isEntering = !state.mounted\n\n const all = getStyle({\n isExiting,\n isEntering,\n exitVariant: presence?.exitVariant,\n enterVariant: presence?.enterVariant,\n })\n\n const [animatedStyles, nonAnimatedStyle] = [{}, {}]\n const animatedStyleKey = {\n transform: true,\n opacity: true,\n }\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 args = [\n JSON.stringify(all),\n state.mounted,\n state.hover,\n state.press,\n state.pressIn,\n state.focus,\n delay,\n isPresent,\n onDidAnimate,\n reanimatedOnDidAnimated,\n presence?.exitVariant,\n presence?.enterVariant,\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, current) => {\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 const style = animatedStyles\n\n const final = {\n transform: [] as any[],\n }\n\n const isExiting = isPresent === false\n\n const exitingStyleProps: Record<string, boolean> = {}\n if (exitStyle) {\n for (const key in exitStyle) {\n if (key === 'transform') {\n for (const attr of exitStyle[key]) {\n const tkey = Object.keys(attr)[0]\n exitingStyleProps[tkey] = true\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 } = getAnimation(\n key,\n animationConfig,\n props.animateOnly\n )\n\n let { delayMs = null } = animationDelay(key, animationConfig, delay)\n\n if (!animation) {\n console.warn('No animation for', key, 'in', style)\n continue\n }\n if (!config) {\n console.warn('No animation config for', key, 'in', style)\n continue\n }\n\n if (key === 'transform') {\n if (!Array.isArray(value)) {\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 }, args)\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n }, args)\n },\n }\n}\n\nfunction getAnimationConfig(key: string, animations: AnimationsConfig, animation?: AnimationProp) {\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 let repeatReverse = animationConfig.repeatReverse || false\n let animationType: Required<TransitionConfig>['type'] = 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 console.warn('no type of animation?', animationType)\n animation = withSpring\n }\n\n return {\n animation,\n config,\n repeatReverse,\n repeatCount,\n shouldRepeat: !!repeatCount,\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp } from '@tamagui/core'\nimport { useCallback, useContext, useMemo } from 'react'\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\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig =\n | ({ type: 'timing'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithTimingConfig)\n | ({ type: 'spring'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithSpringConfig)\n | ({ type: 'decay'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithDecayConfig)\n\nconst animatedStyleKey = {\n transform: true,\n opacity: true,\n // backgroundColor: true,\n // color: true,\n}\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): 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 avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimations: (props, helpers) => {\n const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers\n const [isPresent, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n\n const exitStyle = presence?.exitVariant\n ? staticConfig.variantsParsed?.[presence.exitVariant]?.true || pseudos.exitStyle\n : pseudos.exitStyle\n\n const reanimatedOnDidAnimated = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\n )\n\n const isExiting = isPresent === false\n const isEntering = !state.mounted\n\n const all = getStyle({\n isExiting,\n isEntering,\n exitVariant: presence?.exitVariant,\n enterVariant: presence?.enterVariant,\n })\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 args = [\n JSON.stringify(all),\n state.mounted,\n state.hover,\n state.press,\n state.pressIn,\n state.focus,\n delay,\n isPresent,\n onDidAnimate,\n reanimatedOnDidAnimated,\n presence?.exitVariant,\n presence?.enterVariant,\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, current) => {\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 const style = animatedStyles\n\n const final = {\n transform: [] as any[],\n }\n\n const isExiting = isPresent === false\n\n const exitingStyleProps: Record<string, boolean> = {}\n if (exitStyle) {\n for (const key in exitStyle) {\n if (key === 'transform') {\n for (const attr of exitStyle[key]) {\n const tkey = Object.keys(attr)[0]\n exitingStyleProps[tkey] = true\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 } = getAnimation(\n key,\n animationConfig,\n props.animateOnly\n )\n\n const { delayMs = null } = animationDelay(key, animationConfig, delay)\n\n if (!animation) {\n console.warn('No animation for', key, 'in', style)\n continue\n }\n if (!config) {\n console.warn('No animation config for', key, 'in', style)\n continue\n }\n\n if (key === 'transform') {\n if (!Array.isArray(value)) {\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 }, args)\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n }, args)\n },\n }\n}\n\nfunction getAnimationConfig(key: string, animations: AnimationsConfig, animation?: AnimationProp) {\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'] = 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 console.warn('no type of animation?', animationType)\n animation = withSpring\n }\n\n return {\n animation,\n config,\n repeatReverse,\n repeatCount,\n shouldRepeat: !!repeatCount,\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA,MAAM,mBAAmB;AAAA,EACvB,WAAW;AAAA,EACX,SAAS;AAGX;AAEO,0BAAsD,YAAmC;AAC9F,QAAM,eAAe,SAAS;AAC9B,QAAM,eAAe,SAAS;AAE9B,eAAa,iBAAiB;AAC9B,eAAa,iBAAiB;AAE9B,SAAO;AAAA,IACL,cAAc;AAAA,IACd;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN,eAAe,CAAC,OAAO,YAAY;AA5CvC;AA6CM,YAAM,EAAE,SAAS,cAAc,OAAO,UAAU,OAAO,iBAAiB;AACxE,YAAM,CAAC,WAAW,oBAAoB,YAAY;AAClD,YAAM,WAAW,WAAW,eAAe;AAE3C,YAAM,YAAY,sCAAU,eACxB,0BAAa,mBAAb,mBAA8B,SAAS,iBAAvC,mBAAqD,SAAQ,QAAQ,YACrE,QAAQ;AAEZ,YAAM,0BAA0B,YAC9B,IAAI,UAAS;AACX,qDAAe,GAAG;AAAA,MACpB,GACA,CAAC,YAAY,CACf;AAEA,YAAM,YAAY,cAAc;AAChC,YAAM,aAAa,CAAC,MAAM;AAE1B,YAAM,MAAM,SAAS;AAAA,QACnB;AAAA,QACA;AAAA,QACA,aAAa,qCAAU;AAAA,QACvB,cAAc,qCAAU;AAAA,MAC1B,CAAC;AAED,YAAM,CAAC,gBAAgB,oBAAoB,CAAC,CAAC,GAAG,CAAC,CAAC;AAClD,iBAAW,OAAO,OAAO,KAAK,GAAG,GAAG;AAClC,YAAI,iBAAiB,MAAM;AACzB,yBAAe,OAAO,IAAI;AAAA,QAC5B,OAAO;AACL,2BAAiB,OAAO,IAAI;AAAA,QAC9B;AAAA,MACF;AAEA,YAAM,OAAO;AAAA,QACX,KAAK,UAAU,GAAG;AAAA,QAClB,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,qCAAU;AAAA,QACV,qCAAU;AAAA,MACZ;AAEA,YAAM,WAAW,CACf,YACA,mBACA,KACA,UACG;AACH;AACA,eAAO,CAAC,WAAW,YAAY;AAC7B;AACA,kBAAQ,uBAAuB,EAAE,KAAK,WAAW,SAAS;AAAA,YACxD,gBAAgB;AAAA,UAClB,CAAC;AACD,cAAI,YAAW;AACb,8BAAkB,OAAO;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;AACA,cAAM,QAAQ;AAEd,cAAM,QAAQ;AAAA,UACZ,WAAW,CAAC;AAAA,QACd;AAEA,cAAM,aAAY,cAAc;AAEhC,cAAM,oBAA6C,CAAC;AACpD,YAAI,WAAW;AACb,qBAAW,OAAO,WAAW;AAC3B,gBAAI,QAAQ,aAAa;AACvB,yBAAW,QAAQ,UAAU,MAAM;AACjC,sBAAM,OAAO,OAAO,KAAK,IAAI,EAAE;AAC/B,kCAAkB,QAAQ;AAAA,cAC5B;AAAA,YACF,OAAO;AACL,gCAAkB,OAAO;AAAA,YAC3B;AAAA,UACF;AAAA,QACF;AAEA,mBAAW,OAAO,OAAO;AACvB,gBAAM,QAAQ,MAAM;AACpB,gBAAM,kBAAkB,mBAAmB,KAAK,YAAY,MAAM,SAAS;AAC3E,gBAAM,EAAE,WAAW,QAAQ,cAAc,aAAa,kBAAkB,aACtE,KACA,iBACA,MAAM,WACR;AAEA,gBAAM,EAAE,UAAU,SAAS,eAAe,KAAK,iBAAiB,KAAK;AAErE,cAAI,CAAC,WAAW;AACd,oBAAQ,KAAK,oBAAoB,KAAK,MAAM,KAAK;AACjD;AAAA,UACF;AACA,cAAI,CAAC,QAAQ;AACX,oBAAQ,KAAK,2BAA2B,KAAK,MAAM,KAAK;AACxD;AAAA,UACF;AAEA,cAAI,QAAQ,aAAa;AACvB,gBAAI,CAAC,MAAM,QAAQ,KAAK,GAAG;AACzB,sBAAQ,MAAM,gDAAgD;AAC9D;AAAA,YACF;AAEA,uBAAW,mBAAmB,OAAO;AACnC,oBAAM,OAAM,OAAO,KAAK,eAAe,EAAE;AACzC,oBAAM,iBAAiB,gBAAgB;AACvC,kBAAI,cAAa,UACf,gBACA,QACA,SAAS,YAAW,mBAAmB,MAAK,KAAK,CACnD;AACA,kBAAI,cAAc;AAChB,8BAAa,WAAW,aAAY,aAAa,aAAa;AAAA,cAChE;AACA,oBAAM,aAAa,KAAK;AAAA,gBACtB,CAAC,OAAM;AAAA,cACT,CAAC;AAAA,YACH;AACA;AAAA,UACF;AAEA,cAAI,OAAO,UAAU,UAAU;AAE7B,kBAAM,OAAO,CAAC;AACd,uBAAW,iBAAiB,OAAO,KAAK,SAAS,CAAC,CAAC,GAAG;AACpD,kBAAI,cAAa,UACf,OACA,QACA,SAAS,YAAW,mBAAmB,KAAK,KAAK,CACnD;AACA,kBAAI,cAAc;AAChB,8BAAa,WAAW,aAAY,aAAa,aAAa;AAAA,cAChE;AACA,kBAAI,WAAW,MAAM;AACnB,sBAAM,KAAK,iBAAiB,UAAU,SAAS,WAAU;AAAA,cAC3D,OAAO;AACL,sBAAM,KAAK,iBAAiB;AAAA,cAC9B;AAAA,YACF;AACA;AAAA,UACF;AAEA,cAAI,aAAa,UACf,OACA,QACA,SAAS,YAAW,mBAAmB,KAAK,KAAK,CACnD;AACA,cAAI,cAAc;AAChB,yBAAa,WAAW,YAAY,aAAa,aAAa;AAAA,UAChE;AACA,cAAI,WAAW,QAAQ,OAAO,YAAY,UAAU;AAClD,kBAAM,OAAO,UAAU,SAAS,UAAU;AAAA,UAC5C,OAAO;AACL,kBAAM,OAAO;AAAA,UACf;AAAA,QAGF;AAEA,eAAO;AAAA,MACT,GAAG,IAAI;AAEP,aAAO,QAAQ,MAAM;AACnB,eAAO;AAAA,UACL,OAAO,CAAC,kBAAkB,aAAa;AAAA,QACzC;AAAA,MACF,GAAG,IAAI;AAAA,IACT;AAAA,EACF;AACF;AAEA,4BAA4B,KAAa,YAA8B,WAA2B;AAChG;AACA,MAAI,OAAO,cAAc,UAAU;AACjC,WAAO,WAAW;AAAA,EACpB;AACA,MAAI,OAAO;AACX,MAAI;AACJ,MAAI,MAAM,QAAQ,SAAS,GAAG;AAC5B,WAAO,UAAU;AACjB,UAAM,OAAO,UAAU,MAAM,UAAU,GAAG;AAC1C,QAAI,MAAM;AACR,UAAI,OAAO,SAAS,UAAU;AAC5B,eAAO;AAAA,MACT,OAAO;AACL,eAAQ,KAAa,QAAQ;AAC7B,oBAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF,OAAO;AACL,UAAM,MAAM,uCAAY;AACxB,WAAO,2BAAK;AACZ,gBAAY;AAAA,EACd;AACA,QAAM,QAAQ,WAAW;AACzB,MAAI,CAAC,OAAO;AACV,UAAM,IAAI,MAAM,yBAAyB,kBAAkB,MAAM;AAAA,EACnE;AACA,SAAO,gDACF,QACA,YAFE;AAAA,IAGL,MAAM,MAAM;AAAA,EACd;AACF;AAEA,wBACE,KACA,WACA,cACA;AACA;AACA,MACE,CAAC,aACD,CAAC,UAAU,QACX,UAAU,KAAK,YAAY,UAC3B,UAAU,KAAK,YAAY,MAC3B;AACA,WAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,EACF;AACA,SAAO;AAAA,IACL,SAAS,UAAU,KAAK;AAAA,EAC1B;AACF;AA2CA,MAAM,UAAU,CAAC,aAAqB;AACpC;AACA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAE,SAAS,QAAQ;AACrB;AAEA,sBACE,KACA,iBACA,aACA;AACA;AACA,MAAI,CAAC,mBAAoB,eAAe,CAAC,YAAY,SAAS,GAAG,GAAI;AACnE,WAAO,CAAC;AAAA,EACV;AAEA,MAAI,cAAc;AAClB,QAAM,gBAAgB,gBAAgB,iBAAiB;AACvD,MAAI,gBAAoD,oDAAiB,SAAQ;AAEjF,MAAI,QAAQ,GAAG,KAAK,QAAQ,WAAW;AACrC,oBAAgB;AAAA,EAClB;AAEA,MAAI,YAAY,iBAAiB;AAC/B,kBAAc,gBAAgB,UAAU;AAAA,EAC1C,OAAO;AACL,QAAI,gBAAgB,MAAM;AACxB,oBAAc,gBAAgB,OAAO,KAAK;AAAA,IAC5C;AAAA,EACF;AAEA,MAAI,SAAS;AACb,MAAI;AAEJ,MAAI,kBAAkB,UAAU;AAC9B,gBAAY;AAAA,EACd,WAAW,kBAAkB,UAAU;AACrC,gBAAY;AAAA,EACd,WAAW,kBAAkB,SAAS;AACpC,gBAAY;AACZ,aAAS,UAAU;AAAA,MACjB,UAAU;AAAA,MACV,cAAc;AAAA,IAChB;AAAA,EACF,OAAO;AACL,YAAQ,KAAK,yBAAyB,aAAa;AACnD,gBAAY;AAAA,EACd;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc,CAAC,CAAC;AAAA,EAClB;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -9,6 +9,10 @@ import Animated, {
|
|
|
9
9
|
withSpring,
|
|
10
10
|
withTiming
|
|
11
11
|
} from "react-native-reanimated";
|
|
12
|
+
const animatedStyleKey = {
|
|
13
|
+
transform: true,
|
|
14
|
+
opacity: true
|
|
15
|
+
};
|
|
12
16
|
function createAnimations(animations) {
|
|
13
17
|
const AnimatedView = Animated.View;
|
|
14
18
|
const AnimatedText = Animated.Text;
|
|
@@ -37,10 +41,6 @@ function createAnimations(animations) {
|
|
|
37
41
|
enterVariant: presence == null ? void 0 : presence.enterVariant
|
|
38
42
|
});
|
|
39
43
|
const [animatedStyles, nonAnimatedStyle] = [{}, {}];
|
|
40
|
-
const animatedStyleKey = {
|
|
41
|
-
transform: true,
|
|
42
|
-
opacity: true
|
|
43
|
-
};
|
|
44
44
|
for (const key of Object.keys(all)) {
|
|
45
45
|
if (animatedStyleKey[key]) {
|
|
46
46
|
animatedStyles[key] = all[key];
|
|
@@ -104,7 +104,7 @@ function createAnimations(animations) {
|
|
|
104
104
|
const value = style[key];
|
|
105
105
|
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
106
106
|
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(key, animationConfig, props.animateOnly);
|
|
107
|
-
|
|
107
|
+
const { delayMs = null } = animationDelay(key, animationConfig, delay);
|
|
108
108
|
if (!animation) {
|
|
109
109
|
console.warn("No animation for", key, "in", style);
|
|
110
110
|
continue;
|
|
@@ -230,7 +230,7 @@ function getAnimation(key, animationConfig, animateOnly) {
|
|
|
230
230
|
return {};
|
|
231
231
|
}
|
|
232
232
|
let repeatCount = 0;
|
|
233
|
-
|
|
233
|
+
const repeatReverse = animationConfig.repeatReverse || false;
|
|
234
234
|
let animationType = (animationConfig == null ? void 0 : animationConfig.type) || "spring";
|
|
235
235
|
if (isColor(key) || key === "opacity") {
|
|
236
236
|
animationType = "timing";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp } from '@tamagui/core'\nimport { useCallback, useContext, useMemo } from 'react'\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\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig =\n | ({ type: 'timing'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithTimingConfig)\n | ({ type: 'spring'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithSpringConfig)\n | ({ type: 'decay'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithDecayConfig)\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): 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 avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimations: (props, helpers) => {\n const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers\n const [isPresent, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n\n const exitStyle = presence?.exitVariant\n ? staticConfig.variantsParsed?.[presence.exitVariant]?.true || pseudos.exitStyle\n : pseudos.exitStyle\n\n const reanimatedOnDidAnimated = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\n )\n\n const isExiting = isPresent === false\n const isEntering = !state.mounted\n\n const all = getStyle({\n isExiting,\n isEntering,\n exitVariant: presence?.exitVariant,\n enterVariant: presence?.enterVariant,\n })\n\n const [animatedStyles, nonAnimatedStyle] = [{}, {}]\n const animatedStyleKey = {\n transform: true,\n opacity: true,\n }\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 args = [\n JSON.stringify(all),\n state.mounted,\n state.hover,\n state.press,\n state.pressIn,\n state.focus,\n delay,\n isPresent,\n onDidAnimate,\n reanimatedOnDidAnimated,\n presence?.exitVariant,\n presence?.enterVariant,\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, current) => {\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 const style = animatedStyles\n\n const final = {\n transform: [] as any[],\n }\n\n const isExiting = isPresent === false\n\n const exitingStyleProps: Record<string, boolean> = {}\n if (exitStyle) {\n for (const key in exitStyle) {\n if (key === 'transform') {\n for (const attr of exitStyle[key]) {\n const tkey = Object.keys(attr)[0]\n exitingStyleProps[tkey] = true\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 } = getAnimation(\n key,\n animationConfig,\n props.animateOnly\n )\n\n let { delayMs = null } = animationDelay(key, animationConfig, delay)\n\n if (!animation) {\n console.warn('No animation for', key, 'in', style)\n continue\n }\n if (!config) {\n console.warn('No animation config for', key, 'in', style)\n continue\n }\n\n if (key === 'transform') {\n if (!Array.isArray(value)) {\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 }, args)\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n }, args)\n },\n }\n}\n\nfunction getAnimationConfig(key: string, animations: AnimationsConfig, animation?: AnimationProp) {\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 let repeatReverse = animationConfig.repeatReverse || false\n let animationType: Required<TransitionConfig>['type'] = 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 console.warn('no type of animation?', animationType)\n animation = withSpring\n }\n\n return {\n animation,\n config,\n repeatReverse,\n repeatCount,\n shouldRepeat: !!repeatCount,\n }\n}\n"],
|
|
5
|
-
"mappings": "AAAA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp } from '@tamagui/core'\nimport { useCallback, useContext, useMemo } from 'react'\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\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig =\n | ({ type: 'timing'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithTimingConfig)\n | ({ type: 'spring'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithSpringConfig)\n | ({ type: 'decay'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithDecayConfig)\n\nconst animatedStyleKey = {\n transform: true,\n opacity: true,\n // backgroundColor: true,\n // color: true,\n}\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): 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 avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimations: (props, helpers) => {\n const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers\n const [isPresent, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n\n const exitStyle = presence?.exitVariant\n ? staticConfig.variantsParsed?.[presence.exitVariant]?.true || pseudos.exitStyle\n : pseudos.exitStyle\n\n const reanimatedOnDidAnimated = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\n )\n\n const isExiting = isPresent === false\n const isEntering = !state.mounted\n\n const all = getStyle({\n isExiting,\n isEntering,\n exitVariant: presence?.exitVariant,\n enterVariant: presence?.enterVariant,\n })\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 args = [\n JSON.stringify(all),\n state.mounted,\n state.hover,\n state.press,\n state.pressIn,\n state.focus,\n delay,\n isPresent,\n onDidAnimate,\n reanimatedOnDidAnimated,\n presence?.exitVariant,\n presence?.enterVariant,\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, current) => {\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 const style = animatedStyles\n\n const final = {\n transform: [] as any[],\n }\n\n const isExiting = isPresent === false\n\n const exitingStyleProps: Record<string, boolean> = {}\n if (exitStyle) {\n for (const key in exitStyle) {\n if (key === 'transform') {\n for (const attr of exitStyle[key]) {\n const tkey = Object.keys(attr)[0]\n exitingStyleProps[tkey] = true\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 } = getAnimation(\n key,\n animationConfig,\n props.animateOnly\n )\n\n const { delayMs = null } = animationDelay(key, animationConfig, delay)\n\n if (!animation) {\n console.warn('No animation for', key, 'in', style)\n continue\n }\n if (!config) {\n console.warn('No animation config for', key, 'in', style)\n continue\n }\n\n if (key === 'transform') {\n if (!Array.isArray(value)) {\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 }, args)\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n }, args)\n },\n }\n}\n\nfunction getAnimationConfig(key: string, animations: AnimationsConfig, animation?: AnimationProp) {\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'] = 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 console.warn('no type of animation?', animationType)\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": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/animations-reanimated",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.103",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"sideEffects": true,
|
|
6
6
|
"license": "MIT",
|
|
@@ -14,12 +14,12 @@
|
|
|
14
14
|
"dist"
|
|
15
15
|
],
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@tamagui/animate-presence": "^1.0.1-beta.
|
|
18
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
17
|
+
"@tamagui/animate-presence": "^1.0.1-beta.103",
|
|
18
|
+
"@tamagui/core": "^1.0.1-beta.103",
|
|
19
19
|
"react-native-reanimated": "^2.8.0"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
22
|
+
"@tamagui/build": "^1.0.1-beta.103"
|
|
23
23
|
},
|
|
24
24
|
"scripts": {
|
|
25
25
|
"build": "tamagui-build",
|
package/src/createAnimations.tsx
CHANGED
|
@@ -23,6 +23,13 @@ type AnimationConfig =
|
|
|
23
23
|
| ({ type: 'spring'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithSpringConfig)
|
|
24
24
|
| ({ type: 'decay'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithDecayConfig)
|
|
25
25
|
|
|
26
|
+
const animatedStyleKey = {
|
|
27
|
+
transform: true,
|
|
28
|
+
opacity: true,
|
|
29
|
+
// backgroundColor: true,
|
|
30
|
+
// color: true,
|
|
31
|
+
}
|
|
32
|
+
|
|
26
33
|
export function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {
|
|
27
34
|
const AnimatedView = Animated.View
|
|
28
35
|
const AnimatedText = Animated.Text
|
|
@@ -62,10 +69,6 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
62
69
|
})
|
|
63
70
|
|
|
64
71
|
const [animatedStyles, nonAnimatedStyle] = [{}, {}]
|
|
65
|
-
const animatedStyleKey = {
|
|
66
|
-
transform: true,
|
|
67
|
-
opacity: true,
|
|
68
|
-
}
|
|
69
72
|
for (const key of Object.keys(all)) {
|
|
70
73
|
if (animatedStyleKey[key]) {
|
|
71
74
|
animatedStyles[key] = all[key]
|
|
@@ -147,7 +150,7 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
147
150
|
props.animateOnly
|
|
148
151
|
)
|
|
149
152
|
|
|
150
|
-
|
|
153
|
+
const { delayMs = null } = animationDelay(key, animationConfig, delay)
|
|
151
154
|
|
|
152
155
|
if (!animation) {
|
|
153
156
|
console.warn('No animation for', key, 'in', style)
|
|
@@ -354,7 +357,7 @@ function getAnimation(
|
|
|
354
357
|
}
|
|
355
358
|
|
|
356
359
|
let repeatCount = 0
|
|
357
|
-
|
|
360
|
+
const repeatReverse = animationConfig.repeatReverse || false
|
|
358
361
|
let animationType: Required<TransitionConfig>['type'] = animationConfig?.type || 'spring'
|
|
359
362
|
|
|
360
363
|
if (isColor(key) || key === 'opacity') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAiB,MAAM,eAAe,CAAA;AAE9D,OAAiB,EACf,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAQjB,MAAM,yBAAyB,CAAA;AAEhC,aAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,IAAI;KAC7C,GAAG,IAAI,MAAM,CAAC,GAAG,eAAe;CAClC,CAAA;AAED,aAAK,eAAe,GAChB,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,gBAAgB,CAAC,GAChG,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,gBAAgB,CAAC,GAChG,CAAC;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,eAAe,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAiB,MAAM,eAAe,CAAA;AAE9D,OAAiB,EACf,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAQjB,MAAM,yBAAyB,CAAA;AAEhC,aAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,IAAI;KAC7C,GAAG,IAAI,MAAM,CAAC,GAAG,eAAe;CAClC,CAAA;AAED,aAAK,eAAe,GAChB,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,gBAAgB,CAAC,GAChG,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,gBAAgB,CAAC,GAChG,CAAC;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,eAAe,CAAC,CAAA;AASlG,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,gBAAgB,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CA2M9F"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=polyfill.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"polyfill.d.ts","sourceRoot":"","sources":["../src/polyfill.ts"],"names":[],"mappings":""}
|