@tamagui/animations-reanimated 1.0.1-beta.68 → 1.0.1-beta.71
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 +44 -23
- package/dist/cjs/createAnimations.js.map +2 -2
- package/dist/esm/createAnimations.js +45 -24
- package/dist/esm/createAnimations.js.map +2 -2
- package/dist/jsx/createAnimations.js +45 -24
- package/package.json +5 -4
- package/src/createAnimations.tsx +68 -27
- package/types/createAnimations.d.ts +0 -0
- package/types/createAnimations.d.ts.map +1 -1
- package/types/index.d.ts +0 -0
- package/types/index.d.ts.map +0 -0
- package/types/polyfill.d.ts +0 -0
- package/types/polyfill.d.ts.map +0 -0
|
@@ -57,8 +57,8 @@ function createAnimations(animations) {
|
|
|
57
57
|
useAnimations: (props, helpers) => {
|
|
58
58
|
var _a, _b;
|
|
59
59
|
const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
|
|
60
|
-
const [isEntering,
|
|
61
|
-
const presence = (0, import_react.useContext)(import_animate_presence.
|
|
60
|
+
const [isEntering, sendExitComplete] = (0, import_animate_presence.usePresence)();
|
|
61
|
+
const presence = (0, import_react.useContext)(import_animate_presence.PresenceContext);
|
|
62
62
|
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;
|
|
63
63
|
const reanimatedOnDidAnimated = (0, import_react.useCallback)((...args2) => {
|
|
64
64
|
onDidAnimate == null ? void 0 : onDidAnimate(...args2);
|
|
@@ -94,7 +94,27 @@ function createAnimations(animations) {
|
|
|
94
94
|
presence == null ? void 0 : presence.exitVariant,
|
|
95
95
|
presence == null ? void 0 : presence.enterVariant
|
|
96
96
|
];
|
|
97
|
+
const callback = /* @__PURE__ */ __name((isExiting, exitingStyleProps, key, value) => {
|
|
98
|
+
"worklet";
|
|
99
|
+
const callback2 = /* @__PURE__ */ __name((completed, current) => {
|
|
100
|
+
"worklet";
|
|
101
|
+
(0, import_react_native_reanimated.runOnJS)(reanimatedOnDidAnimated)(key, completed, current, {
|
|
102
|
+
attemptedValue: value
|
|
103
|
+
});
|
|
104
|
+
if (isExiting) {
|
|
105
|
+
exitingStyleProps[key] = false;
|
|
106
|
+
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean);
|
|
107
|
+
if (!areStylesExiting) {
|
|
108
|
+
if (sendExitComplete) {
|
|
109
|
+
(0, import_react_native_reanimated.runOnJS)(sendExitComplete)();
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}, "callback");
|
|
114
|
+
return callback2;
|
|
115
|
+
}, "callback");
|
|
97
116
|
const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
|
|
117
|
+
"worklet";
|
|
98
118
|
const style = animatedStyles;
|
|
99
119
|
const final = {
|
|
100
120
|
transform: []
|
|
@@ -102,29 +122,30 @@ function createAnimations(animations) {
|
|
|
102
122
|
const isExiting = isEntering === false;
|
|
103
123
|
const exitingStyleProps = {};
|
|
104
124
|
if (exitStyle) {
|
|
105
|
-
for (const key
|
|
106
|
-
|
|
125
|
+
for (const key in exitStyle) {
|
|
126
|
+
if (key === "transform") {
|
|
127
|
+
for (const attr of exitStyle[key]) {
|
|
128
|
+
const tkey = Object.keys(attr)[0];
|
|
129
|
+
exitingStyleProps[tkey] = true;
|
|
130
|
+
}
|
|
131
|
+
} else {
|
|
132
|
+
exitingStyleProps[key] = true;
|
|
133
|
+
}
|
|
107
134
|
}
|
|
108
135
|
}
|
|
109
136
|
for (const key in style) {
|
|
110
137
|
const value = style[key];
|
|
111
138
|
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
112
139
|
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(key, animationConfig, props.animateOnly);
|
|
113
|
-
const callback = /* @__PURE__ */ __name((completed, recentValue) => {
|
|
114
|
-
(0, import_react_native_reanimated.runOnJS)(reanimatedOnDidAnimated)(key, completed, recentValue, {
|
|
115
|
-
attemptedValue: value
|
|
116
|
-
});
|
|
117
|
-
if (isExiting) {
|
|
118
|
-
exitingStyleProps[key] = false;
|
|
119
|
-
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean);
|
|
120
|
-
if (!areStylesExiting) {
|
|
121
|
-
if (safeToUnmount) {
|
|
122
|
-
(0, import_react_native_reanimated.runOnJS)(safeToUnmount)();
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
}, "callback");
|
|
127
140
|
let { delayMs = null } = animationDelay(key, animationConfig, delay);
|
|
141
|
+
if (!animation) {
|
|
142
|
+
console.warn("No animation for", key, "in", style);
|
|
143
|
+
continue;
|
|
144
|
+
}
|
|
145
|
+
if (!config) {
|
|
146
|
+
console.warn("No animation config for", key, "in", style);
|
|
147
|
+
continue;
|
|
148
|
+
}
|
|
128
149
|
if (key === "transform") {
|
|
129
150
|
if (!Array.isArray(value)) {
|
|
130
151
|
console.error(`Invalid transform value. Needs to be an array.`);
|
|
@@ -133,7 +154,7 @@ function createAnimations(animations) {
|
|
|
133
154
|
for (const transformObject of value) {
|
|
134
155
|
const key2 = Object.keys(transformObject)[0];
|
|
135
156
|
const transformValue = transformObject[key2];
|
|
136
|
-
let finalValue2 = animation(transformValue, config, callback);
|
|
157
|
+
let finalValue2 = animation(transformValue, config, callback(isExiting, exitingStyleProps, key2, value));
|
|
137
158
|
if (shouldRepeat) {
|
|
138
159
|
finalValue2 = (0, import_react_native_reanimated.withRepeat)(finalValue2, repeatCount, repeatReverse);
|
|
139
160
|
}
|
|
@@ -146,7 +167,7 @@ function createAnimations(animations) {
|
|
|
146
167
|
if (typeof value === "object") {
|
|
147
168
|
final[key] = {};
|
|
148
169
|
for (const innerStyleKey of Object.keys(value || {})) {
|
|
149
|
-
let finalValue2 = animation(value, config, callback);
|
|
170
|
+
let finalValue2 = animation(value, config, callback(isExiting, exitingStyleProps, key, value));
|
|
150
171
|
if (shouldRepeat) {
|
|
151
172
|
finalValue2 = (0, import_react_native_reanimated.withRepeat)(finalValue2, repeatCount, repeatReverse);
|
|
152
173
|
}
|
|
@@ -158,7 +179,7 @@ function createAnimations(animations) {
|
|
|
158
179
|
}
|
|
159
180
|
continue;
|
|
160
181
|
}
|
|
161
|
-
let finalValue = animation(value, config, callback);
|
|
182
|
+
let finalValue = animation(value, config, callback(isExiting, exitingStyleProps, key, value));
|
|
162
183
|
if (shouldRepeat) {
|
|
163
184
|
finalValue = (0, import_react_native_reanimated.withRepeat)(finalValue, repeatCount, repeatReverse);
|
|
164
185
|
}
|
|
@@ -183,7 +204,7 @@ function createAnimations(animations) {
|
|
|
183
204
|
}
|
|
184
205
|
__name(createAnimations, "createAnimations");
|
|
185
206
|
function getAnimationConfig(key, animations, animation) {
|
|
186
|
-
|
|
207
|
+
"worklet";
|
|
187
208
|
if (typeof animation === "string") {
|
|
188
209
|
return animations[animation];
|
|
189
210
|
}
|
|
@@ -191,7 +212,7 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
191
212
|
let extraConf;
|
|
192
213
|
if (Array.isArray(animation)) {
|
|
193
214
|
type = animation[0];
|
|
194
|
-
const conf =
|
|
215
|
+
const conf = animation[1] && animation[1][key];
|
|
195
216
|
if (conf) {
|
|
196
217
|
if (typeof conf === "string") {
|
|
197
218
|
type = conf;
|
|
@@ -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, AnimationProp } from '@tamagui/core'\nimport { useCallback, useContext, useMemo } from 'react'\nimport Animated, {\n WithDecayConfig,\n WithSpringConfig,\n WithTimingConfig,\n runOnJS,\n useAnimatedStyle,\n withDecay,\n withDelay,\n withRepeat,\n withSpring,\n withTiming,\n} from 'react-native-reanimated'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig =\n | ({ type: 'timing'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithTimingConfig)\n | ({ type: 'spring'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithSpringConfig)\n | ({ type: 'decay'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithDecayConfig)\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {\n const AnimatedView = Animated.View\n const AnimatedText = Animated.Text\n\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimations: (props, helpers) => {\n const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers\n const [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;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp } from '@tamagui/core'\nimport { useCallback, useContext, useMemo } from 'react'\nimport Animated, {\n AnimationCallback,\n WithDecayConfig,\n WithSpringConfig,\n WithTimingConfig,\n runOnJS,\n useAnimatedStyle,\n withDecay,\n withDelay,\n withRepeat,\n withSpring,\n withTiming,\n} from 'react-native-reanimated'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig =\n | ({ type: 'timing'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithTimingConfig)\n | ({ type: 'spring'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithSpringConfig)\n | ({ type: 'decay'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithDecayConfig)\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {\n const AnimatedView = Animated.View\n const AnimatedText = Animated.Text\n\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimations: (props, helpers) => {\n const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers\n const [isEntering, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n\n const exitStyle = presence?.exitVariant\n ? staticConfig.variantsParsed?.[presence.exitVariant]?.true || pseudos.exitStyle\n : pseudos.exitStyle\n\n const reanimatedOnDidAnimated = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\n )\n\n const 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 callback = (\n isExiting: boolean,\n exitingStyleProps: Record<string, boolean>,\n key: string,\n value: any\n ) => {\n 'worklet'\n const callback: AnimationCallback = (completed, current) => {\n 'worklet'\n runOnJS(reanimatedOnDidAnimated)(key, completed, current, {\n attemptedValue: value,\n })\n if (isExiting) {\n exitingStyleProps[key] = false\n const areStylesExiting = Object.values(exitingStyleProps).some(Boolean)\n // if this is true, then we've finished our exit animations\n if (!areStylesExiting) {\n if (sendExitComplete) {\n runOnJS(sendExitComplete)()\n }\n }\n }\n }\n return callback\n }\n\n const animatedStyle = useAnimatedStyle(() => {\n 'worklet'\n const style = animatedStyles\n\n const final = {\n transform: [] as any[],\n }\n\n const isExiting = isEntering === false\n\n const exitingStyleProps: Record<string, boolean> = {}\n if (exitStyle) {\n for (const key in exitStyle) {\n if (key === 'transform') {\n for (const attr of exitStyle[key]) {\n const tkey = Object.keys(attr)[0]\n exitingStyleProps[tkey] = true\n }\n } else {\n exitingStyleProps[key] = true\n }\n }\n }\n\n for (const key in style) {\n const value = style[key]\n const animationConfig = getAnimationConfig(key, animations, props.animation)\n const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(\n key,\n animationConfig,\n props.animateOnly\n )\n\n let { delayMs = null } = animationDelay(key, animationConfig, delay)\n\n if (!animation) {\n console.warn('No animation for', key, 'in', style)\n continue\n }\n if (!config) {\n console.warn('No animation config for', key, 'in', style)\n continue\n }\n\n if (key === 'transform') {\n if (!Array.isArray(value)) {\n console.error(`Invalid transform value. Needs to be an array.`)\n continue\n }\n\n for (const transformObject of value) {\n const key = Object.keys(transformObject)[0]\n const transformValue = transformObject[key]\n let finalValue = animation(\n transformValue,\n config as any,\n callback(isExiting, exitingStyleProps, key, value)\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n final['transform'].push({\n [key]: finalValue,\n })\n }\n continue\n }\n\n if (typeof value === 'object') {\n // shadows\n final[key] = {}\n for (const innerStyleKey of Object.keys(value || {})) {\n let finalValue = animation(\n value,\n config as any,\n callback(isExiting, exitingStyleProps, key, value)\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n if (delayMs != null) {\n final[key][innerStyleKey] = withDelay(delayMs, finalValue)\n } else {\n final[key][innerStyleKey] = finalValue\n }\n }\n continue\n }\n\n let finalValue = animation(\n value,\n config as any,\n callback(isExiting, exitingStyleProps, key, value)\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n if (delayMs != null && typeof delayMs === 'number') {\n final[key] = withDelay(delayMs, finalValue)\n } else {\n final[key] = finalValue\n }\n\n // end for (key in mergedStyles)\n }\n\n 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 'worklet'\n if (typeof animation === 'string') {\n return animations[animation]\n }\n let type = ''\n let extraConf: any\n if (Array.isArray(animation)) {\n type = animation[0] as string\n const conf = animation[1] && animation[1][key]\n if (conf) {\n if (typeof conf === 'string') {\n type = conf\n } else {\n type = (conf as any).type || type\n extraConf = conf\n }\n }\n } else {\n const val = animation?.[key]\n type = val?.type\n extraConf = val\n }\n const found = animations[type]\n if (!found) {\n throw new Error(`No animation of type \"${type}\" for key \"${key}\"`)\n }\n return {\n ...found,\n ...extraConf,\n type: found.type,\n }\n}\n\nfunction animationDelay(\n key: string,\n animation: AnimationConfig | undefined,\n defaultDelay?: number\n) {\n 'worklet'\n if (\n !animation ||\n !animation[key] ||\n animation[key].delayMs === undefined ||\n animation[key].delayMs === null\n ) {\n return {\n delayMs: null,\n }\n }\n return {\n delayMs: animation[key].delayMs as TransitionConfig['delay'],\n }\n}\n\ntype TransitionConfigWithoutRepeats = (\n | ({ type?: 'spring' } & WithSpringConfig)\n | ({ type: 'timing' } & WithTimingConfig)\n | ({ type: 'decay' } & WithDecayConfig)\n) & {\n delay?: number\n}\n\ntype TransitionConfig = TransitionConfigWithoutRepeats & {\n /**\n * Number of times this animation should repeat. To make it infinite, use the `loop` boolean.\n *\n * Default: `0`\n *\n * It's worth noting that this value isn't *exactly* a `repeat`. Instead, it uses Reanimated's `withRepeat` function under the hood, which repeats back to the **previous value**. If you want a repeated animation, I recommend setting it to `true` from the start, and make sure you have a `from` value.\n *\n * As a result, this value cannot be reliably changed on the fly. If you would like animations to repeat based on the `from` value, `repeat` must be a number when the component initializes. You can set it to `0` to stop it, but you won't be able to start it again. You might be better off using the sequence array API if you need to update its repetitiveness on the fly.\n */\n repeat?: number\n /**\n * Setting this to `true` is the same as `repeat: Infinity`\n *\n * Default: `false`\n *\n * Note: this value cannot be set on the fly. If you would like animations to repeat based on the `from` value, it must be `true` when the component initializes. You can set it to `false` to stop it, but you won't be able to start it again. You might be better off using the sequence array API if you need to update its repetitiveness on the fly.\n */\n loop?: boolean\n /**\n * Whether or not the animation repetition should alternate in direction.\n *\n * By default, this is `true`.\n *\n * If `false`, any animations with `loop` or `repeat` will not go back and forth. Instead, they will go from 0 -> 1, and again from 0 -> 1.\n *\n * If `true`, then animations will go 0 -> 1 -> 0.\n *\n * Setting this to `true` is like setting `animationDirection: alternate` in CSS.\n */\n repeatReverse?: boolean\n}\n\nconst isColor = (styleKey: string) => {\n 'worklet'\n return [\n 'backgroundColor',\n 'borderBottomColor',\n 'borderColor',\n 'borderEndColor',\n 'borderLeftColor',\n 'borderRightColor',\n 'borderStartColor',\n 'borderTopColor',\n 'color',\n ].includes(styleKey)\n}\n\nfunction getAnimation(\n key: string,\n animationConfig: AnimationConfig | undefined,\n animateOnly?: string[]\n) {\n 'worklet'\n if (!animationConfig || (animateOnly && !animateOnly.includes(key))) {\n return {}\n }\n\n let repeatCount = 0\n let repeatReverse = animationConfig.repeatReverse || false\n let animationType: Required<TransitionConfig>['type'] = animationConfig?.type || 'spring'\n\n if (isColor(key) || key === 'opacity') {\n animationType = 'timing'\n }\n\n if ('repeat' in animationConfig) {\n repeatCount = animationConfig.repeat || 0\n } else {\n if (animationConfig.loop) {\n repeatCount = animationConfig.loop ? -1 : 0\n }\n }\n\n let config = animationConfig\n let animation: typeof withTiming | typeof withSpring | typeof withDecay\n\n if (animationType === 'timing') {\n animation = withTiming\n } else if (animationType === 'spring') {\n animation = withSpring\n } else if (animationType === 'decay') {\n animation = withDecay\n config = config || {\n velocity: 2,\n deceleration: 2,\n }\n } else {\n console.warn('no type of animation?', animationType)\n animation = withSpring\n }\n\n return {\n animation,\n config,\n repeatReverse,\n repeatCount,\n shouldRepeat: !!repeatCount,\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
import {
|
|
3
|
+
import { PresenceContext, usePresence } from "@tamagui/animate-presence";
|
|
4
4
|
import { useCallback, useContext, useMemo } from "react";
|
|
5
5
|
import Animated, {
|
|
6
6
|
runOnJS,
|
|
@@ -24,8 +24,8 @@ function createAnimations(animations) {
|
|
|
24
24
|
useAnimations: (props, helpers) => {
|
|
25
25
|
var _a, _b;
|
|
26
26
|
const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
|
|
27
|
-
const [isEntering,
|
|
28
|
-
const presence = useContext(
|
|
27
|
+
const [isEntering, sendExitComplete] = usePresence();
|
|
28
|
+
const presence = useContext(PresenceContext);
|
|
29
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
30
|
const reanimatedOnDidAnimated = useCallback((...args2) => {
|
|
31
31
|
onDidAnimate == null ? void 0 : onDidAnimate(...args2);
|
|
@@ -61,7 +61,27 @@ function createAnimations(animations) {
|
|
|
61
61
|
presence == null ? void 0 : presence.exitVariant,
|
|
62
62
|
presence == null ? void 0 : presence.enterVariant
|
|
63
63
|
];
|
|
64
|
+
const callback = /* @__PURE__ */ __name((isExiting, exitingStyleProps, key, value) => {
|
|
65
|
+
"worklet";
|
|
66
|
+
const callback2 = /* @__PURE__ */ __name((completed, current) => {
|
|
67
|
+
"worklet";
|
|
68
|
+
runOnJS(reanimatedOnDidAnimated)(key, completed, current, {
|
|
69
|
+
attemptedValue: value
|
|
70
|
+
});
|
|
71
|
+
if (isExiting) {
|
|
72
|
+
exitingStyleProps[key] = false;
|
|
73
|
+
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean);
|
|
74
|
+
if (!areStylesExiting) {
|
|
75
|
+
if (sendExitComplete) {
|
|
76
|
+
runOnJS(sendExitComplete)();
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}, "callback");
|
|
81
|
+
return callback2;
|
|
82
|
+
}, "callback");
|
|
64
83
|
const animatedStyle = useAnimatedStyle(() => {
|
|
84
|
+
"worklet";
|
|
65
85
|
const style = animatedStyles;
|
|
66
86
|
const final = {
|
|
67
87
|
transform: []
|
|
@@ -69,29 +89,30 @@ function createAnimations(animations) {
|
|
|
69
89
|
const isExiting = isEntering === false;
|
|
70
90
|
const exitingStyleProps = {};
|
|
71
91
|
if (exitStyle) {
|
|
72
|
-
for (const key
|
|
73
|
-
|
|
92
|
+
for (const key in exitStyle) {
|
|
93
|
+
if (key === "transform") {
|
|
94
|
+
for (const attr of exitStyle[key]) {
|
|
95
|
+
const tkey = Object.keys(attr)[0];
|
|
96
|
+
exitingStyleProps[tkey] = true;
|
|
97
|
+
}
|
|
98
|
+
} else {
|
|
99
|
+
exitingStyleProps[key] = true;
|
|
100
|
+
}
|
|
74
101
|
}
|
|
75
102
|
}
|
|
76
103
|
for (const key in style) {
|
|
77
104
|
const value = style[key];
|
|
78
105
|
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
79
106
|
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(key, animationConfig, props.animateOnly);
|
|
80
|
-
const callback = /* @__PURE__ */ __name((completed, recentValue) => {
|
|
81
|
-
runOnJS(reanimatedOnDidAnimated)(key, completed, recentValue, {
|
|
82
|
-
attemptedValue: value
|
|
83
|
-
});
|
|
84
|
-
if (isExiting) {
|
|
85
|
-
exitingStyleProps[key] = false;
|
|
86
|
-
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean);
|
|
87
|
-
if (!areStylesExiting) {
|
|
88
|
-
if (safeToUnmount) {
|
|
89
|
-
runOnJS(safeToUnmount)();
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
}, "callback");
|
|
94
107
|
let { delayMs = null } = animationDelay(key, animationConfig, delay);
|
|
108
|
+
if (!animation) {
|
|
109
|
+
console.warn("No animation for", key, "in", style);
|
|
110
|
+
continue;
|
|
111
|
+
}
|
|
112
|
+
if (!config) {
|
|
113
|
+
console.warn("No animation config for", key, "in", style);
|
|
114
|
+
continue;
|
|
115
|
+
}
|
|
95
116
|
if (key === "transform") {
|
|
96
117
|
if (!Array.isArray(value)) {
|
|
97
118
|
console.error(`Invalid transform value. Needs to be an array.`);
|
|
@@ -100,7 +121,7 @@ function createAnimations(animations) {
|
|
|
100
121
|
for (const transformObject of value) {
|
|
101
122
|
const key2 = Object.keys(transformObject)[0];
|
|
102
123
|
const transformValue = transformObject[key2];
|
|
103
|
-
let finalValue2 = animation(transformValue, config, callback);
|
|
124
|
+
let finalValue2 = animation(transformValue, config, callback(isExiting, exitingStyleProps, key2, value));
|
|
104
125
|
if (shouldRepeat) {
|
|
105
126
|
finalValue2 = withRepeat(finalValue2, repeatCount, repeatReverse);
|
|
106
127
|
}
|
|
@@ -113,7 +134,7 @@ function createAnimations(animations) {
|
|
|
113
134
|
if (typeof value === "object") {
|
|
114
135
|
final[key] = {};
|
|
115
136
|
for (const innerStyleKey of Object.keys(value || {})) {
|
|
116
|
-
let finalValue2 = animation(value, config, callback);
|
|
137
|
+
let finalValue2 = animation(value, config, callback(isExiting, exitingStyleProps, key, value));
|
|
117
138
|
if (shouldRepeat) {
|
|
118
139
|
finalValue2 = withRepeat(finalValue2, repeatCount, repeatReverse);
|
|
119
140
|
}
|
|
@@ -125,7 +146,7 @@ function createAnimations(animations) {
|
|
|
125
146
|
}
|
|
126
147
|
continue;
|
|
127
148
|
}
|
|
128
|
-
let finalValue = animation(value, config, callback);
|
|
149
|
+
let finalValue = animation(value, config, callback(isExiting, exitingStyleProps, key, value));
|
|
129
150
|
if (shouldRepeat) {
|
|
130
151
|
finalValue = withRepeat(finalValue, repeatCount, repeatReverse);
|
|
131
152
|
}
|
|
@@ -150,7 +171,7 @@ function createAnimations(animations) {
|
|
|
150
171
|
}
|
|
151
172
|
__name(createAnimations, "createAnimations");
|
|
152
173
|
function getAnimationConfig(key, animations, animation) {
|
|
153
|
-
|
|
174
|
+
"worklet";
|
|
154
175
|
if (typeof animation === "string") {
|
|
155
176
|
return animations[animation];
|
|
156
177
|
}
|
|
@@ -158,7 +179,7 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
158
179
|
let extraConf;
|
|
159
180
|
if (Array.isArray(animation)) {
|
|
160
181
|
type = animation[0];
|
|
161
|
-
const conf =
|
|
182
|
+
const conf = animation[1] && animation[1][key];
|
|
162
183
|
if (conf) {
|
|
163
184
|
if (typeof conf === "string") {
|
|
164
185
|
type = conf;
|
|
@@ -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, AnimationProp } from '@tamagui/core'\nimport { useCallback, useContext, useMemo } from 'react'\nimport Animated, {\n WithDecayConfig,\n WithSpringConfig,\n WithTimingConfig,\n runOnJS,\n useAnimatedStyle,\n withDecay,\n withDelay,\n withRepeat,\n withSpring,\n withTiming,\n} from 'react-native-reanimated'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig =\n | ({ type: 'timing'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithTimingConfig)\n | ({ type: 'spring'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithSpringConfig)\n | ({ type: 'decay'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithDecayConfig)\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {\n const AnimatedView = Animated.View\n const AnimatedText = Animated.Text\n\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimations: (props, helpers) => {\n const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers\n const [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;
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp } from '@tamagui/core'\nimport { useCallback, useContext, useMemo } from 'react'\nimport Animated, {\n AnimationCallback,\n WithDecayConfig,\n WithSpringConfig,\n WithTimingConfig,\n runOnJS,\n useAnimatedStyle,\n withDecay,\n withDelay,\n withRepeat,\n withSpring,\n withTiming,\n} from 'react-native-reanimated'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig =\n | ({ type: 'timing'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithTimingConfig)\n | ({ type: 'spring'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithSpringConfig)\n | ({ type: 'decay'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithDecayConfig)\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {\n const AnimatedView = Animated.View\n const AnimatedText = Animated.Text\n\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimations: (props, helpers) => {\n const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers\n const [isEntering, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n\n const exitStyle = presence?.exitVariant\n ? staticConfig.variantsParsed?.[presence.exitVariant]?.true || pseudos.exitStyle\n : pseudos.exitStyle\n\n const reanimatedOnDidAnimated = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\n )\n\n const 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 callback = (\n isExiting: boolean,\n exitingStyleProps: Record<string, boolean>,\n key: string,\n value: any\n ) => {\n 'worklet'\n const callback: AnimationCallback = (completed, current) => {\n 'worklet'\n runOnJS(reanimatedOnDidAnimated)(key, completed, current, {\n attemptedValue: value,\n })\n if (isExiting) {\n exitingStyleProps[key] = false\n const areStylesExiting = Object.values(exitingStyleProps).some(Boolean)\n // if this is true, then we've finished our exit animations\n if (!areStylesExiting) {\n if (sendExitComplete) {\n runOnJS(sendExitComplete)()\n }\n }\n }\n }\n return callback\n }\n\n const animatedStyle = useAnimatedStyle(() => {\n 'worklet'\n const style = animatedStyles\n\n const final = {\n transform: [] as any[],\n }\n\n const isExiting = isEntering === false\n\n const exitingStyleProps: Record<string, boolean> = {}\n if (exitStyle) {\n for (const key in exitStyle) {\n if (key === 'transform') {\n for (const attr of exitStyle[key]) {\n const tkey = Object.keys(attr)[0]\n exitingStyleProps[tkey] = true\n }\n } else {\n exitingStyleProps[key] = true\n }\n }\n }\n\n for (const key in style) {\n const value = style[key]\n const animationConfig = getAnimationConfig(key, animations, props.animation)\n const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(\n key,\n animationConfig,\n props.animateOnly\n )\n\n let { delayMs = null } = animationDelay(key, animationConfig, delay)\n\n if (!animation) {\n console.warn('No animation for', key, 'in', style)\n continue\n }\n if (!config) {\n console.warn('No animation config for', key, 'in', style)\n continue\n }\n\n if (key === 'transform') {\n if (!Array.isArray(value)) {\n console.error(`Invalid transform value. Needs to be an array.`)\n continue\n }\n\n for (const transformObject of value) {\n const key = Object.keys(transformObject)[0]\n const transformValue = transformObject[key]\n let finalValue = animation(\n transformValue,\n config as any,\n callback(isExiting, exitingStyleProps, key, value)\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n final['transform'].push({\n [key]: finalValue,\n })\n }\n continue\n }\n\n if (typeof value === 'object') {\n // shadows\n final[key] = {}\n for (const innerStyleKey of Object.keys(value || {})) {\n let finalValue = animation(\n value,\n config as any,\n callback(isExiting, exitingStyleProps, key, value)\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n if (delayMs != null) {\n final[key][innerStyleKey] = withDelay(delayMs, finalValue)\n } else {\n final[key][innerStyleKey] = finalValue\n }\n }\n continue\n }\n\n let finalValue = animation(\n value,\n config as any,\n callback(isExiting, exitingStyleProps, key, value)\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n if (delayMs != null && typeof delayMs === 'number') {\n final[key] = withDelay(delayMs, finalValue)\n } else {\n final[key] = finalValue\n }\n\n // end for (key in mergedStyles)\n }\n\n 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 'worklet'\n if (typeof animation === 'string') {\n return animations[animation]\n }\n let type = ''\n let extraConf: any\n if (Array.isArray(animation)) {\n type = animation[0] as string\n const conf = animation[1] && animation[1][key]\n if (conf) {\n if (typeof conf === 'string') {\n type = conf\n } else {\n type = (conf as any).type || type\n extraConf = conf\n }\n }\n } else {\n const val = animation?.[key]\n type = val?.type\n extraConf = val\n }\n const found = animations[type]\n if (!found) {\n throw new Error(`No animation of type \"${type}\" for key \"${key}\"`)\n }\n return {\n ...found,\n ...extraConf,\n type: found.type,\n }\n}\n\nfunction animationDelay(\n key: string,\n animation: AnimationConfig | undefined,\n defaultDelay?: number\n) {\n 'worklet'\n if (\n !animation ||\n !animation[key] ||\n animation[key].delayMs === undefined ||\n animation[key].delayMs === null\n ) {\n return {\n delayMs: null,\n }\n }\n return {\n delayMs: animation[key].delayMs as TransitionConfig['delay'],\n }\n}\n\ntype TransitionConfigWithoutRepeats = (\n | ({ type?: 'spring' } & WithSpringConfig)\n | ({ type: 'timing' } & WithTimingConfig)\n | ({ type: 'decay' } & WithDecayConfig)\n) & {\n delay?: number\n}\n\ntype TransitionConfig = TransitionConfigWithoutRepeats & {\n /**\n * Number of times this animation should repeat. To make it infinite, use the `loop` boolean.\n *\n * Default: `0`\n *\n * It's worth noting that this value isn't *exactly* a `repeat`. Instead, it uses Reanimated's `withRepeat` function under the hood, which repeats back to the **previous value**. If you want a repeated animation, I recommend setting it to `true` from the start, and make sure you have a `from` value.\n *\n * As a result, this value cannot be reliably changed on the fly. If you would like animations to repeat based on the `from` value, `repeat` must be a number when the component initializes. You can set it to `0` to stop it, but you won't be able to start it again. You might be better off using the sequence array API if you need to update its repetitiveness on the fly.\n */\n repeat?: number\n /**\n * Setting this to `true` is the same as `repeat: Infinity`\n *\n * Default: `false`\n *\n * Note: this value cannot be set on the fly. If you would like animations to repeat based on the `from` value, it must be `true` when the component initializes. You can set it to `false` to stop it, but you won't be able to start it again. You might be better off using the sequence array API if you need to update its repetitiveness on the fly.\n */\n loop?: boolean\n /**\n * Whether or not the animation repetition should alternate in direction.\n *\n * By default, this is `true`.\n *\n * If `false`, any animations with `loop` or `repeat` will not go back and forth. Instead, they will go from 0 -> 1, and again from 0 -> 1.\n *\n * If `true`, then animations will go 0 -> 1 -> 0.\n *\n * Setting this to `true` is like setting `animationDirection: alternate` in CSS.\n */\n repeatReverse?: boolean\n}\n\nconst isColor = (styleKey: string) => {\n 'worklet'\n return [\n 'backgroundColor',\n 'borderBottomColor',\n 'borderColor',\n 'borderEndColor',\n 'borderLeftColor',\n 'borderRightColor',\n 'borderStartColor',\n 'borderTopColor',\n 'color',\n ].includes(styleKey)\n}\n\nfunction getAnimation(\n key: string,\n animationConfig: AnimationConfig | undefined,\n animateOnly?: string[]\n) {\n 'worklet'\n if (!animationConfig || (animateOnly && !animateOnly.includes(key))) {\n return {}\n }\n\n let repeatCount = 0\n let repeatReverse = animationConfig.repeatReverse || false\n let animationType: Required<TransitionConfig>['type'] = animationConfig?.type || 'spring'\n\n if (isColor(key) || key === 'opacity') {\n animationType = 'timing'\n }\n\n if ('repeat' in animationConfig) {\n repeatCount = animationConfig.repeat || 0\n } else {\n if (animationConfig.loop) {\n repeatCount = animationConfig.loop ? -1 : 0\n }\n }\n\n let config = animationConfig\n let animation: typeof withTiming | typeof withSpring | typeof withDecay\n\n if (animationType === 'timing') {\n animation = withTiming\n } else if (animationType === 'spring') {\n animation = withSpring\n } else if (animationType === 'decay') {\n animation = withDecay\n config = config || {\n velocity: 2,\n deceleration: 2,\n }\n } else {\n console.warn('no type of animation?', animationType)\n animation = withSpring\n }\n\n return {\n animation,\n config,\n repeatReverse,\n repeatCount,\n shouldRepeat: !!repeatCount,\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
import {
|
|
3
|
+
import { PresenceContext, usePresence } from "@tamagui/animate-presence";
|
|
4
4
|
import { useCallback, useContext, useMemo } from "react";
|
|
5
5
|
import Animated, {
|
|
6
6
|
runOnJS,
|
|
@@ -24,8 +24,8 @@ function createAnimations(animations) {
|
|
|
24
24
|
useAnimations: (props, helpers) => {
|
|
25
25
|
var _a, _b;
|
|
26
26
|
const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
|
|
27
|
-
const [isEntering,
|
|
28
|
-
const presence = useContext(
|
|
27
|
+
const [isEntering, sendExitComplete] = usePresence();
|
|
28
|
+
const presence = useContext(PresenceContext);
|
|
29
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
30
|
const reanimatedOnDidAnimated = useCallback((...args2) => {
|
|
31
31
|
onDidAnimate == null ? void 0 : onDidAnimate(...args2);
|
|
@@ -61,7 +61,27 @@ function createAnimations(animations) {
|
|
|
61
61
|
presence == null ? void 0 : presence.exitVariant,
|
|
62
62
|
presence == null ? void 0 : presence.enterVariant
|
|
63
63
|
];
|
|
64
|
+
const callback = /* @__PURE__ */ __name((isExiting, exitingStyleProps, key, value) => {
|
|
65
|
+
"worklet";
|
|
66
|
+
const callback2 = /* @__PURE__ */ __name((completed, current) => {
|
|
67
|
+
"worklet";
|
|
68
|
+
runOnJS(reanimatedOnDidAnimated)(key, completed, current, {
|
|
69
|
+
attemptedValue: value
|
|
70
|
+
});
|
|
71
|
+
if (isExiting) {
|
|
72
|
+
exitingStyleProps[key] = false;
|
|
73
|
+
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean);
|
|
74
|
+
if (!areStylesExiting) {
|
|
75
|
+
if (sendExitComplete) {
|
|
76
|
+
runOnJS(sendExitComplete)();
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}, "callback");
|
|
81
|
+
return callback2;
|
|
82
|
+
}, "callback");
|
|
64
83
|
const animatedStyle = useAnimatedStyle(() => {
|
|
84
|
+
"worklet";
|
|
65
85
|
const style = animatedStyles;
|
|
66
86
|
const final = {
|
|
67
87
|
transform: []
|
|
@@ -69,29 +89,30 @@ function createAnimations(animations) {
|
|
|
69
89
|
const isExiting = isEntering === false;
|
|
70
90
|
const exitingStyleProps = {};
|
|
71
91
|
if (exitStyle) {
|
|
72
|
-
for (const key
|
|
73
|
-
|
|
92
|
+
for (const key in exitStyle) {
|
|
93
|
+
if (key === "transform") {
|
|
94
|
+
for (const attr of exitStyle[key]) {
|
|
95
|
+
const tkey = Object.keys(attr)[0];
|
|
96
|
+
exitingStyleProps[tkey] = true;
|
|
97
|
+
}
|
|
98
|
+
} else {
|
|
99
|
+
exitingStyleProps[key] = true;
|
|
100
|
+
}
|
|
74
101
|
}
|
|
75
102
|
}
|
|
76
103
|
for (const key in style) {
|
|
77
104
|
const value = style[key];
|
|
78
105
|
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
79
106
|
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(key, animationConfig, props.animateOnly);
|
|
80
|
-
const callback = /* @__PURE__ */ __name((completed, recentValue) => {
|
|
81
|
-
runOnJS(reanimatedOnDidAnimated)(key, completed, recentValue, {
|
|
82
|
-
attemptedValue: value
|
|
83
|
-
});
|
|
84
|
-
if (isExiting) {
|
|
85
|
-
exitingStyleProps[key] = false;
|
|
86
|
-
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean);
|
|
87
|
-
if (!areStylesExiting) {
|
|
88
|
-
if (safeToUnmount) {
|
|
89
|
-
runOnJS(safeToUnmount)();
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
}, "callback");
|
|
94
107
|
let { delayMs = null } = animationDelay(key, animationConfig, delay);
|
|
108
|
+
if (!animation) {
|
|
109
|
+
console.warn("No animation for", key, "in", style);
|
|
110
|
+
continue;
|
|
111
|
+
}
|
|
112
|
+
if (!config) {
|
|
113
|
+
console.warn("No animation config for", key, "in", style);
|
|
114
|
+
continue;
|
|
115
|
+
}
|
|
95
116
|
if (key === "transform") {
|
|
96
117
|
if (!Array.isArray(value)) {
|
|
97
118
|
console.error(`Invalid transform value. Needs to be an array.`);
|
|
@@ -100,7 +121,7 @@ function createAnimations(animations) {
|
|
|
100
121
|
for (const transformObject of value) {
|
|
101
122
|
const key2 = Object.keys(transformObject)[0];
|
|
102
123
|
const transformValue = transformObject[key2];
|
|
103
|
-
let finalValue2 = animation(transformValue, config, callback);
|
|
124
|
+
let finalValue2 = animation(transformValue, config, callback(isExiting, exitingStyleProps, key2, value));
|
|
104
125
|
if (shouldRepeat) {
|
|
105
126
|
finalValue2 = withRepeat(finalValue2, repeatCount, repeatReverse);
|
|
106
127
|
}
|
|
@@ -113,7 +134,7 @@ function createAnimations(animations) {
|
|
|
113
134
|
if (typeof value === "object") {
|
|
114
135
|
final[key] = {};
|
|
115
136
|
for (const innerStyleKey of Object.keys(value || {})) {
|
|
116
|
-
let finalValue2 = animation(value, config, callback);
|
|
137
|
+
let finalValue2 = animation(value, config, callback(isExiting, exitingStyleProps, key, value));
|
|
117
138
|
if (shouldRepeat) {
|
|
118
139
|
finalValue2 = withRepeat(finalValue2, repeatCount, repeatReverse);
|
|
119
140
|
}
|
|
@@ -125,7 +146,7 @@ function createAnimations(animations) {
|
|
|
125
146
|
}
|
|
126
147
|
continue;
|
|
127
148
|
}
|
|
128
|
-
let finalValue = animation(value, config, callback);
|
|
149
|
+
let finalValue = animation(value, config, callback(isExiting, exitingStyleProps, key, value));
|
|
129
150
|
if (shouldRepeat) {
|
|
130
151
|
finalValue = withRepeat(finalValue, repeatCount, repeatReverse);
|
|
131
152
|
}
|
|
@@ -150,7 +171,7 @@ function createAnimations(animations) {
|
|
|
150
171
|
}
|
|
151
172
|
__name(createAnimations, "createAnimations");
|
|
152
173
|
function getAnimationConfig(key, animations, animation) {
|
|
153
|
-
|
|
174
|
+
"worklet";
|
|
154
175
|
if (typeof animation === "string") {
|
|
155
176
|
return animations[animation];
|
|
156
177
|
}
|
|
@@ -158,7 +179,7 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
158
179
|
let extraConf;
|
|
159
180
|
if (Array.isArray(animation)) {
|
|
160
181
|
type = animation[0];
|
|
161
|
-
const conf =
|
|
182
|
+
const conf = animation[1] && animation[1][key];
|
|
162
183
|
if (conf) {
|
|
163
184
|
if (typeof conf === "string") {
|
|
164
185
|
type = conf;
|
package/package.json
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/animations-reanimated",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.71",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
|
+
"sideEffects": true,
|
|
5
6
|
"license": "MIT",
|
|
6
7
|
"types": "./types/index.d.ts",
|
|
7
8
|
"main": "dist/cjs",
|
|
@@ -13,12 +14,12 @@
|
|
|
13
14
|
"dist"
|
|
14
15
|
],
|
|
15
16
|
"dependencies": {
|
|
16
|
-
"@tamagui/animate-presence": "^1.0.1-beta.
|
|
17
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
17
|
+
"@tamagui/animate-presence": "^1.0.1-beta.71",
|
|
18
|
+
"@tamagui/core": "^1.0.1-beta.71",
|
|
18
19
|
"react-native-reanimated": "~2.8.0"
|
|
19
20
|
},
|
|
20
21
|
"devDependencies": {
|
|
21
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
22
|
+
"@tamagui/build": "^1.0.1-beta.71"
|
|
22
23
|
},
|
|
23
24
|
"scripts": {
|
|
24
25
|
"build": "tamagui-build",
|
package/src/createAnimations.tsx
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { PresenceContext, usePresence } from '@tamagui/animate-presence'
|
|
2
2
|
import { AnimationDriver, AnimationProp } from '@tamagui/core'
|
|
3
3
|
import { useCallback, useContext, useMemo } from 'react'
|
|
4
4
|
import Animated, {
|
|
5
|
+
AnimationCallback,
|
|
5
6
|
WithDecayConfig,
|
|
6
7
|
WithSpringConfig,
|
|
7
8
|
WithTimingConfig,
|
|
@@ -37,8 +38,8 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
37
38
|
Text: AnimatedText,
|
|
38
39
|
useAnimations: (props, helpers) => {
|
|
39
40
|
const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers
|
|
40
|
-
const [isEntering,
|
|
41
|
-
const presence = useContext(
|
|
41
|
+
const [isEntering, sendExitComplete] = usePresence()
|
|
42
|
+
const presence = useContext(PresenceContext)
|
|
42
43
|
|
|
43
44
|
const exitStyle = presence?.exitVariant
|
|
44
45
|
? staticConfig.variantsParsed?.[presence.exitVariant]?.true || pseudos.exitStyle
|
|
@@ -84,7 +85,34 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
84
85
|
presence?.enterVariant,
|
|
85
86
|
]
|
|
86
87
|
|
|
88
|
+
const callback = (
|
|
89
|
+
isExiting: boolean,
|
|
90
|
+
exitingStyleProps: Record<string, boolean>,
|
|
91
|
+
key: string,
|
|
92
|
+
value: any
|
|
93
|
+
) => {
|
|
94
|
+
'worklet'
|
|
95
|
+
const callback: AnimationCallback = (completed, current) => {
|
|
96
|
+
'worklet'
|
|
97
|
+
runOnJS(reanimatedOnDidAnimated)(key, completed, current, {
|
|
98
|
+
attemptedValue: value,
|
|
99
|
+
})
|
|
100
|
+
if (isExiting) {
|
|
101
|
+
exitingStyleProps[key] = false
|
|
102
|
+
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean)
|
|
103
|
+
// if this is true, then we've finished our exit animations
|
|
104
|
+
if (!areStylesExiting) {
|
|
105
|
+
if (sendExitComplete) {
|
|
106
|
+
runOnJS(sendExitComplete)()
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
return callback
|
|
112
|
+
}
|
|
113
|
+
|
|
87
114
|
const animatedStyle = useAnimatedStyle(() => {
|
|
115
|
+
'worklet'
|
|
88
116
|
const style = animatedStyles
|
|
89
117
|
|
|
90
118
|
const final = {
|
|
@@ -95,38 +123,38 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
95
123
|
|
|
96
124
|
const exitingStyleProps: Record<string, boolean> = {}
|
|
97
125
|
if (exitStyle) {
|
|
98
|
-
for (const key
|
|
99
|
-
|
|
126
|
+
for (const key in exitStyle) {
|
|
127
|
+
if (key === 'transform') {
|
|
128
|
+
for (const attr of exitStyle[key]) {
|
|
129
|
+
const tkey = Object.keys(attr)[0]
|
|
130
|
+
exitingStyleProps[tkey] = true
|
|
131
|
+
}
|
|
132
|
+
} else {
|
|
133
|
+
exitingStyleProps[key] = true
|
|
134
|
+
}
|
|
100
135
|
}
|
|
101
136
|
}
|
|
102
137
|
|
|
103
138
|
for (const key in style) {
|
|
104
139
|
const value = style[key]
|
|
105
|
-
const animationConfig = getAnimationConfig(key, animations, props.animation)
|
|
140
|
+
const animationConfig = getAnimationConfig(key, animations, props.animation)
|
|
106
141
|
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(
|
|
107
142
|
key,
|
|
108
143
|
animationConfig,
|
|
109
144
|
props.animateOnly
|
|
110
145
|
)
|
|
111
146
|
|
|
112
|
-
const callback: (completed: boolean, value?: any) => void = (completed, recentValue) => {
|
|
113
|
-
runOnJS(reanimatedOnDidAnimated)(key, completed, recentValue, {
|
|
114
|
-
attemptedValue: value,
|
|
115
|
-
})
|
|
116
|
-
if (isExiting) {
|
|
117
|
-
exitingStyleProps[key] = false
|
|
118
|
-
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean)
|
|
119
|
-
// if this is true, then we've finished our exit animations
|
|
120
|
-
if (!areStylesExiting) {
|
|
121
|
-
if (safeToUnmount) {
|
|
122
|
-
runOnJS(safeToUnmount)()
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
|
|
128
147
|
let { delayMs = null } = animationDelay(key, animationConfig, delay)
|
|
129
148
|
|
|
149
|
+
if (!animation) {
|
|
150
|
+
console.warn('No animation for', key, 'in', style)
|
|
151
|
+
continue
|
|
152
|
+
}
|
|
153
|
+
if (!config) {
|
|
154
|
+
console.warn('No animation config for', key, 'in', style)
|
|
155
|
+
continue
|
|
156
|
+
}
|
|
157
|
+
|
|
130
158
|
if (key === 'transform') {
|
|
131
159
|
if (!Array.isArray(value)) {
|
|
132
160
|
console.error(`Invalid transform value. Needs to be an array.`)
|
|
@@ -136,7 +164,11 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
136
164
|
for (const transformObject of value) {
|
|
137
165
|
const key = Object.keys(transformObject)[0]
|
|
138
166
|
const transformValue = transformObject[key]
|
|
139
|
-
let finalValue = animation(
|
|
167
|
+
let finalValue = animation(
|
|
168
|
+
transformValue,
|
|
169
|
+
config as any,
|
|
170
|
+
callback(isExiting, exitingStyleProps, key, value)
|
|
171
|
+
)
|
|
140
172
|
if (shouldRepeat) {
|
|
141
173
|
finalValue = withRepeat(finalValue, repeatCount, repeatReverse)
|
|
142
174
|
}
|
|
@@ -151,7 +183,11 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
151
183
|
// shadows
|
|
152
184
|
final[key] = {}
|
|
153
185
|
for (const innerStyleKey of Object.keys(value || {})) {
|
|
154
|
-
let finalValue = animation(
|
|
186
|
+
let finalValue = animation(
|
|
187
|
+
value,
|
|
188
|
+
config as any,
|
|
189
|
+
callback(isExiting, exitingStyleProps, key, value)
|
|
190
|
+
)
|
|
155
191
|
if (shouldRepeat) {
|
|
156
192
|
finalValue = withRepeat(finalValue, repeatCount, repeatReverse)
|
|
157
193
|
}
|
|
@@ -164,7 +200,11 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
164
200
|
continue
|
|
165
201
|
}
|
|
166
202
|
|
|
167
|
-
let finalValue = animation(
|
|
203
|
+
let finalValue = animation(
|
|
204
|
+
value,
|
|
205
|
+
config as any,
|
|
206
|
+
callback(isExiting, exitingStyleProps, key, value)
|
|
207
|
+
)
|
|
168
208
|
if (shouldRepeat) {
|
|
169
209
|
finalValue = withRepeat(finalValue, repeatCount, repeatReverse)
|
|
170
210
|
}
|
|
@@ -194,6 +234,7 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
194
234
|
}
|
|
195
235
|
|
|
196
236
|
function getAnimationConfig(key: string, animations: AnimationsConfig, animation?: AnimationProp) {
|
|
237
|
+
'worklet'
|
|
197
238
|
if (typeof animation === 'string') {
|
|
198
239
|
return animations[animation]
|
|
199
240
|
}
|
|
@@ -201,7 +242,7 @@ function getAnimationConfig(key: string, animations: AnimationsConfig, animation
|
|
|
201
242
|
let extraConf: any
|
|
202
243
|
if (Array.isArray(animation)) {
|
|
203
244
|
type = animation[0] as string
|
|
204
|
-
const conf = animation[1]
|
|
245
|
+
const conf = animation[1] && animation[1][key]
|
|
205
246
|
if (conf) {
|
|
206
247
|
if (typeof conf === 'string') {
|
|
207
248
|
type = conf
|
|
@@ -330,7 +371,7 @@ function getAnimation(
|
|
|
330
371
|
}
|
|
331
372
|
|
|
332
373
|
let config = animationConfig
|
|
333
|
-
let animation:
|
|
374
|
+
let animation: typeof withTiming | typeof withSpring | typeof withDecay
|
|
334
375
|
|
|
335
376
|
if (animationType === 'timing') {
|
|
336
377
|
animation = withTiming
|
|
File without changes
|
|
@@ -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,EAAiB,MAAM,eAAe,CAAA;AAE9D,OAAiB,EAEf,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;AAElG,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,gBAAgB,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CA+M9F"}
|
package/types/index.d.ts
CHANGED
|
File without changes
|
package/types/index.d.ts.map
CHANGED
|
File without changes
|
package/types/polyfill.d.ts
CHANGED
|
File without changes
|
package/types/polyfill.d.ts.map
CHANGED
|
File without changes
|