@tamagui/animations-reanimated 1.0.0-beta.202 → 1.0.0-beta.205
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.
|
@@ -2,22 +2,8 @@ var __create = Object.create;
|
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
5
|
var __getProtoOf = Object.getPrototypeOf;
|
|
7
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
-
var __spreadValues = (a, b) => {
|
|
11
|
-
for (var prop in b || (b = {}))
|
|
12
|
-
if (__hasOwnProp.call(b, prop))
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
if (__getOwnPropSymbols)
|
|
15
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
-
if (__propIsEnum.call(b, prop))
|
|
17
|
-
__defNormalProp(a, prop, b[prop]);
|
|
18
|
-
}
|
|
19
|
-
return a;
|
|
20
|
-
};
|
|
21
7
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
22
8
|
var __export = (target, all) => {
|
|
23
9
|
for (var name in all)
|
|
@@ -51,58 +37,74 @@ function createAnimations(animations) {
|
|
|
51
37
|
animations,
|
|
52
38
|
View: AnimatedView,
|
|
53
39
|
Text: AnimatedText,
|
|
54
|
-
useAnimations: (props,
|
|
55
|
-
|
|
56
|
-
const
|
|
40
|
+
useAnimations: (props, helpers) => {
|
|
41
|
+
var _a, _b;
|
|
42
|
+
const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
|
|
43
|
+
const [isEntering, safeToUnmount] = (0, import_animate_presence.useEntering)();
|
|
57
44
|
const presence = (0, import_react.useContext)(import_animate_presence.AnimatePresenceContext);
|
|
58
|
-
const
|
|
59
|
-
const
|
|
60
|
-
|
|
61
|
-
"worklet";
|
|
62
|
-
return presence == null ? void 0 : presence.custom;
|
|
63
|
-
}, [presence]);
|
|
64
|
-
const reanimatedOnDidAnimated = (0, import_react.useCallback)((...args) => {
|
|
65
|
-
onDidAnimate == null ? void 0 : onDidAnimate(...args);
|
|
45
|
+
const exitStyle = (presence == null ? void 0 : presence.exitVariant) ? ((_b = (_a = staticConfig.variantsParsed) == null ? void 0 : _a[presence.exitVariant]) == null ? void 0 : _b.true) || pseudos.exitStyle : pseudos.exitStyle;
|
|
46
|
+
const reanimatedOnDidAnimated = (0, import_react.useCallback)((...args2) => {
|
|
47
|
+
onDidAnimate == null ? void 0 : onDidAnimate(...args2);
|
|
66
48
|
}, [onDidAnimate]);
|
|
67
|
-
const
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
},
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
49
|
+
const all = getStyle({
|
|
50
|
+
isEntering,
|
|
51
|
+
exitVariant: presence == null ? void 0 : presence.exitVariant,
|
|
52
|
+
enterVariant: presence == null ? void 0 : presence.enterVariant
|
|
53
|
+
});
|
|
54
|
+
const [animatedStyles, nonAnimatedStyle] = [{}, {}];
|
|
55
|
+
const animatedStyleKey = {
|
|
56
|
+
transform: true,
|
|
57
|
+
opacity: true
|
|
58
|
+
};
|
|
59
|
+
for (const key of Object.keys(all)) {
|
|
60
|
+
if (animatedStyleKey[key]) {
|
|
61
|
+
animatedStyles[key] = all[key];
|
|
62
|
+
} else {
|
|
63
|
+
nonAnimatedStyle[key] = all[key];
|
|
76
64
|
}
|
|
77
|
-
}
|
|
65
|
+
}
|
|
66
|
+
const args = [
|
|
67
|
+
JSON.stringify(animatedStyles),
|
|
68
|
+
state.mounted,
|
|
69
|
+
state.hover,
|
|
70
|
+
state.press,
|
|
71
|
+
state.pressIn,
|
|
72
|
+
state.focus,
|
|
73
|
+
delay,
|
|
74
|
+
isEntering,
|
|
75
|
+
onDidAnimate,
|
|
76
|
+
reanimatedOnDidAnimated,
|
|
77
|
+
presence == null ? void 0 : presence.exitVariant,
|
|
78
|
+
presence == null ? void 0 : presence.enterVariant
|
|
79
|
+
];
|
|
78
80
|
const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
|
|
79
|
-
|
|
81
|
+
const style = animatedStyles;
|
|
80
82
|
const final = {
|
|
81
83
|
transform: []
|
|
82
84
|
};
|
|
83
|
-
const isExiting =
|
|
85
|
+
const isExiting = isEntering === false;
|
|
84
86
|
const transition = animations[props.animation];
|
|
85
|
-
const mergedStyles = __spreadValues(__spreadValues({}, style), isExiting && exitStyle);
|
|
86
87
|
const exitingStyleProps = {};
|
|
87
88
|
if (exitStyle) {
|
|
88
89
|
for (const key of Object.keys(exitStyle)) {
|
|
89
90
|
exitingStyleProps[key] = true;
|
|
90
91
|
}
|
|
91
92
|
}
|
|
92
|
-
for (const key in
|
|
93
|
-
const value =
|
|
94
|
-
const
|
|
93
|
+
for (const key in style) {
|
|
94
|
+
const value = style[key];
|
|
95
|
+
const aconf = animationConfig(key, transition);
|
|
96
|
+
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = aconf;
|
|
95
97
|
const callback = /* @__PURE__ */ __name((completed, recentValue) => {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
});
|
|
100
|
-
}
|
|
98
|
+
(0, import_react_native_reanimated.runOnJS)(reanimatedOnDidAnimated)(key, completed, recentValue, {
|
|
99
|
+
attemptedValue: value
|
|
100
|
+
});
|
|
101
101
|
if (isExiting) {
|
|
102
102
|
exitingStyleProps[key] = false;
|
|
103
103
|
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean);
|
|
104
104
|
if (!areStylesExiting) {
|
|
105
|
-
|
|
105
|
+
if (safeToUnmount) {
|
|
106
|
+
(0, import_react_native_reanimated.runOnJS)(safeToUnmount)();
|
|
107
|
+
}
|
|
106
108
|
}
|
|
107
109
|
}
|
|
108
110
|
}, "callback");
|
|
@@ -115,22 +117,13 @@ function createAnimations(animations) {
|
|
|
115
117
|
for (const transformObject of value) {
|
|
116
118
|
const key2 = Object.keys(transformObject)[0];
|
|
117
119
|
const transformValue = transformObject[key2];
|
|
118
|
-
const transform = {};
|
|
119
|
-
if (((_a = transition == null ? void 0 : transition[key2]) == null ? void 0 : _a.delay) != null) {
|
|
120
|
-
delayMs = ((_b = transition == null ? void 0 : transition[key2]) == null ? void 0 : _b.delay) ?? null;
|
|
121
|
-
}
|
|
122
120
|
let finalValue2 = animation(transformValue, config, callback);
|
|
123
121
|
if (shouldRepeat) {
|
|
124
122
|
finalValue2 = (0, import_react_native_reanimated.withRepeat)(finalValue2, repeatCount, repeatReverse);
|
|
125
123
|
}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
}
|
|
129
|
-
transform[key2] = finalValue2;
|
|
130
|
-
}
|
|
131
|
-
if (Object.keys(transform).length) {
|
|
132
|
-
final["transform"].push(transform);
|
|
133
|
-
}
|
|
124
|
+
final["transform"].push({
|
|
125
|
+
[key2]: finalValue2
|
|
126
|
+
});
|
|
134
127
|
}
|
|
135
128
|
continue;
|
|
136
129
|
}
|
|
@@ -159,36 +152,29 @@ function createAnimations(animations) {
|
|
|
159
152
|
final[key] = finalValue;
|
|
160
153
|
}
|
|
161
154
|
}
|
|
155
|
+
if (process.env.NODE_ENV === "development" && props["debug"]) {
|
|
156
|
+
console.log("animation style", final);
|
|
157
|
+
}
|
|
162
158
|
return final;
|
|
163
|
-
},
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
isPresent,
|
|
170
|
-
onDidAnimate,
|
|
171
|
-
reanimatedOnDidAnimated,
|
|
172
|
-
reanimatedSafeToUnmount
|
|
173
|
-
]);
|
|
174
|
-
return {
|
|
175
|
-
style: animatedStyle
|
|
176
|
-
};
|
|
159
|
+
}, args);
|
|
160
|
+
return (0, import_react.useMemo)(() => {
|
|
161
|
+
return {
|
|
162
|
+
style: [nonAnimatedStyle, animatedStyle]
|
|
163
|
+
};
|
|
164
|
+
}, args);
|
|
177
165
|
}
|
|
178
166
|
};
|
|
179
167
|
}
|
|
180
168
|
__name(createAnimations, "createAnimations");
|
|
181
169
|
function animationDelay(key, transition, defaultDelay) {
|
|
182
|
-
var _a, _b;
|
|
183
170
|
"worklet";
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
delayMs = transition.delay;
|
|
171
|
+
if (!transition || !transition[key] || transition[key].delayMs === void 0 || transition[key].delayMs === null) {
|
|
172
|
+
return {
|
|
173
|
+
delayMs: null
|
|
174
|
+
};
|
|
189
175
|
}
|
|
190
176
|
return {
|
|
191
|
-
delayMs
|
|
177
|
+
delayMs: transition[key].delayMs
|
|
192
178
|
};
|
|
193
179
|
}
|
|
194
180
|
__name(animationDelay, "animationDelay");
|
|
@@ -207,7 +193,7 @@ const isColor = /* @__PURE__ */ __name((styleKey) => {
|
|
|
207
193
|
].includes(styleKey);
|
|
208
194
|
}, "isColor");
|
|
209
195
|
function animationConfig(styleProp, transition) {
|
|
210
|
-
var _a, _b, _c, _d, _e
|
|
196
|
+
var _a, _b, _c, _d, _e;
|
|
211
197
|
"worklet";
|
|
212
198
|
const key = styleProp;
|
|
213
199
|
let repeatCount = 0;
|
|
@@ -216,30 +202,23 @@ function animationConfig(styleProp, transition) {
|
|
|
216
202
|
if (isColor(key) || key === "opacity") {
|
|
217
203
|
animationType = "timing";
|
|
218
204
|
}
|
|
205
|
+
if (!transition) {
|
|
206
|
+
return {};
|
|
207
|
+
}
|
|
219
208
|
if ((_a = transition[key]) == null ? void 0 : _a.type) {
|
|
220
209
|
animationType = (_b = transition[key]) == null ? void 0 : _b.type;
|
|
221
|
-
} else if (transition
|
|
210
|
+
} else if (transition.type) {
|
|
222
211
|
animationType = transition.type;
|
|
223
212
|
}
|
|
224
|
-
const loop = ((_c = transition[key]) == null ? void 0 : _c.loop)
|
|
213
|
+
const loop = ((_c = transition[key]) == null ? void 0 : _c.loop) || transition.loop || null;
|
|
225
214
|
if (loop != null) {
|
|
226
215
|
repeatCount = loop ? -1 : 0;
|
|
227
216
|
}
|
|
228
|
-
if (((_d = transition[key]) == null ? void 0 : _d.repeat) != null) {
|
|
229
|
-
repeatCount = (_e = transition[key]) == null ? void 0 : _e.repeat;
|
|
230
|
-
} else if ((transition == null ? void 0 : transition.repeat) != null) {
|
|
231
|
-
repeatCount = transition.repeat;
|
|
232
|
-
}
|
|
233
|
-
if (((_f = transition[key]) == null ? void 0 : _f.repeatReverse) != null) {
|
|
234
|
-
repeatReverse = (_g = transition[key]) == null ? void 0 : _g.repeatReverse;
|
|
235
|
-
} else if ((transition == null ? void 0 : transition.repeatReverse) != null) {
|
|
236
|
-
repeatReverse = transition.repeatReverse;
|
|
237
|
-
}
|
|
238
217
|
let config = {};
|
|
239
|
-
let animation
|
|
218
|
+
let animation;
|
|
240
219
|
if (animationType === "timing") {
|
|
241
|
-
const duration = ((
|
|
242
|
-
const easing = ((
|
|
220
|
+
const duration = ((_d = transition[key]) == null ? void 0 : _d.duration) ?? (transition == null ? void 0 : transition.duration);
|
|
221
|
+
const easing = ((_e = transition[key]) == null ? void 0 : _e.easing) ?? (transition == null ? void 0 : transition.easing);
|
|
243
222
|
if (easing) {
|
|
244
223
|
config["easing"] = easing;
|
|
245
224
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { AnimatePresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, UseAnimationProps, UseAnimationState } from '@tamagui/core'\nimport { createContext, useCallback, useContext, useEffect } from 'react'\nimport {\n PerpectiveTransform,\n RotateTransform,\n RotateXTransform,\n RotateYTransform,\n RotateZTransform,\n ScaleTransform,\n ScaleXTransform,\n ScaleYTransform,\n SkewXTransform,\n SkewYTransform,\n TranslateXTransform,\n TranslateYTransform,\n} from 'react-native'\nimport Animated, {\n WithDecayConfig,\n WithSpringConfig,\n WithTimingConfig,\n runOnJS,\n useAnimatedStyle,\n useSharedValue,\n withDecay,\n withDelay,\n withRepeat,\n withSpring,\n withTiming,\n} from 'react-native-reanimated'\n\nconst AnimatedView = Animated.View\nconst AnimatedText = Animated.Text\n\nAnimatedView['displayName'] = 'AnimatedView'\nAnimatedText['displayName'] = 'AnimatedText'\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n return {\n avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimations: (props: UseAnimationProps, state: UseAnimationState) => {\n const { style, exitStyle, onDidAnimate, delay } = state\n const [isPresent, safeToUnmount] = usePresence()\n const presence = useContext(AnimatePresenceContext)\n const isMounted = useSharedValue(false)\n const hasExitStyle = !!exitStyle\n const custom = useCallback(() => {\n 'worklet'\n return presence?.custom\n }, [presence])\n\n const reanimatedOnDidAnimated = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\n )\n const reanimatedSafeToUnmount = useCallback(() => {\n safeToUnmount?.()\n }, [safeToUnmount])\n\n useEffect(() => {\n isMounted.value = true\n }, [isMounted])\n\n useEffect(\n function allowUnMountIfMissingExit() {\n if (!isPresent && !hasExitStyle) {\n reanimatedSafeToUnmount()\n }\n },\n [hasExitStyle, isPresent, reanimatedSafeToUnmount]\n )\n\n const animatedStyle = useAnimatedStyle(() => {\n const final = {\n transform: [] as any[],\n }\n\n const isExiting = !isPresent && !!exitStyle\n const transition = animations[props.animation]\n\n const mergedStyles = {\n ...style,\n ...(isExiting && exitStyle),\n }\n\n const exitingStyleProps: Record<string, boolean> = {}\n if (exitStyle) {\n for (const key of Object.keys(exitStyle)) {\n exitingStyleProps[key] = true\n }\n }\n\n for (const key in mergedStyles) {\n const value = mergedStyles[key]\n const { animation, config, shouldRepeat, repeatCount, repeatReverse } = animationConfig(\n key,\n transition\n )\n\n const callback: (completed: boolean, value?: any) => void = (completed, recentValue) => {\n if (onDidAnimate) {\n runOnJS(reanimatedOnDidAnimated)(key as any, completed, recentValue, {\n attemptedValue: value,\n })\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 runOnJS(reanimatedSafeToUnmount)()\n }\n }\n }\n\n let { delayMs = null } = animationDelay(key, transition, delay)\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 const transform = {} as any\n if (transition?.[key]?.delay != null) {\n delayMs = transition?.[key]?.delay ?? null\n }\n let finalValue = animation(transformValue, config, callback)\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n if (delayMs != null) {\n transform[key] = withDelay(delayMs, finalValue)\n } else {\n transform[key] = finalValue\n }\n if (Object.keys(transform).length) {\n final['transform'].push(transform)\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(value, config, callback)\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(value, config, callback)\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 }, [\n style,\n custom,\n delay,\n // disableInitialAnimation,\n // exitProp,\n // exitTransitionProp,\n // fromProp,\n hasExitStyle,\n isMounted,\n isPresent,\n onDidAnimate,\n reanimatedOnDidAnimated,\n reanimatedSafeToUnmount,\n // state,\n // stylePriority,\n // transitionProp,\n ])\n\n return {\n style: animatedStyle,\n }\n },\n }\n}\n\nfunction animationDelay<Animate>(\n key: string,\n transition: MotiTransition<Animate> | undefined,\n defaultDelay?: number\n) {\n 'worklet'\n let delayMs: TransitionConfig['delay'] = defaultDelay\n\n if (transition[key as keyof Animate]?.delay != null) {\n delayMs = transition[key as keyof Animate]?.delay\n } else if (transition?.delay != null) {\n delayMs = transition.delay\n }\n\n return {\n delayMs,\n }\n}\n\ntype MotiTransition<A> = any\ntype Transforms = PerpectiveTransform &\n RotateTransform &\n RotateXTransform &\n RotateYTransform &\n RotateZTransform &\n ScaleTransform &\n ScaleXTransform &\n ScaleYTransform &\n TranslateXTransform &\n TranslateYTransform &\n SkewXTransform &\n SkewYTransform\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 animationConfig<Animate>(\n styleProp: string,\n transition: MotiTransition<Animate> | undefined\n) {\n 'worklet'\n const key = styleProp\n let repeatCount = 0\n let repeatReverse = true\n let animationType: Required<TransitionConfig>['type'] = 'spring'\n\n if (isColor(key) || key === 'opacity') {\n animationType = 'timing'\n }\n\n // say that we're looking at `width`\n // first, check if we have transition.width.type\n if (transition[key as keyof Animate]?.type) {\n animationType = (transition as any)[key]?.type\n } else if (transition?.type) {\n // otherwise, fallback to transition.type\n animationType = transition.type\n }\n\n const loop = transition[key as keyof Animate]?.loop ?? transition?.loop\n\n if (loop != null) {\n repeatCount = loop ? -1 : 0\n }\n\n if (transition[key as keyof Animate]?.repeat != null) {\n repeatCount = transition[key as keyof Animate]?.repeat\n } else if (transition?.repeat != null) {\n repeatCount = transition.repeat\n }\n\n if (transition[key as keyof Animate]?.repeatReverse != null) {\n repeatReverse = transition[key as keyof Animate]?.repeatReverse\n } else if (transition?.repeatReverse != null) {\n repeatReverse = transition.repeatReverse\n }\n\n let config = {}\n // so sad, but fix it later :(\n let animation = (...props: any): any => props\n\n if (animationType === 'timing') {\n const duration =\n (transition[key as keyof Animate] as WithTimingConfig)?.duration ??\n (transition as WithTimingConfig)?.duration\n\n const easing =\n (transition[key as keyof Animate] as WithTimingConfig)?.easing ??\n (transition as WithTimingConfig)?.easing\n\n if (easing) {\n config['easing'] = easing\n }\n if (duration != null) {\n config['duration'] = duration\n }\n animation = withTiming\n } else if (animationType === 'spring') {\n animation = withSpring\n config = {} as WithSpringConfig\n configKeys.forEach((configKey) => {\n 'worklet'\n const styleSpecificConfig = transition?.[key]?.[configKey]\n const transitionConfigForKey = transition?.[configKey]\n if (styleSpecificConfig != null) {\n config[configKey] = styleSpecificConfig\n } else if (transitionConfigForKey != null) {\n config[configKey] = transitionConfigForKey\n }\n })\n } else if (animationType === 'decay') {\n animation = withDecay\n config = {\n velocity: 2,\n deceleration: 2,\n }\n const configKeys: (keyof WithDecayConfig)[] = [\n 'clamp',\n 'velocity',\n 'deceleration',\n 'velocityFactor',\n ]\n configKeys.forEach((configKey) => {\n 'worklet'\n // is this necessary ^ don't think so...?\n const styleSpecificConfig = transition?.[key]?.[configKey]\n const transitionConfigForKey = transition?.[configKey]\n\n if (styleSpecificConfig != null) {\n config[configKey] = styleSpecificConfig\n } else if (transitionConfigForKey != null) {\n config[configKey] = transitionConfigForKey\n }\n })\n }\n\n return {\n animation,\n config,\n repeatReverse,\n repeatCount,\n shouldRepeat: !!repeatCount,\n }\n}\n\nconst configKeys: (keyof WithSpringConfig)[] = [\n 'damping',\n 'mass',\n 'overshootClamping',\n 'restDisplacementThreshold',\n 'restSpeedThreshold',\n 'stiffness',\n 'velocity',\n]\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { AnimatePresenceContext, useEntering } from '@tamagui/animate-presence'\nimport { AnimationDriver } from '@tamagui/core'\nimport { useCallback, useContext, useEffect, 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 } & WithTimingConfig)\n | ({ type: 'spring'; loop?: number } & WithSpringConfig)\n | ({ type: 'decay'; loop?: number } & WithDecayConfig)\n// | ({ type: 'transition' } & TransitionProps)\n\nconst AnimatedView = Animated.View\nconst AnimatedText = Animated.Text\n\nAnimatedView['displayName'] = 'AnimatedView'\nAnimatedText['displayName'] = 'AnimatedText'\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {\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 [isEntering, safeToUnmount] = useEntering()\n const presence = useContext(AnimatePresenceContext)\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 all = getStyle({\n isEntering,\n exitVariant: presence?.exitVariant,\n enterVariant: presence?.enterVariant,\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(animatedStyles),\n state.mounted,\n state.hover,\n state.press,\n state.pressIn,\n state.focus,\n delay,\n isEntering,\n onDidAnimate,\n reanimatedOnDidAnimated,\n presence?.exitVariant,\n presence?.enterVariant,\n ]\n\n const animatedStyle = useAnimatedStyle(() => {\n const style = animatedStyles\n\n const final = {\n transform: [] as any[],\n }\n\n const isExiting = isEntering === false\n const transition = animations[props.animation]\n\n const exitingStyleProps: Record<string, boolean> = {}\n if (exitStyle) {\n for (const key of Object.keys(exitStyle)) {\n exitingStyleProps[key] = true\n }\n }\n\n for (const key in style) {\n const value = style[key]\n const aconf = animationConfig(key, transition)\n const { animation, config, shouldRepeat, repeatCount, repeatReverse } = aconf\n\n const callback: (completed: boolean, value?: any) => void = (completed, recentValue) => {\n runOnJS(reanimatedOnDidAnimated)(key, completed, recentValue, {\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 (safeToUnmount) {\n runOnJS(safeToUnmount)()\n }\n }\n }\n }\n\n let { delayMs = null } = animationDelay(key, transition, delay)\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(transformValue, config, callback)\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(value, config, callback)\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(value, config, callback)\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 if (process.env.NODE_ENV === 'development' && props['debug']) {\n console.log('animation style', final)\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 animationDelay(\n key: string,\n transition: AnimationConfig | undefined,\n defaultDelay?: number\n) {\n 'worklet'\n if (\n !transition ||\n !transition[key] ||\n transition[key].delayMs === undefined ||\n transition[key].delayMs === null\n ) {\n return {\n delayMs: null,\n }\n }\n return {\n delayMs: transition[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 animationConfig<Animate>(styleProp: string, transition: AnimationConfig | undefined) {\n 'worklet'\n const key = styleProp\n let repeatCount = 0\n let repeatReverse = true\n let animationType: Required<TransitionConfig>['type'] = 'spring'\n\n if (isColor(key) || key === 'opacity') {\n animationType = 'timing'\n }\n\n if (!transition) {\n return {}\n }\n\n // say that we're looking at `width`\n // first, check if we have transition.width.type\n if (transition[key]?.type) {\n animationType = transition[key]?.type\n } else if (transition.type) {\n // otherwise, fallback to transition.type\n animationType = transition.type\n }\n\n const loop = transition[key]?.loop || transition.loop || null\n\n if (loop != null) {\n repeatCount = loop ? -1 : 0\n }\n\n // if (transition[key]?.repeat != null) {\n // repeatCount = transition[key]?.repeat\n // } else if (transition?.repeat != null) {\n // repeatCount = transition.repeat\n // }\n\n // if (transition[key]?.repeatReverse != null) {\n // repeatReverse = transition[key]?.repeatReverse\n // } else if (transition?.repeatReverse != null) {\n // repeatReverse = transition.repeatReverse\n // }\n\n let config = {}\n // so sad, but fix it later :(\n let animation: any\n\n if (animationType === 'timing') {\n const duration =\n (transition[key] as WithTimingConfig)?.duration ?? (transition as WithTimingConfig)?.duration\n\n const easing =\n (transition[key] as WithTimingConfig)?.easing ?? (transition as WithTimingConfig)?.easing\n\n if (easing) {\n config['easing'] = easing\n }\n if (duration != null) {\n config['duration'] = duration\n }\n animation = withTiming\n } else if (animationType === 'spring') {\n animation = withSpring\n config = {} as WithSpringConfig\n configKeys.forEach((configKey) => {\n 'worklet'\n const styleSpecificConfig = transition?.[key]?.[configKey]\n const transitionConfigForKey = transition?.[configKey]\n if (styleSpecificConfig != null) {\n config[configKey] = styleSpecificConfig\n } else if (transitionConfigForKey != null) {\n config[configKey] = transitionConfigForKey\n }\n })\n } else if (animationType === 'decay') {\n animation = withDecay\n config = {\n velocity: 2,\n deceleration: 2,\n }\n const configKeys: (keyof WithDecayConfig)[] = [\n 'clamp',\n 'velocity',\n 'deceleration',\n 'velocityFactor',\n ]\n configKeys.forEach((configKey) => {\n 'worklet'\n // is this necessary ^ don't think so...?\n const styleSpecificConfig = transition?.[key]?.[configKey]\n const transitionConfigForKey = transition?.[configKey]\n\n if (styleSpecificConfig != null) {\n config[configKey] = styleSpecificConfig\n } else if (transitionConfigForKey != null) {\n config[configKey] = transitionConfigForKey\n }\n })\n }\n\n return {\n animation,\n config,\n repeatReverse,\n repeatCount,\n shouldRepeat: !!repeatCount,\n }\n}\n\nconst configKeys: (keyof WithSpringConfig)[] = [\n 'damping',\n 'mass',\n 'overshootClamping',\n 'restDisplacementThreshold',\n 'restSpeedThreshold',\n 'stiffness',\n 'velocity',\n]\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
import { AnimatePresenceContext,
|
|
4
|
-
import { useCallback, useContext,
|
|
3
|
+
import { AnimatePresenceContext, useEntering } from "@tamagui/animate-presence";
|
|
4
|
+
import { useCallback, useContext, useMemo } from "react";
|
|
5
5
|
import Animated, {
|
|
6
6
|
runOnJS,
|
|
7
7
|
useAnimatedStyle,
|
|
8
|
-
useSharedValue,
|
|
9
8
|
withDecay,
|
|
10
9
|
withDelay,
|
|
11
10
|
withRepeat,
|
|
@@ -22,61 +21,74 @@ function createAnimations(animations) {
|
|
|
22
21
|
animations,
|
|
23
22
|
View: AnimatedView,
|
|
24
23
|
Text: AnimatedText,
|
|
25
|
-
useAnimations: (props,
|
|
26
|
-
|
|
27
|
-
const
|
|
24
|
+
useAnimations: (props, helpers) => {
|
|
25
|
+
var _a, _b;
|
|
26
|
+
const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
|
|
27
|
+
const [isEntering, safeToUnmount] = useEntering();
|
|
28
28
|
const presence = useContext(AnimatePresenceContext);
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
"worklet";
|
|
33
|
-
return presence == null ? void 0 : presence.custom;
|
|
34
|
-
}, [presence]);
|
|
35
|
-
const reanimatedOnDidAnimated = useCallback((...args) => {
|
|
36
|
-
onDidAnimate == null ? void 0 : onDidAnimate(...args);
|
|
29
|
+
const exitStyle = (presence == null ? void 0 : presence.exitVariant) ? ((_b = (_a = staticConfig.variantsParsed) == null ? void 0 : _a[presence.exitVariant]) == null ? void 0 : _b.true) || pseudos.exitStyle : pseudos.exitStyle;
|
|
30
|
+
const reanimatedOnDidAnimated = useCallback((...args2) => {
|
|
31
|
+
onDidAnimate == null ? void 0 : onDidAnimate(...args2);
|
|
37
32
|
}, [onDidAnimate]);
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
},
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
33
|
+
const all = getStyle({
|
|
34
|
+
isEntering,
|
|
35
|
+
exitVariant: presence == null ? void 0 : presence.exitVariant,
|
|
36
|
+
enterVariant: presence == null ? void 0 : presence.enterVariant
|
|
37
|
+
});
|
|
38
|
+
const [animatedStyles, nonAnimatedStyle] = [{}, {}];
|
|
39
|
+
const animatedStyleKey = {
|
|
40
|
+
transform: true,
|
|
41
|
+
opacity: true
|
|
42
|
+
};
|
|
43
|
+
for (const key of Object.keys(all)) {
|
|
44
|
+
if (animatedStyleKey[key]) {
|
|
45
|
+
animatedStyles[key] = all[key];
|
|
46
|
+
} else {
|
|
47
|
+
nonAnimatedStyle[key] = all[key];
|
|
47
48
|
}
|
|
48
|
-
}
|
|
49
|
+
}
|
|
50
|
+
const args = [
|
|
51
|
+
JSON.stringify(animatedStyles),
|
|
52
|
+
state.mounted,
|
|
53
|
+
state.hover,
|
|
54
|
+
state.press,
|
|
55
|
+
state.pressIn,
|
|
56
|
+
state.focus,
|
|
57
|
+
delay,
|
|
58
|
+
isEntering,
|
|
59
|
+
onDidAnimate,
|
|
60
|
+
reanimatedOnDidAnimated,
|
|
61
|
+
presence == null ? void 0 : presence.exitVariant,
|
|
62
|
+
presence == null ? void 0 : presence.enterVariant
|
|
63
|
+
];
|
|
49
64
|
const animatedStyle = useAnimatedStyle(() => {
|
|
50
|
-
|
|
65
|
+
const style = animatedStyles;
|
|
51
66
|
const final = {
|
|
52
67
|
transform: []
|
|
53
68
|
};
|
|
54
|
-
const isExiting =
|
|
69
|
+
const isExiting = isEntering === false;
|
|
55
70
|
const transition = animations[props.animation];
|
|
56
|
-
const mergedStyles = {
|
|
57
|
-
...style,
|
|
58
|
-
...isExiting && exitStyle
|
|
59
|
-
};
|
|
60
71
|
const exitingStyleProps = {};
|
|
61
72
|
if (exitStyle) {
|
|
62
73
|
for (const key of Object.keys(exitStyle)) {
|
|
63
74
|
exitingStyleProps[key] = true;
|
|
64
75
|
}
|
|
65
76
|
}
|
|
66
|
-
for (const key in
|
|
67
|
-
const value =
|
|
68
|
-
const
|
|
77
|
+
for (const key in style) {
|
|
78
|
+
const value = style[key];
|
|
79
|
+
const aconf = animationConfig(key, transition);
|
|
80
|
+
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = aconf;
|
|
69
81
|
const callback = /* @__PURE__ */ __name((completed, recentValue) => {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
});
|
|
74
|
-
}
|
|
82
|
+
runOnJS(reanimatedOnDidAnimated)(key, completed, recentValue, {
|
|
83
|
+
attemptedValue: value
|
|
84
|
+
});
|
|
75
85
|
if (isExiting) {
|
|
76
86
|
exitingStyleProps[key] = false;
|
|
77
87
|
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean);
|
|
78
88
|
if (!areStylesExiting) {
|
|
79
|
-
|
|
89
|
+
if (safeToUnmount) {
|
|
90
|
+
runOnJS(safeToUnmount)();
|
|
91
|
+
}
|
|
80
92
|
}
|
|
81
93
|
}
|
|
82
94
|
}, "callback");
|
|
@@ -89,22 +101,13 @@ function createAnimations(animations) {
|
|
|
89
101
|
for (const transformObject of value) {
|
|
90
102
|
const key2 = Object.keys(transformObject)[0];
|
|
91
103
|
const transformValue = transformObject[key2];
|
|
92
|
-
const transform = {};
|
|
93
|
-
if (((_a = transition == null ? void 0 : transition[key2]) == null ? void 0 : _a.delay) != null) {
|
|
94
|
-
delayMs = (_c = (_b = transition == null ? void 0 : transition[key2]) == null ? void 0 : _b.delay) != null ? _c : null;
|
|
95
|
-
}
|
|
96
104
|
let finalValue2 = animation(transformValue, config, callback);
|
|
97
105
|
if (shouldRepeat) {
|
|
98
106
|
finalValue2 = withRepeat(finalValue2, repeatCount, repeatReverse);
|
|
99
107
|
}
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
}
|
|
103
|
-
transform[key2] = finalValue2;
|
|
104
|
-
}
|
|
105
|
-
if (Object.keys(transform).length) {
|
|
106
|
-
final["transform"].push(transform);
|
|
107
|
-
}
|
|
108
|
+
final["transform"].push({
|
|
109
|
+
[key2]: finalValue2
|
|
110
|
+
});
|
|
108
111
|
}
|
|
109
112
|
continue;
|
|
110
113
|
}
|
|
@@ -133,36 +136,29 @@ function createAnimations(animations) {
|
|
|
133
136
|
final[key] = finalValue;
|
|
134
137
|
}
|
|
135
138
|
}
|
|
139
|
+
if (process.env.NODE_ENV === "development" && props["debug"]) {
|
|
140
|
+
console.log("animation style", final);
|
|
141
|
+
}
|
|
136
142
|
return final;
|
|
137
|
-
},
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
isPresent,
|
|
144
|
-
onDidAnimate,
|
|
145
|
-
reanimatedOnDidAnimated,
|
|
146
|
-
reanimatedSafeToUnmount
|
|
147
|
-
]);
|
|
148
|
-
return {
|
|
149
|
-
style: animatedStyle
|
|
150
|
-
};
|
|
143
|
+
}, args);
|
|
144
|
+
return useMemo(() => {
|
|
145
|
+
return {
|
|
146
|
+
style: [nonAnimatedStyle, animatedStyle]
|
|
147
|
+
};
|
|
148
|
+
}, args);
|
|
151
149
|
}
|
|
152
150
|
};
|
|
153
151
|
}
|
|
154
152
|
__name(createAnimations, "createAnimations");
|
|
155
153
|
function animationDelay(key, transition, defaultDelay) {
|
|
156
|
-
var _a, _b;
|
|
157
154
|
"worklet";
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
delayMs = transition.delay;
|
|
155
|
+
if (!transition || !transition[key] || transition[key].delayMs === void 0 || transition[key].delayMs === null) {
|
|
156
|
+
return {
|
|
157
|
+
delayMs: null
|
|
158
|
+
};
|
|
163
159
|
}
|
|
164
160
|
return {
|
|
165
|
-
delayMs
|
|
161
|
+
delayMs: transition[key].delayMs
|
|
166
162
|
};
|
|
167
163
|
}
|
|
168
164
|
__name(animationDelay, "animationDelay");
|
|
@@ -181,7 +177,7 @@ const isColor = /* @__PURE__ */ __name((styleKey) => {
|
|
|
181
177
|
].includes(styleKey);
|
|
182
178
|
}, "isColor");
|
|
183
179
|
function animationConfig(styleProp, transition) {
|
|
184
|
-
var _a, _b, _c, _d, _e, _f, _g
|
|
180
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
185
181
|
"worklet";
|
|
186
182
|
const key = styleProp;
|
|
187
183
|
let repeatCount = 0;
|
|
@@ -190,30 +186,23 @@ function animationConfig(styleProp, transition) {
|
|
|
190
186
|
if (isColor(key) || key === "opacity") {
|
|
191
187
|
animationType = "timing";
|
|
192
188
|
}
|
|
189
|
+
if (!transition) {
|
|
190
|
+
return {};
|
|
191
|
+
}
|
|
193
192
|
if ((_a = transition[key]) == null ? void 0 : _a.type) {
|
|
194
193
|
animationType = (_b = transition[key]) == null ? void 0 : _b.type;
|
|
195
|
-
} else if (transition
|
|
194
|
+
} else if (transition.type) {
|
|
196
195
|
animationType = transition.type;
|
|
197
196
|
}
|
|
198
|
-
const loop = (
|
|
197
|
+
const loop = ((_c = transition[key]) == null ? void 0 : _c.loop) || transition.loop || null;
|
|
199
198
|
if (loop != null) {
|
|
200
199
|
repeatCount = loop ? -1 : 0;
|
|
201
200
|
}
|
|
202
|
-
if (((_e = transition[key]) == null ? void 0 : _e.repeat) != null) {
|
|
203
|
-
repeatCount = (_f = transition[key]) == null ? void 0 : _f.repeat;
|
|
204
|
-
} else if ((transition == null ? void 0 : transition.repeat) != null) {
|
|
205
|
-
repeatCount = transition.repeat;
|
|
206
|
-
}
|
|
207
|
-
if (((_g = transition[key]) == null ? void 0 : _g.repeatReverse) != null) {
|
|
208
|
-
repeatReverse = (_h = transition[key]) == null ? void 0 : _h.repeatReverse;
|
|
209
|
-
} else if ((transition == null ? void 0 : transition.repeatReverse) != null) {
|
|
210
|
-
repeatReverse = transition.repeatReverse;
|
|
211
|
-
}
|
|
212
201
|
let config = {};
|
|
213
|
-
let animation
|
|
202
|
+
let animation;
|
|
214
203
|
if (animationType === "timing") {
|
|
215
|
-
const duration = (
|
|
216
|
-
const easing = (
|
|
204
|
+
const duration = (_e = (_d = transition[key]) == null ? void 0 : _d.duration) != null ? _e : transition == null ? void 0 : transition.duration;
|
|
205
|
+
const easing = (_g = (_f = transition[key]) == null ? void 0 : _f.easing) != null ? _g : transition == null ? void 0 : transition.easing;
|
|
217
206
|
if (easing) {
|
|
218
207
|
config["easing"] = easing;
|
|
219
208
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { AnimatePresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, UseAnimationProps, UseAnimationState } from '@tamagui/core'\nimport { createContext, useCallback, useContext, useEffect } from 'react'\nimport {\n PerpectiveTransform,\n RotateTransform,\n RotateXTransform,\n RotateYTransform,\n RotateZTransform,\n ScaleTransform,\n ScaleXTransform,\n ScaleYTransform,\n SkewXTransform,\n SkewYTransform,\n TranslateXTransform,\n TranslateYTransform,\n} from 'react-native'\nimport Animated, {\n WithDecayConfig,\n WithSpringConfig,\n WithTimingConfig,\n runOnJS,\n useAnimatedStyle,\n useSharedValue,\n withDecay,\n withDelay,\n withRepeat,\n withSpring,\n withTiming,\n} from 'react-native-reanimated'\n\nconst AnimatedView = Animated.View\nconst AnimatedText = Animated.Text\n\nAnimatedView['displayName'] = 'AnimatedView'\nAnimatedText['displayName'] = 'AnimatedText'\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n return {\n avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimations: (props: UseAnimationProps, state: UseAnimationState) => {\n const { style, exitStyle, onDidAnimate, delay } = state\n const [isPresent, safeToUnmount] = usePresence()\n const presence = useContext(AnimatePresenceContext)\n const isMounted = useSharedValue(false)\n const hasExitStyle = !!exitStyle\n const custom = useCallback(() => {\n 'worklet'\n return presence?.custom\n }, [presence])\n\n const reanimatedOnDidAnimated = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\n )\n const reanimatedSafeToUnmount = useCallback(() => {\n safeToUnmount?.()\n }, [safeToUnmount])\n\n useEffect(() => {\n isMounted.value = true\n }, [isMounted])\n\n useEffect(\n function allowUnMountIfMissingExit() {\n if (!isPresent && !hasExitStyle) {\n reanimatedSafeToUnmount()\n }\n },\n [hasExitStyle, isPresent, reanimatedSafeToUnmount]\n )\n\n const animatedStyle = useAnimatedStyle(() => {\n const final = {\n transform: [] as any[],\n }\n\n const isExiting = !isPresent && !!exitStyle\n const transition = animations[props.animation]\n\n const mergedStyles = {\n ...style,\n ...(isExiting && exitStyle),\n }\n\n const exitingStyleProps: Record<string, boolean> = {}\n if (exitStyle) {\n for (const key of Object.keys(exitStyle)) {\n exitingStyleProps[key] = true\n }\n }\n\n for (const key in mergedStyles) {\n const value = mergedStyles[key]\n const { animation, config, shouldRepeat, repeatCount, repeatReverse } = animationConfig(\n key,\n transition\n )\n\n const callback: (completed: boolean, value?: any) => void = (completed, recentValue) => {\n if (onDidAnimate) {\n runOnJS(reanimatedOnDidAnimated)(key as any, completed, recentValue, {\n attemptedValue: value,\n })\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 runOnJS(reanimatedSafeToUnmount)()\n }\n }\n }\n\n let { delayMs = null } = animationDelay(key, transition, delay)\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 const transform = {} as any\n if (transition?.[key]?.delay != null) {\n delayMs = transition?.[key]?.delay ?? null\n }\n let finalValue = animation(transformValue, config, callback)\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n if (delayMs != null) {\n transform[key] = withDelay(delayMs, finalValue)\n } else {\n transform[key] = finalValue\n }\n if (Object.keys(transform).length) {\n final['transform'].push(transform)\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(value, config, callback)\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(value, config, callback)\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 }, [\n style,\n custom,\n delay,\n // disableInitialAnimation,\n // exitProp,\n // exitTransitionProp,\n // fromProp,\n hasExitStyle,\n isMounted,\n isPresent,\n onDidAnimate,\n reanimatedOnDidAnimated,\n reanimatedSafeToUnmount,\n // state,\n // stylePriority,\n // transitionProp,\n ])\n\n return {\n style: animatedStyle,\n }\n },\n }\n}\n\nfunction animationDelay<Animate>(\n key: string,\n transition: MotiTransition<Animate> | undefined,\n defaultDelay?: number\n) {\n 'worklet'\n let delayMs: TransitionConfig['delay'] = defaultDelay\n\n if (transition[key as keyof Animate]?.delay != null) {\n delayMs = transition[key as keyof Animate]?.delay\n } else if (transition?.delay != null) {\n delayMs = transition.delay\n }\n\n return {\n delayMs,\n }\n}\n\ntype MotiTransition<A> = any\ntype Transforms = PerpectiveTransform &\n RotateTransform &\n RotateXTransform &\n RotateYTransform &\n RotateZTransform &\n ScaleTransform &\n ScaleXTransform &\n ScaleYTransform &\n TranslateXTransform &\n TranslateYTransform &\n SkewXTransform &\n SkewYTransform\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 animationConfig<Animate>(\n styleProp: string,\n transition: MotiTransition<Animate> | undefined\n) {\n 'worklet'\n const key = styleProp\n let repeatCount = 0\n let repeatReverse = true\n let animationType: Required<TransitionConfig>['type'] = 'spring'\n\n if (isColor(key) || key === 'opacity') {\n animationType = 'timing'\n }\n\n // say that we're looking at `width`\n // first, check if we have transition.width.type\n if (transition[key as keyof Animate]?.type) {\n animationType = (transition as any)[key]?.type\n } else if (transition?.type) {\n // otherwise, fallback to transition.type\n animationType = transition.type\n }\n\n const loop = transition[key as keyof Animate]?.loop ?? transition?.loop\n\n if (loop != null) {\n repeatCount = loop ? -1 : 0\n }\n\n if (transition[key as keyof Animate]?.repeat != null) {\n repeatCount = transition[key as keyof Animate]?.repeat\n } else if (transition?.repeat != null) {\n repeatCount = transition.repeat\n }\n\n if (transition[key as keyof Animate]?.repeatReverse != null) {\n repeatReverse = transition[key as keyof Animate]?.repeatReverse\n } else if (transition?.repeatReverse != null) {\n repeatReverse = transition.repeatReverse\n }\n\n let config = {}\n // so sad, but fix it later :(\n let animation = (...props: any): any => props\n\n if (animationType === 'timing') {\n const duration =\n (transition[key as keyof Animate] as WithTimingConfig)?.duration ??\n (transition as WithTimingConfig)?.duration\n\n const easing =\n (transition[key as keyof Animate] as WithTimingConfig)?.easing ??\n (transition as WithTimingConfig)?.easing\n\n if (easing) {\n config['easing'] = easing\n }\n if (duration != null) {\n config['duration'] = duration\n }\n animation = withTiming\n } else if (animationType === 'spring') {\n animation = withSpring\n config = {} as WithSpringConfig\n configKeys.forEach((configKey) => {\n 'worklet'\n const styleSpecificConfig = transition?.[key]?.[configKey]\n const transitionConfigForKey = transition?.[configKey]\n if (styleSpecificConfig != null) {\n config[configKey] = styleSpecificConfig\n } else if (transitionConfigForKey != null) {\n config[configKey] = transitionConfigForKey\n }\n })\n } else if (animationType === 'decay') {\n animation = withDecay\n config = {\n velocity: 2,\n deceleration: 2,\n }\n const configKeys: (keyof WithDecayConfig)[] = [\n 'clamp',\n 'velocity',\n 'deceleration',\n 'velocityFactor',\n ]\n configKeys.forEach((configKey) => {\n 'worklet'\n // is this necessary ^ don't think so...?\n const styleSpecificConfig = transition?.[key]?.[configKey]\n const transitionConfigForKey = transition?.[configKey]\n\n if (styleSpecificConfig != null) {\n config[configKey] = styleSpecificConfig\n } else if (transitionConfigForKey != null) {\n config[configKey] = transitionConfigForKey\n }\n })\n }\n\n return {\n animation,\n config,\n repeatReverse,\n repeatCount,\n shouldRepeat: !!repeatCount,\n }\n}\n\nconst configKeys: (keyof WithSpringConfig)[] = [\n 'damping',\n 'mass',\n 'overshootClamping',\n 'restDisplacementThreshold',\n 'restSpeedThreshold',\n 'stiffness',\n 'velocity',\n]\n"],
|
|
5
|
-
"mappings": ";;AAAA;AAEA;
|
|
4
|
+
"sourcesContent": ["import { AnimatePresenceContext, useEntering } from '@tamagui/animate-presence'\nimport { AnimationDriver } from '@tamagui/core'\nimport { useCallback, useContext, useEffect, 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 } & WithTimingConfig)\n | ({ type: 'spring'; loop?: number } & WithSpringConfig)\n | ({ type: 'decay'; loop?: number } & WithDecayConfig)\n// | ({ type: 'transition' } & TransitionProps)\n\nconst AnimatedView = Animated.View\nconst AnimatedText = Animated.Text\n\nAnimatedView['displayName'] = 'AnimatedView'\nAnimatedText['displayName'] = 'AnimatedText'\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {\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 [isEntering, safeToUnmount] = useEntering()\n const presence = useContext(AnimatePresenceContext)\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 all = getStyle({\n isEntering,\n exitVariant: presence?.exitVariant,\n enterVariant: presence?.enterVariant,\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(animatedStyles),\n state.mounted,\n state.hover,\n state.press,\n state.pressIn,\n state.focus,\n delay,\n isEntering,\n onDidAnimate,\n reanimatedOnDidAnimated,\n presence?.exitVariant,\n presence?.enterVariant,\n ]\n\n const animatedStyle = useAnimatedStyle(() => {\n const style = animatedStyles\n\n const final = {\n transform: [] as any[],\n }\n\n const isExiting = isEntering === false\n const transition = animations[props.animation]\n\n const exitingStyleProps: Record<string, boolean> = {}\n if (exitStyle) {\n for (const key of Object.keys(exitStyle)) {\n exitingStyleProps[key] = true\n }\n }\n\n for (const key in style) {\n const value = style[key]\n const aconf = animationConfig(key, transition)\n const { animation, config, shouldRepeat, repeatCount, repeatReverse } = aconf\n\n const callback: (completed: boolean, value?: any) => void = (completed, recentValue) => {\n runOnJS(reanimatedOnDidAnimated)(key, completed, recentValue, {\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 (safeToUnmount) {\n runOnJS(safeToUnmount)()\n }\n }\n }\n }\n\n let { delayMs = null } = animationDelay(key, transition, delay)\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(transformValue, config, callback)\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(value, config, callback)\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(value, config, callback)\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 if (process.env.NODE_ENV === 'development' && props['debug']) {\n console.log('animation style', final)\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 animationDelay(\n key: string,\n transition: AnimationConfig | undefined,\n defaultDelay?: number\n) {\n 'worklet'\n if (\n !transition ||\n !transition[key] ||\n transition[key].delayMs === undefined ||\n transition[key].delayMs === null\n ) {\n return {\n delayMs: null,\n }\n }\n return {\n delayMs: transition[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 animationConfig<Animate>(styleProp: string, transition: AnimationConfig | undefined) {\n 'worklet'\n const key = styleProp\n let repeatCount = 0\n let repeatReverse = true\n let animationType: Required<TransitionConfig>['type'] = 'spring'\n\n if (isColor(key) || key === 'opacity') {\n animationType = 'timing'\n }\n\n if (!transition) {\n return {}\n }\n\n // say that we're looking at `width`\n // first, check if we have transition.width.type\n if (transition[key]?.type) {\n animationType = transition[key]?.type\n } else if (transition.type) {\n // otherwise, fallback to transition.type\n animationType = transition.type\n }\n\n const loop = transition[key]?.loop || transition.loop || null\n\n if (loop != null) {\n repeatCount = loop ? -1 : 0\n }\n\n // if (transition[key]?.repeat != null) {\n // repeatCount = transition[key]?.repeat\n // } else if (transition?.repeat != null) {\n // repeatCount = transition.repeat\n // }\n\n // if (transition[key]?.repeatReverse != null) {\n // repeatReverse = transition[key]?.repeatReverse\n // } else if (transition?.repeatReverse != null) {\n // repeatReverse = transition.repeatReverse\n // }\n\n let config = {}\n // so sad, but fix it later :(\n let animation: any\n\n if (animationType === 'timing') {\n const duration =\n (transition[key] as WithTimingConfig)?.duration ?? (transition as WithTimingConfig)?.duration\n\n const easing =\n (transition[key] as WithTimingConfig)?.easing ?? (transition as WithTimingConfig)?.easing\n\n if (easing) {\n config['easing'] = easing\n }\n if (duration != null) {\n config['duration'] = duration\n }\n animation = withTiming\n } else if (animationType === 'spring') {\n animation = withSpring\n config = {} as WithSpringConfig\n configKeys.forEach((configKey) => {\n 'worklet'\n const styleSpecificConfig = transition?.[key]?.[configKey]\n const transitionConfigForKey = transition?.[configKey]\n if (styleSpecificConfig != null) {\n config[configKey] = styleSpecificConfig\n } else if (transitionConfigForKey != null) {\n config[configKey] = transitionConfigForKey\n }\n })\n } else if (animationType === 'decay') {\n animation = withDecay\n config = {\n velocity: 2,\n deceleration: 2,\n }\n const configKeys: (keyof WithDecayConfig)[] = [\n 'clamp',\n 'velocity',\n 'deceleration',\n 'velocityFactor',\n ]\n configKeys.forEach((configKey) => {\n 'worklet'\n // is this necessary ^ don't think so...?\n const styleSpecificConfig = transition?.[key]?.[configKey]\n const transitionConfigForKey = transition?.[configKey]\n\n if (styleSpecificConfig != null) {\n config[configKey] = styleSpecificConfig\n } else if (transitionConfigForKey != null) {\n config[configKey] = transitionConfigForKey\n }\n })\n }\n\n return {\n animation,\n config,\n repeatReverse,\n repeatCount,\n shouldRepeat: !!repeatCount,\n }\n}\n\nconst configKeys: (keyof WithSpringConfig)[] = [\n 'damping',\n 'mass',\n 'overshootClamping',\n 'restDisplacementThreshold',\n 'restSpeedThreshold',\n 'stiffness',\n 'velocity',\n]\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
import { AnimatePresenceContext,
|
|
4
|
-
import { useCallback, useContext,
|
|
3
|
+
import { AnimatePresenceContext, useEntering } from "@tamagui/animate-presence";
|
|
4
|
+
import { useCallback, useContext, useMemo } from "react";
|
|
5
5
|
import Animated, {
|
|
6
6
|
runOnJS,
|
|
7
7
|
useAnimatedStyle,
|
|
8
|
-
useSharedValue,
|
|
9
8
|
withDecay,
|
|
10
9
|
withDelay,
|
|
11
10
|
withRepeat,
|
|
@@ -22,61 +21,74 @@ function createAnimations(animations) {
|
|
|
22
21
|
animations,
|
|
23
22
|
View: AnimatedView,
|
|
24
23
|
Text: AnimatedText,
|
|
25
|
-
useAnimations: (props,
|
|
26
|
-
|
|
27
|
-
const
|
|
24
|
+
useAnimations: (props, helpers) => {
|
|
25
|
+
var _a, _b;
|
|
26
|
+
const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
|
|
27
|
+
const [isEntering, safeToUnmount] = useEntering();
|
|
28
28
|
const presence = useContext(AnimatePresenceContext);
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
"worklet";
|
|
33
|
-
return presence == null ? void 0 : presence.custom;
|
|
34
|
-
}, [presence]);
|
|
35
|
-
const reanimatedOnDidAnimated = useCallback((...args) => {
|
|
36
|
-
onDidAnimate == null ? void 0 : onDidAnimate(...args);
|
|
29
|
+
const exitStyle = (presence == null ? void 0 : presence.exitVariant) ? ((_b = (_a = staticConfig.variantsParsed) == null ? void 0 : _a[presence.exitVariant]) == null ? void 0 : _b.true) || pseudos.exitStyle : pseudos.exitStyle;
|
|
30
|
+
const reanimatedOnDidAnimated = useCallback((...args2) => {
|
|
31
|
+
onDidAnimate == null ? void 0 : onDidAnimate(...args2);
|
|
37
32
|
}, [onDidAnimate]);
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
},
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
33
|
+
const all = getStyle({
|
|
34
|
+
isEntering,
|
|
35
|
+
exitVariant: presence == null ? void 0 : presence.exitVariant,
|
|
36
|
+
enterVariant: presence == null ? void 0 : presence.enterVariant
|
|
37
|
+
});
|
|
38
|
+
const [animatedStyles, nonAnimatedStyle] = [{}, {}];
|
|
39
|
+
const animatedStyleKey = {
|
|
40
|
+
transform: true,
|
|
41
|
+
opacity: true
|
|
42
|
+
};
|
|
43
|
+
for (const key of Object.keys(all)) {
|
|
44
|
+
if (animatedStyleKey[key]) {
|
|
45
|
+
animatedStyles[key] = all[key];
|
|
46
|
+
} else {
|
|
47
|
+
nonAnimatedStyle[key] = all[key];
|
|
47
48
|
}
|
|
48
|
-
}
|
|
49
|
+
}
|
|
50
|
+
const args = [
|
|
51
|
+
JSON.stringify(animatedStyles),
|
|
52
|
+
state.mounted,
|
|
53
|
+
state.hover,
|
|
54
|
+
state.press,
|
|
55
|
+
state.pressIn,
|
|
56
|
+
state.focus,
|
|
57
|
+
delay,
|
|
58
|
+
isEntering,
|
|
59
|
+
onDidAnimate,
|
|
60
|
+
reanimatedOnDidAnimated,
|
|
61
|
+
presence == null ? void 0 : presence.exitVariant,
|
|
62
|
+
presence == null ? void 0 : presence.enterVariant
|
|
63
|
+
];
|
|
49
64
|
const animatedStyle = useAnimatedStyle(() => {
|
|
50
|
-
|
|
65
|
+
const style = animatedStyles;
|
|
51
66
|
const final = {
|
|
52
67
|
transform: []
|
|
53
68
|
};
|
|
54
|
-
const isExiting =
|
|
69
|
+
const isExiting = isEntering === false;
|
|
55
70
|
const transition = animations[props.animation];
|
|
56
|
-
const mergedStyles = {
|
|
57
|
-
...style,
|
|
58
|
-
...isExiting && exitStyle
|
|
59
|
-
};
|
|
60
71
|
const exitingStyleProps = {};
|
|
61
72
|
if (exitStyle) {
|
|
62
73
|
for (const key of Object.keys(exitStyle)) {
|
|
63
74
|
exitingStyleProps[key] = true;
|
|
64
75
|
}
|
|
65
76
|
}
|
|
66
|
-
for (const key in
|
|
67
|
-
const value =
|
|
68
|
-
const
|
|
77
|
+
for (const key in style) {
|
|
78
|
+
const value = style[key];
|
|
79
|
+
const aconf = animationConfig(key, transition);
|
|
80
|
+
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = aconf;
|
|
69
81
|
const callback = /* @__PURE__ */ __name((completed, recentValue) => {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
});
|
|
74
|
-
}
|
|
82
|
+
runOnJS(reanimatedOnDidAnimated)(key, completed, recentValue, {
|
|
83
|
+
attemptedValue: value
|
|
84
|
+
});
|
|
75
85
|
if (isExiting) {
|
|
76
86
|
exitingStyleProps[key] = false;
|
|
77
87
|
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean);
|
|
78
88
|
if (!areStylesExiting) {
|
|
79
|
-
|
|
89
|
+
if (safeToUnmount) {
|
|
90
|
+
runOnJS(safeToUnmount)();
|
|
91
|
+
}
|
|
80
92
|
}
|
|
81
93
|
}
|
|
82
94
|
}, "callback");
|
|
@@ -89,22 +101,13 @@ function createAnimations(animations) {
|
|
|
89
101
|
for (const transformObject of value) {
|
|
90
102
|
const key2 = Object.keys(transformObject)[0];
|
|
91
103
|
const transformValue = transformObject[key2];
|
|
92
|
-
const transform = {};
|
|
93
|
-
if (((_a = transition == null ? void 0 : transition[key2]) == null ? void 0 : _a.delay) != null) {
|
|
94
|
-
delayMs = (_c = (_b = transition == null ? void 0 : transition[key2]) == null ? void 0 : _b.delay) != null ? _c : null;
|
|
95
|
-
}
|
|
96
104
|
let finalValue2 = animation(transformValue, config, callback);
|
|
97
105
|
if (shouldRepeat) {
|
|
98
106
|
finalValue2 = withRepeat(finalValue2, repeatCount, repeatReverse);
|
|
99
107
|
}
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
}
|
|
103
|
-
transform[key2] = finalValue2;
|
|
104
|
-
}
|
|
105
|
-
if (Object.keys(transform).length) {
|
|
106
|
-
final["transform"].push(transform);
|
|
107
|
-
}
|
|
108
|
+
final["transform"].push({
|
|
109
|
+
[key2]: finalValue2
|
|
110
|
+
});
|
|
108
111
|
}
|
|
109
112
|
continue;
|
|
110
113
|
}
|
|
@@ -133,36 +136,29 @@ function createAnimations(animations) {
|
|
|
133
136
|
final[key] = finalValue;
|
|
134
137
|
}
|
|
135
138
|
}
|
|
139
|
+
if (process.env.NODE_ENV === "development" && props["debug"]) {
|
|
140
|
+
console.log("animation style", final);
|
|
141
|
+
}
|
|
136
142
|
return final;
|
|
137
|
-
},
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
isPresent,
|
|
144
|
-
onDidAnimate,
|
|
145
|
-
reanimatedOnDidAnimated,
|
|
146
|
-
reanimatedSafeToUnmount
|
|
147
|
-
]);
|
|
148
|
-
return {
|
|
149
|
-
style: animatedStyle
|
|
150
|
-
};
|
|
143
|
+
}, args);
|
|
144
|
+
return useMemo(() => {
|
|
145
|
+
return {
|
|
146
|
+
style: [nonAnimatedStyle, animatedStyle]
|
|
147
|
+
};
|
|
148
|
+
}, args);
|
|
151
149
|
}
|
|
152
150
|
};
|
|
153
151
|
}
|
|
154
152
|
__name(createAnimations, "createAnimations");
|
|
155
153
|
function animationDelay(key, transition, defaultDelay) {
|
|
156
|
-
var _a, _b;
|
|
157
154
|
"worklet";
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
delayMs = transition.delay;
|
|
155
|
+
if (!transition || !transition[key] || transition[key].delayMs === void 0 || transition[key].delayMs === null) {
|
|
156
|
+
return {
|
|
157
|
+
delayMs: null
|
|
158
|
+
};
|
|
163
159
|
}
|
|
164
160
|
return {
|
|
165
|
-
delayMs
|
|
161
|
+
delayMs: transition[key].delayMs
|
|
166
162
|
};
|
|
167
163
|
}
|
|
168
164
|
__name(animationDelay, "animationDelay");
|
|
@@ -181,7 +177,7 @@ const isColor = /* @__PURE__ */ __name((styleKey) => {
|
|
|
181
177
|
].includes(styleKey);
|
|
182
178
|
}, "isColor");
|
|
183
179
|
function animationConfig(styleProp, transition) {
|
|
184
|
-
var _a, _b, _c, _d, _e, _f, _g
|
|
180
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
185
181
|
"worklet";
|
|
186
182
|
const key = styleProp;
|
|
187
183
|
let repeatCount = 0;
|
|
@@ -190,30 +186,23 @@ function animationConfig(styleProp, transition) {
|
|
|
190
186
|
if (isColor(key) || key === "opacity") {
|
|
191
187
|
animationType = "timing";
|
|
192
188
|
}
|
|
189
|
+
if (!transition) {
|
|
190
|
+
return {};
|
|
191
|
+
}
|
|
193
192
|
if ((_a = transition[key]) == null ? void 0 : _a.type) {
|
|
194
193
|
animationType = (_b = transition[key]) == null ? void 0 : _b.type;
|
|
195
|
-
} else if (transition
|
|
194
|
+
} else if (transition.type) {
|
|
196
195
|
animationType = transition.type;
|
|
197
196
|
}
|
|
198
|
-
const loop = (
|
|
197
|
+
const loop = ((_c = transition[key]) == null ? void 0 : _c.loop) || transition.loop || null;
|
|
199
198
|
if (loop != null) {
|
|
200
199
|
repeatCount = loop ? -1 : 0;
|
|
201
200
|
}
|
|
202
|
-
if (((_e = transition[key]) == null ? void 0 : _e.repeat) != null) {
|
|
203
|
-
repeatCount = (_f = transition[key]) == null ? void 0 : _f.repeat;
|
|
204
|
-
} else if ((transition == null ? void 0 : transition.repeat) != null) {
|
|
205
|
-
repeatCount = transition.repeat;
|
|
206
|
-
}
|
|
207
|
-
if (((_g = transition[key]) == null ? void 0 : _g.repeatReverse) != null) {
|
|
208
|
-
repeatReverse = (_h = transition[key]) == null ? void 0 : _h.repeatReverse;
|
|
209
|
-
} else if ((transition == null ? void 0 : transition.repeatReverse) != null) {
|
|
210
|
-
repeatReverse = transition.repeatReverse;
|
|
211
|
-
}
|
|
212
201
|
let config = {};
|
|
213
|
-
let animation
|
|
202
|
+
let animation;
|
|
214
203
|
if (animationType === "timing") {
|
|
215
|
-
const duration = (
|
|
216
|
-
const easing = (
|
|
204
|
+
const duration = (_e = (_d = transition[key]) == null ? void 0 : _d.duration) != null ? _e : transition == null ? void 0 : transition.duration;
|
|
205
|
+
const easing = (_g = (_f = transition[key]) == null ? void 0 : _f.easing) != null ? _g : transition == null ? void 0 : transition.easing;
|
|
217
206
|
if (easing) {
|
|
218
207
|
config["easing"] = easing;
|
|
219
208
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/animations-reanimated",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.205+6a67c74d",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"typings": "types",
|
|
@@ -12,12 +12,12 @@
|
|
|
12
12
|
"dist"
|
|
13
13
|
],
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@tamagui/animate-presence": "^1.0.0-beta.
|
|
16
|
-
"@tamagui/core": "^1.0.0-beta.
|
|
15
|
+
"@tamagui/animate-presence": "^1.0.0-beta.205+6a67c74d",
|
|
16
|
+
"@tamagui/core": "^1.0.0-beta.205+6a67c74d",
|
|
17
17
|
"react-native-reanimated": "^2.4.1"
|
|
18
18
|
},
|
|
19
19
|
"devDependencies": {
|
|
20
|
-
"@tamagui/build": "^1.0.0-beta.
|
|
20
|
+
"@tamagui/build": "^1.0.0-beta.205+6a67c74d"
|
|
21
21
|
},
|
|
22
22
|
"scripts": {
|
|
23
23
|
"build": "tamagui-build",
|
|
@@ -28,5 +28,5 @@
|
|
|
28
28
|
"publishConfig": {
|
|
29
29
|
"access": "public"
|
|
30
30
|
},
|
|
31
|
-
"gitHead": "
|
|
31
|
+
"gitHead": "6a67c74d67416b6c81169e1cc25e239ab935f651"
|
|
32
32
|
}
|