@tamagui/animations-reanimated 1.0.1-beta.21 → 1.0.1-beta.211
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 +126 -93
- package/dist/cjs/createAnimations.js.map +3 -3
- package/dist/cjs/index.js +2 -0
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/polyfill.js +1 -0
- package/dist/cjs/polyfill.js.map +1 -1
- package/dist/cjs/useAnimatedNumber.js +33 -0
- package/dist/cjs/useAnimatedNumber.js.map +7 -0
- package/dist/esm/createAnimations.js +122 -75
- package/dist/esm/createAnimations.js.map +3 -3
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/polyfill.js +0 -0
- package/dist/esm/polyfill.js.map +0 -0
- package/dist/esm/useAnimatedNumber.js +11 -0
- package/dist/esm/useAnimatedNumber.js.map +7 -0
- package/dist/jsx/createAnimations.js +128 -82
- package/dist/jsx/createAnimations.js.map +7 -0
- package/dist/jsx/index.js +2 -0
- package/dist/jsx/index.js.map +7 -0
- package/dist/jsx/polyfill.js +1 -0
- package/dist/jsx/polyfill.js.map +7 -0
- package/dist/jsx/useAnimatedNumber.js +11 -0
- package/dist/jsx/useAnimatedNumber.js.map +7 -0
- package/package.json +9 -6
- package/src/createAnimations.tsx +429 -0
- package/src/index.tsx +4 -0
- package/src/polyfill.ts +4 -0
- package/src/useAnimatedNumber.tsx +73 -0
- package/types/index.d.ts +1 -0
- package/types/useAnimatedNumber.d.ts +2 -0
- package/types/createAnimations.d.ts.map +0 -1
- package/types/index.d.ts.map +0 -1
- package/types/polyfill.d.ts.map +0 -1
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
var
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
1
|
+
var _a;
|
|
2
|
+
import { useEvent } from "@tamagui/core";
|
|
3
|
+
import { PresenceContext, usePresence } from "@tamagui/use-presence";
|
|
4
|
+
import { useContext, useMemo } from "react";
|
|
5
|
+
import { FlatList, Animated as RNAnimated } from "react-native";
|
|
5
6
|
import Animated, {
|
|
6
7
|
runOnJS,
|
|
7
8
|
useAnimatedStyle,
|
|
@@ -11,146 +12,196 @@ import Animated, {
|
|
|
11
12
|
withSpring,
|
|
12
13
|
withTiming
|
|
13
14
|
} from "react-native-reanimated";
|
|
15
|
+
import {
|
|
16
|
+
useAnimatedNumber,
|
|
17
|
+
useAnimatedNumberReaction,
|
|
18
|
+
useAnimatedNumberStyle
|
|
19
|
+
} from "./useAnimatedNumber";
|
|
20
|
+
if (process.env.NODE_ENV === "development") {
|
|
21
|
+
if ((_a = FlatList) == null ? void 0 : _a["_isProxyWorm"]) {
|
|
22
|
+
console.warn(
|
|
23
|
+
`Using reanimated with excludeReactNativeWebExports including FlatList, adjust your next.config.js, reanimated currently doesn't support tree-shaking and needs *List components around.`
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
const animatedStyleKey = {
|
|
28
|
+
transform: true,
|
|
29
|
+
opacity: true
|
|
30
|
+
};
|
|
14
31
|
function createAnimations(animations) {
|
|
15
32
|
const AnimatedView = Animated.View;
|
|
16
33
|
const AnimatedText = Animated.Text;
|
|
17
34
|
AnimatedView["displayName"] = "AnimatedView";
|
|
18
35
|
AnimatedText["displayName"] = "AnimatedText";
|
|
19
36
|
return {
|
|
20
|
-
|
|
37
|
+
isReactNative: true,
|
|
21
38
|
animations,
|
|
22
39
|
View: AnimatedView,
|
|
23
40
|
Text: AnimatedText,
|
|
41
|
+
NumberView: RNAnimated.View,
|
|
42
|
+
useAnimatedNumber,
|
|
43
|
+
useAnimatedNumberReaction,
|
|
44
|
+
useAnimatedNumberStyle,
|
|
24
45
|
useAnimations: (props, helpers) => {
|
|
25
|
-
var
|
|
46
|
+
var _a2, _b;
|
|
26
47
|
const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
|
|
27
|
-
const [
|
|
28
|
-
const presence = useContext(
|
|
29
|
-
const exitStyle = (presence == null ? void 0 : presence.exitVariant) ? ((_b = (
|
|
30
|
-
const reanimatedOnDidAnimated =
|
|
31
|
-
onDidAnimate == null ? void 0 : onDidAnimate(...
|
|
32
|
-
}
|
|
48
|
+
const [isPresent, sendExitComplete] = usePresence();
|
|
49
|
+
const presence = useContext(PresenceContext);
|
|
50
|
+
const exitStyle = (presence == null ? void 0 : presence.exitVariant) ? ((_b = (_a2 = staticConfig.variantsParsed) == null ? void 0 : _a2[presence.exitVariant]) == null ? void 0 : _b.true) || pseudos.exitStyle : pseudos.exitStyle;
|
|
51
|
+
const reanimatedOnDidAnimated = useEvent((...args) => {
|
|
52
|
+
onDidAnimate == null ? void 0 : onDidAnimate(...args);
|
|
53
|
+
});
|
|
54
|
+
const isExiting = isPresent === false;
|
|
55
|
+
const isEntering = !state.mounted;
|
|
33
56
|
const all = getStyle({
|
|
57
|
+
isExiting,
|
|
34
58
|
isEntering,
|
|
35
59
|
exitVariant: presence == null ? void 0 : presence.exitVariant,
|
|
36
60
|
enterVariant: presence == null ? void 0 : presence.enterVariant
|
|
37
61
|
});
|
|
38
62
|
const [animatedStyles, nonAnimatedStyle] = [{}, {}];
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
};
|
|
43
|
-
for (const key of Object.keys(all)) {
|
|
44
|
-
if (animatedStyleKey[key]) {
|
|
45
|
-
animatedStyles[key] = all[key];
|
|
63
|
+
for (const key2 of Object.keys(all)) {
|
|
64
|
+
if (animatedStyleKey[key2]) {
|
|
65
|
+
animatedStyles[key2] = all[key2];
|
|
46
66
|
} else {
|
|
47
|
-
nonAnimatedStyle[
|
|
67
|
+
nonAnimatedStyle[key2] = all[key2];
|
|
48
68
|
}
|
|
49
69
|
}
|
|
50
|
-
const
|
|
51
|
-
|
|
70
|
+
const animatedString = JSON.stringify(animatedStyles);
|
|
71
|
+
const key = animatedString + JSON.stringify([
|
|
52
72
|
state.mounted,
|
|
53
73
|
state.hover,
|
|
54
74
|
state.press,
|
|
55
75
|
state.pressIn,
|
|
56
76
|
state.focus,
|
|
57
77
|
delay,
|
|
58
|
-
|
|
78
|
+
isPresent,
|
|
59
79
|
onDidAnimate,
|
|
60
|
-
reanimatedOnDidAnimated,
|
|
61
80
|
presence == null ? void 0 : presence.exitVariant,
|
|
62
81
|
presence == null ? void 0 : presence.enterVariant
|
|
63
|
-
];
|
|
82
|
+
]);
|
|
83
|
+
const callback = (isExiting2, exitingStyleProps, key2, value) => {
|
|
84
|
+
"worklet";
|
|
85
|
+
return (completed, current) => {
|
|
86
|
+
"worklet";
|
|
87
|
+
runOnJS(reanimatedOnDidAnimated)(key2, completed, current, {
|
|
88
|
+
attemptedValue: value
|
|
89
|
+
});
|
|
90
|
+
if (isExiting2) {
|
|
91
|
+
exitingStyleProps[key2] = false;
|
|
92
|
+
const areStylesExiting = Object.values(exitingStyleProps).some(Boolean);
|
|
93
|
+
if (!areStylesExiting) {
|
|
94
|
+
if (sendExitComplete) {
|
|
95
|
+
runOnJS(sendExitComplete)();
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
};
|
|
64
101
|
const animatedStyle = useAnimatedStyle(() => {
|
|
65
|
-
|
|
102
|
+
"worklet";
|
|
103
|
+
const style = JSON.parse(animatedString);
|
|
66
104
|
const final = {
|
|
67
105
|
transform: []
|
|
68
106
|
};
|
|
69
|
-
const
|
|
107
|
+
const isExiting2 = isPresent === false;
|
|
70
108
|
const exitingStyleProps = {};
|
|
71
109
|
if (exitStyle) {
|
|
72
|
-
for (const
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
const value = style[key];
|
|
78
|
-
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
79
|
-
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
|
-
}
|
|
110
|
+
for (const key2 in exitStyle) {
|
|
111
|
+
if (key2 === "transform") {
|
|
112
|
+
for (const attr of exitStyle[key2]) {
|
|
113
|
+
const tkey = Object.keys(attr)[0];
|
|
114
|
+
exitingStyleProps[tkey] = true;
|
|
91
115
|
}
|
|
116
|
+
} else {
|
|
117
|
+
exitingStyleProps[key2] = true;
|
|
92
118
|
}
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
for (const key2 in style) {
|
|
122
|
+
const value = style[key2];
|
|
123
|
+
const animationConfig = getAnimationConfig(key2, animations, props.animation);
|
|
124
|
+
const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(
|
|
125
|
+
key2,
|
|
126
|
+
animationConfig,
|
|
127
|
+
props.animateOnly
|
|
128
|
+
);
|
|
129
|
+
const { delayMs = null } = animationDelay(key2, animationConfig, delay);
|
|
130
|
+
if (!animation) {
|
|
131
|
+
console.warn("No animation for", key2, "in", style);
|
|
132
|
+
continue;
|
|
133
|
+
}
|
|
134
|
+
if (!config) {
|
|
135
|
+
console.warn("No animation config for", key2, "in", style);
|
|
136
|
+
continue;
|
|
137
|
+
}
|
|
138
|
+
if (key2 === "transform") {
|
|
96
139
|
if (!Array.isArray(value)) {
|
|
97
140
|
console.error(`Invalid transform value. Needs to be an array.`);
|
|
98
141
|
continue;
|
|
99
142
|
}
|
|
100
143
|
for (const transformObject of value) {
|
|
101
|
-
const
|
|
102
|
-
const transformValue = transformObject[
|
|
103
|
-
let finalValue2 = animation(
|
|
144
|
+
const key3 = Object.keys(transformObject)[0];
|
|
145
|
+
const transformValue = transformObject[key3];
|
|
146
|
+
let finalValue2 = animation(
|
|
147
|
+
transformValue,
|
|
148
|
+
config,
|
|
149
|
+
callback(isExiting2, exitingStyleProps, key3, value)
|
|
150
|
+
);
|
|
104
151
|
if (shouldRepeat) {
|
|
105
152
|
finalValue2 = withRepeat(finalValue2, repeatCount, repeatReverse);
|
|
106
153
|
}
|
|
107
154
|
final["transform"].push({
|
|
108
|
-
[
|
|
155
|
+
[key3]: finalValue2
|
|
109
156
|
});
|
|
110
157
|
}
|
|
111
158
|
continue;
|
|
112
159
|
}
|
|
113
160
|
if (typeof value === "object") {
|
|
114
|
-
final[
|
|
161
|
+
final[key2] = {};
|
|
115
162
|
for (const innerStyleKey of Object.keys(value || {})) {
|
|
116
|
-
let finalValue2 = animation(
|
|
163
|
+
let finalValue2 = animation(
|
|
164
|
+
value,
|
|
165
|
+
config,
|
|
166
|
+
callback(isExiting2, exitingStyleProps, key2, value)
|
|
167
|
+
);
|
|
117
168
|
if (shouldRepeat) {
|
|
118
169
|
finalValue2 = withRepeat(finalValue2, repeatCount, repeatReverse);
|
|
119
170
|
}
|
|
120
171
|
if (delayMs != null) {
|
|
121
|
-
final[
|
|
172
|
+
final[key2][innerStyleKey] = withDelay(delayMs, finalValue2);
|
|
122
173
|
} else {
|
|
123
|
-
final[
|
|
174
|
+
final[key2][innerStyleKey] = finalValue2;
|
|
124
175
|
}
|
|
125
176
|
}
|
|
126
177
|
continue;
|
|
127
178
|
}
|
|
128
|
-
let finalValue = animation(
|
|
179
|
+
let finalValue = animation(
|
|
180
|
+
value,
|
|
181
|
+
config,
|
|
182
|
+
callback(isExiting2, exitingStyleProps, key2, value)
|
|
183
|
+
);
|
|
129
184
|
if (shouldRepeat) {
|
|
130
185
|
finalValue = withRepeat(finalValue, repeatCount, repeatReverse);
|
|
131
186
|
}
|
|
132
187
|
if (delayMs != null && typeof delayMs === "number") {
|
|
133
|
-
final[
|
|
188
|
+
final[key2] = withDelay(delayMs, finalValue);
|
|
134
189
|
} else {
|
|
135
|
-
final[
|
|
190
|
+
final[key2] = finalValue;
|
|
136
191
|
}
|
|
137
192
|
}
|
|
138
|
-
if (process.env.NODE_ENV === "development" && props["debug"]) {
|
|
139
|
-
console.log("animation style", final);
|
|
140
|
-
}
|
|
141
193
|
return final;
|
|
142
|
-
},
|
|
194
|
+
}, [key]);
|
|
143
195
|
return useMemo(() => {
|
|
144
196
|
return {
|
|
145
197
|
style: [nonAnimatedStyle, animatedStyle]
|
|
146
198
|
};
|
|
147
|
-
},
|
|
199
|
+
}, [key]);
|
|
148
200
|
}
|
|
149
201
|
};
|
|
150
202
|
}
|
|
151
|
-
__name(createAnimations, "createAnimations");
|
|
152
203
|
function getAnimationConfig(key, animations, animation) {
|
|
153
|
-
|
|
204
|
+
"worklet";
|
|
154
205
|
if (typeof animation === "string") {
|
|
155
206
|
return animations[animation];
|
|
156
207
|
}
|
|
@@ -158,7 +209,7 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
158
209
|
let extraConf;
|
|
159
210
|
if (Array.isArray(animation)) {
|
|
160
211
|
type = animation[0];
|
|
161
|
-
const conf =
|
|
212
|
+
const conf = animation[1] && animation[1][key];
|
|
162
213
|
if (conf) {
|
|
163
214
|
if (typeof conf === "string") {
|
|
164
215
|
type = conf;
|
|
@@ -182,7 +233,6 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
182
233
|
type: found.type
|
|
183
234
|
};
|
|
184
235
|
}
|
|
185
|
-
__name(getAnimationConfig, "getAnimationConfig");
|
|
186
236
|
function animationDelay(key, animation, defaultDelay) {
|
|
187
237
|
"worklet";
|
|
188
238
|
if (!animation || !animation[key] || animation[key].delayMs === void 0 || animation[key].delayMs === null) {
|
|
@@ -194,8 +244,7 @@ function animationDelay(key, animation, defaultDelay) {
|
|
|
194
244
|
delayMs: animation[key].delayMs
|
|
195
245
|
};
|
|
196
246
|
}
|
|
197
|
-
|
|
198
|
-
const isColor = /* @__PURE__ */ __name((styleKey) => {
|
|
247
|
+
const isColor = (styleKey) => {
|
|
199
248
|
"worklet";
|
|
200
249
|
return [
|
|
201
250
|
"backgroundColor",
|
|
@@ -208,14 +257,14 @@ const isColor = /* @__PURE__ */ __name((styleKey) => {
|
|
|
208
257
|
"borderTopColor",
|
|
209
258
|
"color"
|
|
210
259
|
].includes(styleKey);
|
|
211
|
-
}
|
|
260
|
+
};
|
|
212
261
|
function getAnimation(key, animationConfig, animateOnly) {
|
|
213
262
|
"worklet";
|
|
214
263
|
if (!animationConfig || animateOnly && !animateOnly.includes(key)) {
|
|
215
264
|
return {};
|
|
216
265
|
}
|
|
217
266
|
let repeatCount = 0;
|
|
218
|
-
|
|
267
|
+
const repeatReverse = animationConfig.repeatReverse || false;
|
|
219
268
|
let animationType = (animationConfig == null ? void 0 : animationConfig.type) || "spring";
|
|
220
269
|
if (isColor(key) || key === "opacity") {
|
|
221
270
|
animationType = "timing";
|
|
@@ -240,7 +289,6 @@ function getAnimation(key, animationConfig, animateOnly) {
|
|
|
240
289
|
deceleration: 2
|
|
241
290
|
};
|
|
242
291
|
} else {
|
|
243
|
-
console.warn("no type of animation?", animationType);
|
|
244
292
|
animation = withSpring;
|
|
245
293
|
}
|
|
246
294
|
return {
|
|
@@ -251,7 +299,6 @@ function getAnimation(key, animationConfig, animateOnly) {
|
|
|
251
299
|
shouldRepeat: !!repeatCount
|
|
252
300
|
};
|
|
253
301
|
}
|
|
254
|
-
__name(getAnimation, "getAnimation");
|
|
255
302
|
export {
|
|
256
303
|
createAnimations
|
|
257
304
|
};
|
|
@@ -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, 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\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": "
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import { AnimationDriver, AnimationProp, useEvent } from '@tamagui/core'\nimport { PresenceContext, usePresence } from '@tamagui/use-presence'\nimport { useContext, useMemo } from 'react'\n// until we fix Sheet\nimport { FlatList, Animated as RNAnimated } from 'react-native'\nimport Animated, {\n WithDecayConfig,\n WithSpringConfig,\n WithTimingConfig,\n runOnJS,\n useAnimatedStyle,\n withDecay,\n withDelay,\n withRepeat,\n withSpring,\n withTiming,\n} from 'react-native-reanimated'\n\nimport {\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n} from './useAnimatedNumber'\n\n// add nice warning for if mis-configured next config:\nif (process.env.NODE_ENV === 'development') {\n if (FlatList?.['_isProxyWorm']) {\n // eslint-disable-next-line no-console\n console.warn(\n `Using reanimated with excludeReactNativeWebExports including FlatList, adjust your next.config.js, reanimated currently doesn't support tree-shaking and needs *List components around.`\n )\n }\n}\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig =\n | ({ type: 'timing'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithTimingConfig)\n | ({ type: 'spring'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithSpringConfig)\n | ({ type: 'decay'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithDecayConfig)\n\nconst animatedStyleKey = {\n transform: true,\n opacity: true,\n // backgroundColor: true,\n // color: true,\n}\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {\n const AnimatedView = Animated.View\n const AnimatedText = Animated.Text\n\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n isReactNative: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n\n // temp\n // @ts-ignore\n NumberView: RNAnimated.View,\n\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n useAnimations: (props, helpers) => {\n const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers\n const [isPresent, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n\n const exitStyle = presence?.exitVariant\n ? staticConfig.variantsParsed?.[presence.exitVariant]?.true || pseudos.exitStyle\n : pseudos.exitStyle\n\n const reanimatedOnDidAnimated = useEvent<NonNullable<typeof onDidAnimate>>((...args) => {\n onDidAnimate?.(...args)\n })\n\n const isExiting = isPresent === false\n const isEntering = !state.mounted\n\n const all = getStyle({\n isExiting,\n isEntering,\n exitVariant: presence?.exitVariant,\n enterVariant: presence?.enterVariant,\n })\n\n const [animatedStyles, nonAnimatedStyle] = [{}, {}]\n for (const key of Object.keys(all)) {\n if (animatedStyleKey[key]) {\n animatedStyles[key] = all[key]\n } else {\n nonAnimatedStyle[key] = all[key]\n }\n }\n\n const animatedString = JSON.stringify(animatedStyles)\n const key =\n animatedString +\n JSON.stringify([\n state.mounted,\n state.hover,\n state.press,\n state.pressIn,\n state.focus,\n delay,\n isPresent,\n onDidAnimate,\n presence?.exitVariant,\n presence?.enterVariant,\n ])\n\n const callback = (\n isExiting: boolean,\n exitingStyleProps: Record<string, boolean>,\n key: string,\n value: any\n ) => {\n 'worklet'\n return (completed: boolean | undefined, current: any) => {\n 'worklet'\n runOnJS(reanimatedOnDidAnimated)(key, completed, current, {\n attemptedValue: value,\n })\n if (isExiting) {\n exitingStyleProps[key] = false\n const areStylesExiting = Object.values(exitingStyleProps).some(Boolean)\n // if this is true, then we've finished our exit animations\n if (!areStylesExiting) {\n if (sendExitComplete) {\n runOnJS(sendExitComplete)()\n }\n }\n }\n }\n }\n\n const animatedStyle = useAnimatedStyle(() => {\n 'worklet'\n\n // getting issues with native unless this :/\n const style = JSON.parse(animatedString)\n\n const final = {\n transform: [] as any[],\n }\n\n const isExiting = isPresent === false\n\n const exitingStyleProps: Record<string, boolean> = {}\n if (exitStyle) {\n for (const key in exitStyle) {\n if (key === 'transform') {\n for (const attr of exitStyle[key]) {\n const tkey = Object.keys(attr)[0]\n exitingStyleProps[tkey] = true\n }\n } else {\n exitingStyleProps[key] = true\n }\n }\n }\n\n for (const key in style) {\n const value = style[key]\n const animationConfig = getAnimationConfig(key, animations, props.animation)\n const { animation, config, shouldRepeat, repeatCount, repeatReverse } = getAnimation(\n key,\n animationConfig,\n props.animateOnly\n )\n\n const { delayMs = null } = animationDelay(key, animationConfig, delay)\n\n if (!animation) {\n // eslint-disable-next-line no-console\n console.warn('No animation for', key, 'in', style)\n continue\n }\n if (!config) {\n // eslint-disable-next-line no-console\n console.warn('No animation config for', key, 'in', style)\n continue\n }\n\n if (key === 'transform') {\n if (!Array.isArray(value)) {\n // eslint-disable-next-line no-console\n console.error(`Invalid transform value. Needs to be an array.`)\n continue\n }\n\n for (const transformObject of value) {\n const key = Object.keys(transformObject)[0]\n const transformValue = transformObject[key]\n let finalValue = animation(\n transformValue,\n config as any,\n callback(isExiting, exitingStyleProps, key, value)\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n final['transform'].push({\n [key]: finalValue,\n })\n }\n continue\n }\n\n if (typeof value === 'object') {\n // shadows\n final[key] = {}\n for (const innerStyleKey of Object.keys(value || {})) {\n let finalValue = animation(\n value,\n config as any,\n callback(isExiting, exitingStyleProps, key, value)\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n if (delayMs != null) {\n final[key][innerStyleKey] = withDelay(delayMs, finalValue)\n } else {\n final[key][innerStyleKey] = finalValue\n }\n }\n continue\n }\n\n let finalValue = animation(\n value,\n config as any,\n callback(isExiting, exitingStyleProps, key, value)\n )\n if (shouldRepeat) {\n finalValue = withRepeat(finalValue, repeatCount, repeatReverse)\n }\n if (delayMs != null && typeof delayMs === 'number') {\n final[key] = withDelay(delayMs, finalValue)\n } else {\n final[key] = finalValue\n }\n\n // end for (key in mergedStyles)\n }\n\n return final\n }, [key])\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [key])\n },\n }\n}\n\nfunction getAnimationConfig(key: string, animations: AnimationsConfig, animation?: AnimationProp) {\n 'worklet'\n if (typeof animation === 'string') {\n return animations[animation]\n }\n let type = ''\n let extraConf: any\n if (Array.isArray(animation)) {\n type = animation[0] as string\n const conf = animation[1] && animation[1][key]\n if (conf) {\n if (typeof conf === 'string') {\n type = conf\n } else {\n type = (conf as any).type || type\n extraConf = conf\n }\n }\n } else {\n const val = animation?.[key]\n type = val?.type\n extraConf = val\n }\n const found = animations[type]\n if (!found) {\n throw new Error(`No animation of type \"${type}\" for key \"${key}\"`)\n }\n return {\n ...found,\n ...extraConf,\n type: found.type,\n }\n}\n\nfunction animationDelay(\n key: string,\n animation: AnimationConfig | undefined,\n defaultDelay?: number\n) {\n 'worklet'\n if (\n !animation ||\n !animation[key] ||\n animation[key].delayMs === undefined ||\n animation[key].delayMs === null\n ) {\n return {\n delayMs: null,\n }\n }\n return {\n delayMs: animation[key].delayMs as TransitionConfig['delay'],\n }\n}\n\ntype TransitionConfigWithoutRepeats = (\n | ({ type?: 'spring' } & WithSpringConfig)\n | ({ type: 'timing' } & WithTimingConfig)\n | ({ type: 'decay' } & WithDecayConfig)\n) & {\n delay?: number\n}\n\ntype TransitionConfig = TransitionConfigWithoutRepeats & {\n /**\n * Number of times this animation should repeat. To make it infinite, use the `loop` boolean.\n *\n * Default: `0`\n *\n * It's worth noting that this value isn't *exactly* a `repeat`. Instead, it uses Reanimated's `withRepeat` function under the hood, which repeats back to the **previous value**. If you want a repeated animation, I recommend setting it to `true` from the start, and make sure you have a `from` value.\n *\n * As a result, this value cannot be reliably changed on the fly. If you would like animations to repeat based on the `from` value, `repeat` must be a number when the component initializes. You can set it to `0` to stop it, but you won't be able to start it again. You might be better off using the sequence array API if you need to update its repetitiveness on the fly.\n */\n repeat?: number\n /**\n * Setting this to `true` is the same as `repeat: Infinity`\n *\n * Default: `false`\n *\n * Note: this value cannot be set on the fly. If you would like animations to repeat based on the `from` value, it must be `true` when the component initializes. You can set it to `false` to stop it, but you won't be able to start it again. You might be better off using the sequence array API if you need to update its repetitiveness on the fly.\n */\n loop?: boolean\n /**\n * Whether or not the animation repetition should alternate in direction.\n *\n * By default, this is `true`.\n *\n * If `false`, any animations with `loop` or `repeat` will not go back and forth. Instead, they will go from 0 -> 1, and again from 0 -> 1.\n *\n * If `true`, then animations will go 0 -> 1 -> 0.\n *\n * Setting this to `true` is like setting `animationDirection: alternate` in CSS.\n */\n repeatReverse?: boolean\n}\n\nconst isColor = (styleKey: string) => {\n 'worklet'\n return [\n 'backgroundColor',\n 'borderBottomColor',\n 'borderColor',\n 'borderEndColor',\n 'borderLeftColor',\n 'borderRightColor',\n 'borderStartColor',\n 'borderTopColor',\n 'color',\n ].includes(styleKey)\n}\n\nfunction getAnimation(\n key: string,\n animationConfig: AnimationConfig | undefined,\n animateOnly?: string[]\n) {\n 'worklet'\n if (!animationConfig || (animateOnly && !animateOnly.includes(key))) {\n return {}\n }\n\n let repeatCount = 0\n const repeatReverse = animationConfig.repeatReverse || false\n let animationType: Required<TransitionConfig>['type'] = animationConfig?.type || 'spring'\n\n if (isColor(key) || key === 'opacity') {\n animationType = 'timing'\n }\n\n if ('repeat' in animationConfig) {\n repeatCount = animationConfig.repeat || 0\n } else {\n if (animationConfig.loop) {\n repeatCount = animationConfig.loop ? -1 : 0\n }\n }\n\n let config = animationConfig\n let animation: typeof withTiming | typeof withSpring | typeof withDecay\n\n if (animationType === 'timing') {\n animation = withTiming\n } else if (animationType === 'spring') {\n animation = withSpring\n } else if (animationType === 'decay') {\n animation = withDecay\n config = config || {\n velocity: 2,\n deceleration: 2,\n }\n } else {\n 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
|
+
"names": ["_a", "key", "isExiting", "finalValue"]
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import './polyfill'\n\nexport * from './createAnimations'\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
4
|
+
"sourcesContent": ["import './polyfill'\n\nexport * from './createAnimations'\nexport * from './useAnimatedNumber'\n"],
|
|
5
|
+
"mappings": "AAAA,OAAO;AAEP,cAAc;AACd,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/polyfill.js
CHANGED
|
File without changes
|
package/dist/esm/polyfill.js.map
CHANGED
|
File without changes
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import {
|
|
2
|
+
useAnimatedNumber,
|
|
3
|
+
useAnimatedNumberStyle,
|
|
4
|
+
useAnimatedNumberReaction
|
|
5
|
+
} from "@tamagui/animations-react-native";
|
|
6
|
+
export {
|
|
7
|
+
useAnimatedNumber,
|
|
8
|
+
useAnimatedNumberReaction,
|
|
9
|
+
useAnimatedNumberStyle
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=useAnimatedNumber.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/useAnimatedNumber.tsx"],
|
|
4
|
+
"sourcesContent": ["// there's some bug with reanimated likely related to worklets\n// for now to not regress, we require react-native Animated alongside\nexport {\n useAnimatedNumber,\n useAnimatedNumberStyle,\n useAnimatedNumberReaction,\n} from '@tamagui/animations-react-native'\n\n// import { UniversalAnimatedNumber } from '@tamagui/core'\n// import {\n// SharedValue,\n// cancelAnimation,\n// useAnimatedReaction,\n// useAnimatedStyle,\n// useSharedValue,\n// withSpring,\n// withTiming,\n// } from 'react-native-reanimated'\n\n// type ReanimatedAnimatedNumber = SharedValue<number>\n\n// export function useAnimatedNumber(\n// initial: number\n// ): UniversalAnimatedNumber<ReanimatedAnimatedNumber> {\n// const val = useSharedValue(initial)\n// return {\n// getInstance() {\n// return val\n// },\n// getValue() {\n// return val.value\n// },\n// stop() {\n// cancelAnimation(val)\n// },\n// setValue(next: number, config = { type: 'spring' }) {\n// if (config.type === 'direct') {\n// val.value = next\n// } else if (config.type === 'spring') {\n// val.value = withSpring(next, config)\n// } else {\n// val.value = withTiming(next, config)\n// }\n// },\n// }\n// }\n\n// export function useAnimatedNumberReaction(\n// value: UniversalAnimatedNumber<ReanimatedAnimatedNumber>,\n// cb: (current: number) => void\n// ) {\n// useAnimatedReaction(\n// () => {\n// 'worklet'\n// return value.getValue()\n// },\n// (result, prev) => {\n// 'worklet'\n// if (result !== prev) cb(result)\n// },\n// [value]\n// )\n// }\n\n// export function useAnimatedNumberStyle<V extends UniversalAnimatedNumber<ReanimatedAnimatedNumber>>(\n// value: V,\n// getStyle: (value: number) => any\n// ) {\n// return useAnimatedStyle(() => {\n// 'worklet'\n// return getStyle(value.getValue())\n// })\n// }\n"],
|
|
5
|
+
"mappings": "AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|