@tamagui/animations-reanimated 1.0.0-beta.3 → 1.0.0-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/createAnimations.js +73 -72
- package/dist/cjs/createAnimations.js.map +2 -2
- package/dist/esm/createAnimations.js +58 -72
- package/dist/esm/createAnimations.js.map +2 -2
- package/dist/jsx/createAnimations.js +58 -72
- package/package.json +4 -4
- package/types/createAnimations.d.ts +6 -0
- package/types/createAnimations.d.ts.map +1 -1
|
@@ -1,9 +1,26 @@
|
|
|
1
1
|
var __create = Object.create;
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
8
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
9
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
7
24
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
8
25
|
var __export = (target, all) => {
|
|
9
26
|
for (var name in all)
|
|
@@ -83,7 +100,6 @@ function createAnimations(animations) {
|
|
|
83
100
|
transform: []
|
|
84
101
|
};
|
|
85
102
|
const isExiting = isEntering === false;
|
|
86
|
-
const transition = animations[props.animation];
|
|
87
103
|
const exitingStyleProps = {};
|
|
88
104
|
if (exitStyle) {
|
|
89
105
|
for (const key of Object.keys(exitStyle)) {
|
|
@@ -92,8 +108,8 @@ function createAnimations(animations) {
|
|
|
92
108
|
}
|
|
93
109
|
for (const key in style) {
|
|
94
110
|
const value = style[key];
|
|
95
|
-
const
|
|
96
|
-
const { animation, config, shouldRepeat, repeatCount, repeatReverse } =
|
|
111
|
+
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
112
|
+
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(key, animationConfig, props.animateOnly);
|
|
97
113
|
const callback = /* @__PURE__ */ __name((completed, recentValue) => {
|
|
98
114
|
(0, import_react_native_reanimated.runOnJS)(reanimatedOnDidAnimated)(key, completed, recentValue, {
|
|
99
115
|
attemptedValue: value
|
|
@@ -108,7 +124,7 @@ function createAnimations(animations) {
|
|
|
108
124
|
}
|
|
109
125
|
}
|
|
110
126
|
}, "callback");
|
|
111
|
-
let { delayMs = null } = animationDelay(key,
|
|
127
|
+
let { delayMs = null } = animationDelay(key, animationConfig, delay);
|
|
112
128
|
if (key === "transform") {
|
|
113
129
|
if (!Array.isArray(value)) {
|
|
114
130
|
console.error(`Invalid transform value. Needs to be an array.`);
|
|
@@ -166,15 +182,47 @@ function createAnimations(animations) {
|
|
|
166
182
|
};
|
|
167
183
|
}
|
|
168
184
|
__name(createAnimations, "createAnimations");
|
|
169
|
-
function
|
|
185
|
+
function getAnimationConfig(key, animations, animation) {
|
|
186
|
+
var _a;
|
|
187
|
+
if (typeof animation === "string") {
|
|
188
|
+
return animations[animation];
|
|
189
|
+
}
|
|
190
|
+
let type = "";
|
|
191
|
+
let extraConf;
|
|
192
|
+
if (Array.isArray(animation)) {
|
|
193
|
+
type = animation[0];
|
|
194
|
+
const conf = (_a = animation[1]) == null ? void 0 : _a[key];
|
|
195
|
+
if (conf) {
|
|
196
|
+
if (typeof conf === "string") {
|
|
197
|
+
type = conf;
|
|
198
|
+
} else {
|
|
199
|
+
type = conf.type || type;
|
|
200
|
+
extraConf = conf;
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
} else {
|
|
204
|
+
const val = animation == null ? void 0 : animation[key];
|
|
205
|
+
type = val == null ? void 0 : val.type;
|
|
206
|
+
extraConf = val;
|
|
207
|
+
}
|
|
208
|
+
const found = animations[type];
|
|
209
|
+
if (!found) {
|
|
210
|
+
throw new Error(`No animation of type "${type}" for key "${key}"`);
|
|
211
|
+
}
|
|
212
|
+
return __spreadProps(__spreadValues(__spreadValues({}, found), extraConf), {
|
|
213
|
+
type: found.type
|
|
214
|
+
});
|
|
215
|
+
}
|
|
216
|
+
__name(getAnimationConfig, "getAnimationConfig");
|
|
217
|
+
function animationDelay(key, animation, defaultDelay) {
|
|
170
218
|
"worklet";
|
|
171
|
-
if (!
|
|
219
|
+
if (!animation || !animation[key] || animation[key].delayMs === void 0 || animation[key].delayMs === null) {
|
|
172
220
|
return {
|
|
173
221
|
delayMs: null
|
|
174
222
|
};
|
|
175
223
|
}
|
|
176
224
|
return {
|
|
177
|
-
delayMs:
|
|
225
|
+
delayMs: animation[key].delayMs
|
|
178
226
|
};
|
|
179
227
|
}
|
|
180
228
|
__name(animationDelay, "animationDelay");
|
|
@@ -192,77 +240,39 @@ const isColor = /* @__PURE__ */ __name((styleKey) => {
|
|
|
192
240
|
"color"
|
|
193
241
|
].includes(styleKey);
|
|
194
242
|
}, "isColor");
|
|
195
|
-
function
|
|
196
|
-
var _a, _b, _c, _d, _e;
|
|
243
|
+
function getAnimation(key, animationConfig, animateOnly) {
|
|
197
244
|
"worklet";
|
|
198
|
-
|
|
245
|
+
if (!animationConfig || animateOnly && !animateOnly.includes(key)) {
|
|
246
|
+
return {};
|
|
247
|
+
}
|
|
199
248
|
let repeatCount = 0;
|
|
200
|
-
let repeatReverse =
|
|
201
|
-
let animationType = "spring";
|
|
249
|
+
let repeatReverse = animationConfig.repeatReverse || false;
|
|
250
|
+
let animationType = (animationConfig == null ? void 0 : animationConfig.type) || "spring";
|
|
202
251
|
if (isColor(key) || key === "opacity") {
|
|
203
252
|
animationType = "timing";
|
|
204
253
|
}
|
|
205
|
-
if (
|
|
206
|
-
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
animationType = transition.type;
|
|
212
|
-
}
|
|
213
|
-
const loop = ((_c = transition[key]) == null ? void 0 : _c.loop) || transition.loop || null;
|
|
214
|
-
if (loop != null) {
|
|
215
|
-
repeatCount = loop ? -1 : 0;
|
|
254
|
+
if ("repeat" in animationConfig) {
|
|
255
|
+
repeatCount = animationConfig.repeat || 0;
|
|
256
|
+
} else {
|
|
257
|
+
if (animationConfig.loop) {
|
|
258
|
+
repeatCount = animationConfig.loop ? -1 : 0;
|
|
259
|
+
}
|
|
216
260
|
}
|
|
217
|
-
let config =
|
|
261
|
+
let config = animationConfig;
|
|
218
262
|
let animation;
|
|
219
263
|
if (animationType === "timing") {
|
|
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);
|
|
222
|
-
if (easing) {
|
|
223
|
-
config["easing"] = easing;
|
|
224
|
-
}
|
|
225
|
-
if (duration != null) {
|
|
226
|
-
config["duration"] = duration;
|
|
227
|
-
}
|
|
228
264
|
animation = import_react_native_reanimated.withTiming;
|
|
229
265
|
} else if (animationType === "spring") {
|
|
230
266
|
animation = import_react_native_reanimated.withSpring;
|
|
231
|
-
config = {};
|
|
232
|
-
configKeys.forEach((configKey) => {
|
|
233
|
-
var _a2;
|
|
234
|
-
"worklet";
|
|
235
|
-
const styleSpecificConfig = (_a2 = transition == null ? void 0 : transition[key]) == null ? void 0 : _a2[configKey];
|
|
236
|
-
const transitionConfigForKey = transition == null ? void 0 : transition[configKey];
|
|
237
|
-
if (styleSpecificConfig != null) {
|
|
238
|
-
config[configKey] = styleSpecificConfig;
|
|
239
|
-
} else if (transitionConfigForKey != null) {
|
|
240
|
-
config[configKey] = transitionConfigForKey;
|
|
241
|
-
}
|
|
242
|
-
});
|
|
243
267
|
} else if (animationType === "decay") {
|
|
244
268
|
animation = import_react_native_reanimated.withDecay;
|
|
245
|
-
config = {
|
|
269
|
+
config = config || {
|
|
246
270
|
velocity: 2,
|
|
247
271
|
deceleration: 2
|
|
248
272
|
};
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
"deceleration",
|
|
253
|
-
"velocityFactor"
|
|
254
|
-
];
|
|
255
|
-
configKeys2.forEach((configKey) => {
|
|
256
|
-
var _a2;
|
|
257
|
-
"worklet";
|
|
258
|
-
const styleSpecificConfig = (_a2 = transition == null ? void 0 : transition[key]) == null ? void 0 : _a2[configKey];
|
|
259
|
-
const transitionConfigForKey = transition == null ? void 0 : transition[configKey];
|
|
260
|
-
if (styleSpecificConfig != null) {
|
|
261
|
-
config[configKey] = styleSpecificConfig;
|
|
262
|
-
} else if (transitionConfigForKey != null) {
|
|
263
|
-
config[configKey] = transitionConfigForKey;
|
|
264
|
-
}
|
|
265
|
-
});
|
|
273
|
+
} else {
|
|
274
|
+
console.warn("no type of animation?", animationType);
|
|
275
|
+
animation = import_react_native_reanimated.withSpring;
|
|
266
276
|
}
|
|
267
277
|
return {
|
|
268
278
|
animation,
|
|
@@ -272,16 +282,7 @@ function animationConfig(styleProp, transition) {
|
|
|
272
282
|
shouldRepeat: !!repeatCount
|
|
273
283
|
};
|
|
274
284
|
}
|
|
275
|
-
__name(
|
|
276
|
-
const configKeys = [
|
|
277
|
-
"damping",
|
|
278
|
-
"mass",
|
|
279
|
-
"overshootClamping",
|
|
280
|
-
"restDisplacementThreshold",
|
|
281
|
-
"restSpeedThreshold",
|
|
282
|
-
"stiffness",
|
|
283
|
-
"velocity"
|
|
284
|
-
];
|
|
285
|
+
__name(getAnimation, "getAnimation");
|
|
285
286
|
// Annotate the CommonJS export names for ESM import in node:
|
|
286
287
|
0 && (module.exports = {
|
|
287
288
|
createAnimations
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
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(all),\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": "
|
|
4
|
+
"sourcesContent": ["import { AnimatePresenceContext, useEntering } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationKeys, AnimationProp } 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; 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// | ({ 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(all),\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\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 animationConfig = getAnimationConfig(key, animations, props.animation) as any\n const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(\n key,\n animationConfig,\n props.animateOnly\n )\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, animationConfig, 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 getAnimationConfig(key: string, animations: AnimationsConfig, animation?: AnimationProp) {\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]?.[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: any\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
|
}
|
|
@@ -67,7 +67,6 @@ function createAnimations(animations) {
|
|
|
67
67
|
transform: []
|
|
68
68
|
};
|
|
69
69
|
const isExiting = isEntering === false;
|
|
70
|
-
const transition = animations[props.animation];
|
|
71
70
|
const exitingStyleProps = {};
|
|
72
71
|
if (exitStyle) {
|
|
73
72
|
for (const key of Object.keys(exitStyle)) {
|
|
@@ -76,8 +75,8 @@ function createAnimations(animations) {
|
|
|
76
75
|
}
|
|
77
76
|
for (const key in style) {
|
|
78
77
|
const value = style[key];
|
|
79
|
-
const
|
|
80
|
-
const { animation, config, shouldRepeat, repeatCount, repeatReverse } =
|
|
78
|
+
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
79
|
+
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(key, animationConfig, props.animateOnly);
|
|
81
80
|
const callback = /* @__PURE__ */ __name((completed, recentValue) => {
|
|
82
81
|
runOnJS(reanimatedOnDidAnimated)(key, completed, recentValue, {
|
|
83
82
|
attemptedValue: value
|
|
@@ -92,7 +91,7 @@ function createAnimations(animations) {
|
|
|
92
91
|
}
|
|
93
92
|
}
|
|
94
93
|
}, "callback");
|
|
95
|
-
let { delayMs = null } = animationDelay(key,
|
|
94
|
+
let { delayMs = null } = animationDelay(key, animationConfig, delay);
|
|
96
95
|
if (key === "transform") {
|
|
97
96
|
if (!Array.isArray(value)) {
|
|
98
97
|
console.error(`Invalid transform value. Needs to be an array.`);
|
|
@@ -150,15 +149,49 @@ function createAnimations(animations) {
|
|
|
150
149
|
};
|
|
151
150
|
}
|
|
152
151
|
__name(createAnimations, "createAnimations");
|
|
153
|
-
function
|
|
152
|
+
function getAnimationConfig(key, animations, animation) {
|
|
153
|
+
var _a;
|
|
154
|
+
if (typeof animation === "string") {
|
|
155
|
+
return animations[animation];
|
|
156
|
+
}
|
|
157
|
+
let type = "";
|
|
158
|
+
let extraConf;
|
|
159
|
+
if (Array.isArray(animation)) {
|
|
160
|
+
type = animation[0];
|
|
161
|
+
const conf = (_a = animation[1]) == null ? void 0 : _a[key];
|
|
162
|
+
if (conf) {
|
|
163
|
+
if (typeof conf === "string") {
|
|
164
|
+
type = conf;
|
|
165
|
+
} else {
|
|
166
|
+
type = conf.type || type;
|
|
167
|
+
extraConf = conf;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
} else {
|
|
171
|
+
const val = animation == null ? void 0 : animation[key];
|
|
172
|
+
type = val == null ? void 0 : val.type;
|
|
173
|
+
extraConf = val;
|
|
174
|
+
}
|
|
175
|
+
const found = animations[type];
|
|
176
|
+
if (!found) {
|
|
177
|
+
throw new Error(`No animation of type "${type}" for key "${key}"`);
|
|
178
|
+
}
|
|
179
|
+
return {
|
|
180
|
+
...found,
|
|
181
|
+
...extraConf,
|
|
182
|
+
type: found.type
|
|
183
|
+
};
|
|
184
|
+
}
|
|
185
|
+
__name(getAnimationConfig, "getAnimationConfig");
|
|
186
|
+
function animationDelay(key, animation, defaultDelay) {
|
|
154
187
|
"worklet";
|
|
155
|
-
if (!
|
|
188
|
+
if (!animation || !animation[key] || animation[key].delayMs === void 0 || animation[key].delayMs === null) {
|
|
156
189
|
return {
|
|
157
190
|
delayMs: null
|
|
158
191
|
};
|
|
159
192
|
}
|
|
160
193
|
return {
|
|
161
|
-
delayMs:
|
|
194
|
+
delayMs: animation[key].delayMs
|
|
162
195
|
};
|
|
163
196
|
}
|
|
164
197
|
__name(animationDelay, "animationDelay");
|
|
@@ -176,77 +209,39 @@ const isColor = /* @__PURE__ */ __name((styleKey) => {
|
|
|
176
209
|
"color"
|
|
177
210
|
].includes(styleKey);
|
|
178
211
|
}, "isColor");
|
|
179
|
-
function
|
|
180
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
212
|
+
function getAnimation(key, animationConfig, animateOnly) {
|
|
181
213
|
"worklet";
|
|
182
|
-
|
|
214
|
+
if (!animationConfig || animateOnly && !animateOnly.includes(key)) {
|
|
215
|
+
return {};
|
|
216
|
+
}
|
|
183
217
|
let repeatCount = 0;
|
|
184
|
-
let repeatReverse =
|
|
185
|
-
let animationType = "spring";
|
|
218
|
+
let repeatReverse = animationConfig.repeatReverse || false;
|
|
219
|
+
let animationType = (animationConfig == null ? void 0 : animationConfig.type) || "spring";
|
|
186
220
|
if (isColor(key) || key === "opacity") {
|
|
187
221
|
animationType = "timing";
|
|
188
222
|
}
|
|
189
|
-
if (
|
|
190
|
-
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
animationType = transition.type;
|
|
196
|
-
}
|
|
197
|
-
const loop = ((_c = transition[key]) == null ? void 0 : _c.loop) || transition.loop || null;
|
|
198
|
-
if (loop != null) {
|
|
199
|
-
repeatCount = loop ? -1 : 0;
|
|
223
|
+
if ("repeat" in animationConfig) {
|
|
224
|
+
repeatCount = animationConfig.repeat || 0;
|
|
225
|
+
} else {
|
|
226
|
+
if (animationConfig.loop) {
|
|
227
|
+
repeatCount = animationConfig.loop ? -1 : 0;
|
|
228
|
+
}
|
|
200
229
|
}
|
|
201
|
-
let config =
|
|
230
|
+
let config = animationConfig;
|
|
202
231
|
let animation;
|
|
203
232
|
if (animationType === "timing") {
|
|
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;
|
|
206
|
-
if (easing) {
|
|
207
|
-
config["easing"] = easing;
|
|
208
|
-
}
|
|
209
|
-
if (duration != null) {
|
|
210
|
-
config["duration"] = duration;
|
|
211
|
-
}
|
|
212
233
|
animation = withTiming;
|
|
213
234
|
} else if (animationType === "spring") {
|
|
214
235
|
animation = withSpring;
|
|
215
|
-
config = {};
|
|
216
|
-
configKeys.forEach((configKey) => {
|
|
217
|
-
var _a2;
|
|
218
|
-
"worklet";
|
|
219
|
-
const styleSpecificConfig = (_a2 = transition == null ? void 0 : transition[key]) == null ? void 0 : _a2[configKey];
|
|
220
|
-
const transitionConfigForKey = transition == null ? void 0 : transition[configKey];
|
|
221
|
-
if (styleSpecificConfig != null) {
|
|
222
|
-
config[configKey] = styleSpecificConfig;
|
|
223
|
-
} else if (transitionConfigForKey != null) {
|
|
224
|
-
config[configKey] = transitionConfigForKey;
|
|
225
|
-
}
|
|
226
|
-
});
|
|
227
236
|
} else if (animationType === "decay") {
|
|
228
237
|
animation = withDecay;
|
|
229
|
-
config = {
|
|
238
|
+
config = config || {
|
|
230
239
|
velocity: 2,
|
|
231
240
|
deceleration: 2
|
|
232
241
|
};
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
"deceleration",
|
|
237
|
-
"velocityFactor"
|
|
238
|
-
];
|
|
239
|
-
configKeys2.forEach((configKey) => {
|
|
240
|
-
var _a2;
|
|
241
|
-
"worklet";
|
|
242
|
-
const styleSpecificConfig = (_a2 = transition == null ? void 0 : transition[key]) == null ? void 0 : _a2[configKey];
|
|
243
|
-
const transitionConfigForKey = transition == null ? void 0 : transition[configKey];
|
|
244
|
-
if (styleSpecificConfig != null) {
|
|
245
|
-
config[configKey] = styleSpecificConfig;
|
|
246
|
-
} else if (transitionConfigForKey != null) {
|
|
247
|
-
config[configKey] = transitionConfigForKey;
|
|
248
|
-
}
|
|
249
|
-
});
|
|
242
|
+
} else {
|
|
243
|
+
console.warn("no type of animation?", animationType);
|
|
244
|
+
animation = withSpring;
|
|
250
245
|
}
|
|
251
246
|
return {
|
|
252
247
|
animation,
|
|
@@ -256,16 +251,7 @@ function animationConfig(styleProp, transition) {
|
|
|
256
251
|
shouldRepeat: !!repeatCount
|
|
257
252
|
};
|
|
258
253
|
}
|
|
259
|
-
__name(
|
|
260
|
-
const configKeys = [
|
|
261
|
-
"damping",
|
|
262
|
-
"mass",
|
|
263
|
-
"overshootClamping",
|
|
264
|
-
"restDisplacementThreshold",
|
|
265
|
-
"restSpeedThreshold",
|
|
266
|
-
"stiffness",
|
|
267
|
-
"velocity"
|
|
268
|
-
];
|
|
254
|
+
__name(getAnimation, "getAnimation");
|
|
269
255
|
export {
|
|
270
256
|
createAnimations
|
|
271
257
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
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(all),\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": ";;AAAA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBA,MAAM,eAAe,SAAS;AAC9B,MAAM,eAAe,SAAS;AAE9B,aAAa,iBAAiB;AAC9B,aAAa,iBAAiB;AAEvB,0BAAsD,YAAmC;AAC9F,SAAO;AAAA,IACL,cAAc;AAAA,IACd;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN,eAAe,CAAC,OAAO,YAAY;AAtCvC;AAuCM,YAAM,EAAE,SAAS,cAAc,OAAO,UAAU,OAAO,iBAAiB;AACxE,YAAM,CAAC,YAAY,iBAAiB,YAAY;AAChD,YAAM,WAAW,WAAW,sBAAsB;AAElD,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,MAAM,SAAS;AAAA,QACnB;AAAA,QACA,aAAa,qCAAU;AAAA,QACvB,cAAc,qCAAU;AAAA,MAC1B,CAAC;AACD,YAAM,CAAC,gBAAgB,oBAAoB,CAAC,CAAC,GAAG,CAAC,CAAC;AAClD,YAAM,mBAAmB;AAAA,QACvB,WAAW;AAAA,QACX,SAAS;AAAA,MACX;AACA,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,gBAAgB,iBAAiB,MAAM;AAC3C,cAAM,QAAQ;AAEd,cAAM,QAAQ;AAAA,UACZ,WAAW,CAAC;AAAA,QACd;AAEA,cAAM,YAAY,eAAe;
|
|
4
|
+
"sourcesContent": ["import { AnimatePresenceContext, useEntering } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationKeys, AnimationProp } 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; 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// | ({ 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(all),\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\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 animationConfig = getAnimationConfig(key, animations, props.animation) as any\n const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(\n key,\n animationConfig,\n props.animateOnly\n )\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, animationConfig, 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 getAnimationConfig(key: string, animations: AnimationsConfig, animation?: AnimationProp) {\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]?.[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: any\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;AAuBA,MAAM,eAAe,SAAS;AAC9B,MAAM,eAAe,SAAS;AAE9B,aAAa,iBAAiB;AAC9B,aAAa,iBAAiB;AAEvB,0BAAsD,YAAmC;AAC9F,SAAO;AAAA,IACL,cAAc;AAAA,IACd;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN,eAAe,CAAC,OAAO,YAAY;AAtCvC;AAuCM,YAAM,EAAE,SAAS,cAAc,OAAO,UAAU,OAAO,iBAAiB;AACxE,YAAM,CAAC,YAAY,iBAAiB,YAAY;AAChD,YAAM,WAAW,WAAW,sBAAsB;AAElD,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,MAAM,SAAS;AAAA,QACnB;AAAA,QACA,aAAa,qCAAU;AAAA,QACvB,cAAc,qCAAU;AAAA,MAC1B,CAAC;AACD,YAAM,CAAC,gBAAgB,oBAAoB,CAAC,CAAC,GAAG,CAAC,CAAC;AAClD,YAAM,mBAAmB;AAAA,QACvB,WAAW;AAAA,QACX,SAAS;AAAA,MACX;AACA,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,gBAAgB,iBAAiB,MAAM;AAC3C,cAAM,QAAQ;AAEd,cAAM,QAAQ;AAAA,UACZ,WAAW,CAAC;AAAA,QACd;AAEA,cAAM,YAAY,eAAe;AAEjC,cAAM,oBAA6C,CAAC;AACpD,YAAI,WAAW;AACb,qBAAW,OAAO,OAAO,KAAK,SAAS,GAAG;AACxC,8BAAkB,OAAO;AAAA,UAC3B;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,WAAsD,wBAAC,WAAW,gBAAgB;AACtF,oBAAQ,uBAAuB,EAAE,KAAK,WAAW,aAAa;AAAA,cAC5D,gBAAgB;AAAA,YAClB,CAAC;AACD,gBAAI,WAAW;AACb,gCAAkB,OAAO;AACzB,oBAAM,mBAAmB,OAAO,OAAO,iBAAiB,EAAE,KAAK,OAAO;AAEtE,kBAAI,CAAC,kBAAkB;AACrB,oBAAI,eAAe;AACjB,0BAAQ,aAAa,EAAE;AAAA,gBACzB;AAAA,cACF;AAAA,YACF;AAAA,UACF,GAd4D;AAgB5D,cAAI,EAAE,UAAU,SAAS,eAAe,KAAK,iBAAiB,KAAK;AAEnE,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,UAAU,gBAAgB,QAAQ,QAAQ;AAC3D,kBAAI,cAAc;AAChB,8BAAa,WAAW,aAAY,aAAa,aAAa;AAAA,cAChE;AACA,oBAAM,aAAa,KAAK;AAAA,iBACrB,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,UAAU,OAAO,QAAQ,QAAQ;AAClD,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,UAAU,OAAO,QAAQ,QAAQ;AAClD,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,YAAI,QAAQ,IAAI,aAAa,iBAAiB,MAAM,UAAU;AAC5D,kBAAQ,IAAI,mBAAmB,KAAK;AAAA,QACtC;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;AAlKgB;AAoKhB,4BAA4B,KAAa,YAA8B,WAA2B;AApMlG;AAqME,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,gBAAU,OAAV,mBAAe;AAC5B,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;AAAA,OACF;AAAA,OACA;AAAA,IACH,MAAM,MAAM;AAAA,EACd;AACF;AA/BS;AAiCT,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;AAnBS;AA8DT,MAAM,UAAU,wBAAC,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,GAbgB;AAehB,sBACE,KACA,iBACA,aACA;AACA;AACA,MAAI,CAAC,mBAAoB,eAAe,CAAC,YAAY,SAAS,GAAG,GAAI;AACnE,WAAO,CAAC;AAAA,EACV;AAEA,MAAI,cAAc;AAClB,MAAI,gBAAgB,gBAAgB,iBAAiB;AACrD,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;AAnDS;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -67,7 +67,6 @@ function createAnimations(animations) {
|
|
|
67
67
|
transform: []
|
|
68
68
|
};
|
|
69
69
|
const isExiting = isEntering === false;
|
|
70
|
-
const transition = animations[props.animation];
|
|
71
70
|
const exitingStyleProps = {};
|
|
72
71
|
if (exitStyle) {
|
|
73
72
|
for (const key of Object.keys(exitStyle)) {
|
|
@@ -76,8 +75,8 @@ function createAnimations(animations) {
|
|
|
76
75
|
}
|
|
77
76
|
for (const key in style) {
|
|
78
77
|
const value = style[key];
|
|
79
|
-
const
|
|
80
|
-
const { animation, config, shouldRepeat, repeatCount, repeatReverse } =
|
|
78
|
+
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
79
|
+
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(key, animationConfig, props.animateOnly);
|
|
81
80
|
const callback = /* @__PURE__ */ __name((completed, recentValue) => {
|
|
82
81
|
runOnJS(reanimatedOnDidAnimated)(key, completed, recentValue, {
|
|
83
82
|
attemptedValue: value
|
|
@@ -92,7 +91,7 @@ function createAnimations(animations) {
|
|
|
92
91
|
}
|
|
93
92
|
}
|
|
94
93
|
}, "callback");
|
|
95
|
-
let { delayMs = null } = animationDelay(key,
|
|
94
|
+
let { delayMs = null } = animationDelay(key, animationConfig, delay);
|
|
96
95
|
if (key === "transform") {
|
|
97
96
|
if (!Array.isArray(value)) {
|
|
98
97
|
console.error(`Invalid transform value. Needs to be an array.`);
|
|
@@ -150,15 +149,49 @@ function createAnimations(animations) {
|
|
|
150
149
|
};
|
|
151
150
|
}
|
|
152
151
|
__name(createAnimations, "createAnimations");
|
|
153
|
-
function
|
|
152
|
+
function getAnimationConfig(key, animations, animation) {
|
|
153
|
+
var _a;
|
|
154
|
+
if (typeof animation === "string") {
|
|
155
|
+
return animations[animation];
|
|
156
|
+
}
|
|
157
|
+
let type = "";
|
|
158
|
+
let extraConf;
|
|
159
|
+
if (Array.isArray(animation)) {
|
|
160
|
+
type = animation[0];
|
|
161
|
+
const conf = (_a = animation[1]) == null ? void 0 : _a[key];
|
|
162
|
+
if (conf) {
|
|
163
|
+
if (typeof conf === "string") {
|
|
164
|
+
type = conf;
|
|
165
|
+
} else {
|
|
166
|
+
type = conf.type || type;
|
|
167
|
+
extraConf = conf;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
} else {
|
|
171
|
+
const val = animation == null ? void 0 : animation[key];
|
|
172
|
+
type = val == null ? void 0 : val.type;
|
|
173
|
+
extraConf = val;
|
|
174
|
+
}
|
|
175
|
+
const found = animations[type];
|
|
176
|
+
if (!found) {
|
|
177
|
+
throw new Error(`No animation of type "${type}" for key "${key}"`);
|
|
178
|
+
}
|
|
179
|
+
return {
|
|
180
|
+
...found,
|
|
181
|
+
...extraConf,
|
|
182
|
+
type: found.type
|
|
183
|
+
};
|
|
184
|
+
}
|
|
185
|
+
__name(getAnimationConfig, "getAnimationConfig");
|
|
186
|
+
function animationDelay(key, animation, defaultDelay) {
|
|
154
187
|
"worklet";
|
|
155
|
-
if (!
|
|
188
|
+
if (!animation || !animation[key] || animation[key].delayMs === void 0 || animation[key].delayMs === null) {
|
|
156
189
|
return {
|
|
157
190
|
delayMs: null
|
|
158
191
|
};
|
|
159
192
|
}
|
|
160
193
|
return {
|
|
161
|
-
delayMs:
|
|
194
|
+
delayMs: animation[key].delayMs
|
|
162
195
|
};
|
|
163
196
|
}
|
|
164
197
|
__name(animationDelay, "animationDelay");
|
|
@@ -176,77 +209,39 @@ const isColor = /* @__PURE__ */ __name((styleKey) => {
|
|
|
176
209
|
"color"
|
|
177
210
|
].includes(styleKey);
|
|
178
211
|
}, "isColor");
|
|
179
|
-
function
|
|
180
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
212
|
+
function getAnimation(key, animationConfig, animateOnly) {
|
|
181
213
|
"worklet";
|
|
182
|
-
|
|
214
|
+
if (!animationConfig || animateOnly && !animateOnly.includes(key)) {
|
|
215
|
+
return {};
|
|
216
|
+
}
|
|
183
217
|
let repeatCount = 0;
|
|
184
|
-
let repeatReverse =
|
|
185
|
-
let animationType = "spring";
|
|
218
|
+
let repeatReverse = animationConfig.repeatReverse || false;
|
|
219
|
+
let animationType = (animationConfig == null ? void 0 : animationConfig.type) || "spring";
|
|
186
220
|
if (isColor(key) || key === "opacity") {
|
|
187
221
|
animationType = "timing";
|
|
188
222
|
}
|
|
189
|
-
if (
|
|
190
|
-
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
animationType = transition.type;
|
|
196
|
-
}
|
|
197
|
-
const loop = ((_c = transition[key]) == null ? void 0 : _c.loop) || transition.loop || null;
|
|
198
|
-
if (loop != null) {
|
|
199
|
-
repeatCount = loop ? -1 : 0;
|
|
223
|
+
if ("repeat" in animationConfig) {
|
|
224
|
+
repeatCount = animationConfig.repeat || 0;
|
|
225
|
+
} else {
|
|
226
|
+
if (animationConfig.loop) {
|
|
227
|
+
repeatCount = animationConfig.loop ? -1 : 0;
|
|
228
|
+
}
|
|
200
229
|
}
|
|
201
|
-
let config =
|
|
230
|
+
let config = animationConfig;
|
|
202
231
|
let animation;
|
|
203
232
|
if (animationType === "timing") {
|
|
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;
|
|
206
|
-
if (easing) {
|
|
207
|
-
config["easing"] = easing;
|
|
208
|
-
}
|
|
209
|
-
if (duration != null) {
|
|
210
|
-
config["duration"] = duration;
|
|
211
|
-
}
|
|
212
233
|
animation = withTiming;
|
|
213
234
|
} else if (animationType === "spring") {
|
|
214
235
|
animation = withSpring;
|
|
215
|
-
config = {};
|
|
216
|
-
configKeys.forEach((configKey) => {
|
|
217
|
-
var _a2;
|
|
218
|
-
"worklet";
|
|
219
|
-
const styleSpecificConfig = (_a2 = transition == null ? void 0 : transition[key]) == null ? void 0 : _a2[configKey];
|
|
220
|
-
const transitionConfigForKey = transition == null ? void 0 : transition[configKey];
|
|
221
|
-
if (styleSpecificConfig != null) {
|
|
222
|
-
config[configKey] = styleSpecificConfig;
|
|
223
|
-
} else if (transitionConfigForKey != null) {
|
|
224
|
-
config[configKey] = transitionConfigForKey;
|
|
225
|
-
}
|
|
226
|
-
});
|
|
227
236
|
} else if (animationType === "decay") {
|
|
228
237
|
animation = withDecay;
|
|
229
|
-
config = {
|
|
238
|
+
config = config || {
|
|
230
239
|
velocity: 2,
|
|
231
240
|
deceleration: 2
|
|
232
241
|
};
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
"deceleration",
|
|
237
|
-
"velocityFactor"
|
|
238
|
-
];
|
|
239
|
-
configKeys2.forEach((configKey) => {
|
|
240
|
-
var _a2;
|
|
241
|
-
"worklet";
|
|
242
|
-
const styleSpecificConfig = (_a2 = transition == null ? void 0 : transition[key]) == null ? void 0 : _a2[configKey];
|
|
243
|
-
const transitionConfigForKey = transition == null ? void 0 : transition[configKey];
|
|
244
|
-
if (styleSpecificConfig != null) {
|
|
245
|
-
config[configKey] = styleSpecificConfig;
|
|
246
|
-
} else if (transitionConfigForKey != null) {
|
|
247
|
-
config[configKey] = transitionConfigForKey;
|
|
248
|
-
}
|
|
249
|
-
});
|
|
242
|
+
} else {
|
|
243
|
+
console.warn("no type of animation?", animationType);
|
|
244
|
+
animation = withSpring;
|
|
250
245
|
}
|
|
251
246
|
return {
|
|
252
247
|
animation,
|
|
@@ -256,16 +251,7 @@ function animationConfig(styleProp, transition) {
|
|
|
256
251
|
shouldRepeat: !!repeatCount
|
|
257
252
|
};
|
|
258
253
|
}
|
|
259
|
-
__name(
|
|
260
|
-
const configKeys = [
|
|
261
|
-
"damping",
|
|
262
|
-
"mass",
|
|
263
|
-
"overshootClamping",
|
|
264
|
-
"restDisplacementThreshold",
|
|
265
|
-
"restSpeedThreshold",
|
|
266
|
-
"stiffness",
|
|
267
|
-
"velocity"
|
|
268
|
-
];
|
|
254
|
+
__name(getAnimation, "getAnimation");
|
|
269
255
|
export {
|
|
270
256
|
createAnimations
|
|
271
257
|
};
|
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.6",
|
|
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.6",
|
|
16
|
+
"@tamagui/core": "^1.0.0-beta.6",
|
|
17
17
|
"react-native-reanimated": "^2.3.1"
|
|
18
18
|
},
|
|
19
19
|
"devDependencies": {
|
|
20
|
-
"@tamagui/build": "^1.0.0-beta.
|
|
20
|
+
"@tamagui/build": "^1.0.0-beta.6"
|
|
21
21
|
},
|
|
22
22
|
"scripts": {
|
|
23
23
|
"build": "tamagui-build",
|
|
@@ -6,12 +6,18 @@ declare type AnimationsConfig<A extends Object = any> = {
|
|
|
6
6
|
declare type AnimationConfig = ({
|
|
7
7
|
type: 'timing';
|
|
8
8
|
loop?: number;
|
|
9
|
+
repeat?: number;
|
|
10
|
+
repeatReverse?: boolean;
|
|
9
11
|
} & WithTimingConfig) | ({
|
|
10
12
|
type: 'spring';
|
|
11
13
|
loop?: number;
|
|
14
|
+
repeat?: number;
|
|
15
|
+
repeatReverse?: boolean;
|
|
12
16
|
} & WithSpringConfig) | ({
|
|
13
17
|
type: 'decay';
|
|
14
18
|
loop?: number;
|
|
19
|
+
repeat?: number;
|
|
20
|
+
repeatReverse?: boolean;
|
|
15
21
|
} & WithDecayConfig);
|
|
16
22
|
export declare function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A>;
|
|
17
23
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAgC,MAAM,eAAe,CAAA;AAE7E,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,CAkK9F"}
|