@tamagui/animations-react-native 1.0.1-beta.140 → 1.0.1-beta.143
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 +93 -18
- package/dist/cjs/createAnimations.js.map +2 -2
- package/dist/cjs/index.js +0 -0
- package/dist/cjs/index.js.map +0 -0
- package/dist/cjs/polyfill.js +0 -0
- package/dist/cjs/polyfill.js.map +0 -0
- package/dist/esm/createAnimations.js +93 -19
- package/dist/esm/createAnimations.js.map +2 -2
- package/dist/esm/index.js +0 -0
- package/dist/esm/index.js.map +0 -0
- package/dist/esm/polyfill.js +0 -0
- package/dist/esm/polyfill.js.map +0 -0
- package/dist/jsx/createAnimations.js +101 -31
- package/dist/jsx/createAnimations.js.map +2 -2
- package/dist/jsx/index.js +0 -0
- package/dist/jsx/index.js.map +0 -0
- package/dist/jsx/polyfill.js +0 -0
- package/dist/jsx/polyfill.js.map +0 -0
- package/package.json +7 -5
- package/src/createAnimations.tsx +108 -20
- package/types/createAnimations.d.ts +6 -1
|
@@ -18,7 +18,12 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
19
|
var createAnimations_exports = {};
|
|
20
20
|
__export(createAnimations_exports, {
|
|
21
|
-
|
|
21
|
+
AnimatedText: () => AnimatedText,
|
|
22
|
+
AnimatedView: () => AnimatedView,
|
|
23
|
+
createAnimations: () => createAnimations,
|
|
24
|
+
useAnimatedNumber: () => useAnimatedNumber,
|
|
25
|
+
useAnimatedNumberReaction: () => useAnimatedNumberReaction,
|
|
26
|
+
useAnimatedNumberStyle: () => useAnimatedNumberStyle
|
|
22
27
|
});
|
|
23
28
|
module.exports = __toCommonJS(createAnimations_exports);
|
|
24
29
|
var import_animate_presence = require("@tamagui/animate-presence");
|
|
@@ -29,9 +34,71 @@ const animatedStyleKey = {
|
|
|
29
34
|
transform: true,
|
|
30
35
|
opacity: true
|
|
31
36
|
};
|
|
37
|
+
const AnimatedView = import_react_native.Animated.View;
|
|
38
|
+
const AnimatedText = import_react_native.Animated.Text;
|
|
39
|
+
function useAnimatedNumber(initial) {
|
|
40
|
+
const state = (0, import_react.useRef)(null);
|
|
41
|
+
if (!state.current) {
|
|
42
|
+
state.current = {
|
|
43
|
+
composite: null,
|
|
44
|
+
val: new import_react_native.Animated.Value(initial),
|
|
45
|
+
strategy: { type: "spring" }
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
return {
|
|
49
|
+
getInstance() {
|
|
50
|
+
return state.current.val;
|
|
51
|
+
},
|
|
52
|
+
getValue() {
|
|
53
|
+
return state.current.val["_value"];
|
|
54
|
+
},
|
|
55
|
+
stop() {
|
|
56
|
+
var _a;
|
|
57
|
+
(_a = state.current.composite) == null ? void 0 : _a.stop();
|
|
58
|
+
state.current.composite = null;
|
|
59
|
+
},
|
|
60
|
+
setValue(next, { type, ...config } = { type: "spring" }) {
|
|
61
|
+
var _a, _b;
|
|
62
|
+
const val = state.current.val;
|
|
63
|
+
if (type === "direct") {
|
|
64
|
+
val.setValue(next);
|
|
65
|
+
} else if (type === "spring") {
|
|
66
|
+
(_a = state.current.composite) == null ? void 0 : _a.stop();
|
|
67
|
+
const composite = import_react_native.Animated.spring(val, {
|
|
68
|
+
...config,
|
|
69
|
+
toValue: next,
|
|
70
|
+
useNativeDriver: !import_core.isWeb
|
|
71
|
+
});
|
|
72
|
+
composite.start();
|
|
73
|
+
state.current.composite = composite;
|
|
74
|
+
} else {
|
|
75
|
+
(_b = state.current.composite) == null ? void 0 : _b.stop();
|
|
76
|
+
const composite = import_react_native.Animated.timing(val, {
|
|
77
|
+
...config,
|
|
78
|
+
toValue: next,
|
|
79
|
+
useNativeDriver: !import_core.isWeb
|
|
80
|
+
});
|
|
81
|
+
composite.start();
|
|
82
|
+
state.current.composite = composite;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
function useAnimatedNumberReaction(value, cb) {
|
|
88
|
+
const onChange = (0, import_core.useEvent)((current) => {
|
|
89
|
+
cb(current.value);
|
|
90
|
+
});
|
|
91
|
+
(0, import_react.useEffect)(() => {
|
|
92
|
+
const id = value.getInstance().addListener(onChange);
|
|
93
|
+
return () => {
|
|
94
|
+
value.getInstance().removeListener(id);
|
|
95
|
+
};
|
|
96
|
+
}, [value, onChange]);
|
|
97
|
+
}
|
|
98
|
+
function useAnimatedNumberStyle(value, getStyle) {
|
|
99
|
+
return getStyle(value.getInstance());
|
|
100
|
+
}
|
|
32
101
|
function createAnimations(animations) {
|
|
33
|
-
const AnimatedView = import_react_native.Animated.View;
|
|
34
|
-
const AnimatedText = import_react_native.Animated.Text;
|
|
35
102
|
AnimatedView["displayName"] = "AnimatedView";
|
|
36
103
|
AnimatedText["displayName"] = "AnimatedText";
|
|
37
104
|
return {
|
|
@@ -39,6 +106,9 @@ function createAnimations(animations) {
|
|
|
39
106
|
animations,
|
|
40
107
|
View: AnimatedView,
|
|
41
108
|
Text: AnimatedText,
|
|
109
|
+
useAnimatedNumber,
|
|
110
|
+
useAnimatedNumberReaction,
|
|
111
|
+
useAnimatedNumberStyle,
|
|
42
112
|
useAnimations: (props, helpers) => {
|
|
43
113
|
var _a;
|
|
44
114
|
const { onDidAnimate, delay, getStyle, state } = helpers;
|
|
@@ -94,21 +164,8 @@ function createAnimations(animations) {
|
|
|
94
164
|
const [_, number, after] = input.match(/([-0-9]+)(deg|%)/) ?? [];
|
|
95
165
|
return [+number * (neg ? -1 : 1), after];
|
|
96
166
|
}
|
|
97
|
-
function getInterpolated(val, postfix, next) {
|
|
98
|
-
const cur = val["_value"];
|
|
99
|
-
const inputRange = [cur, next];
|
|
100
|
-
const outputRange = [`${cur}deg`, `${next}deg`];
|
|
101
|
-
if (next < cur) {
|
|
102
|
-
inputRange.reverse();
|
|
103
|
-
outputRange.reverse();
|
|
104
|
-
}
|
|
105
|
-
return val.interpolate({
|
|
106
|
-
inputRange,
|
|
107
|
-
outputRange
|
|
108
|
-
});
|
|
109
|
-
}
|
|
110
167
|
const nonAnimatedStyle = {};
|
|
111
|
-
for (const key
|
|
168
|
+
for (const key in all) {
|
|
112
169
|
const val = all[key];
|
|
113
170
|
if (animatedStyleKey[key]) {
|
|
114
171
|
if (key === "transform") {
|
|
@@ -171,6 +228,19 @@ function createAnimations(animations) {
|
|
|
171
228
|
}
|
|
172
229
|
};
|
|
173
230
|
}
|
|
231
|
+
function getInterpolated(val, postfix, next) {
|
|
232
|
+
const cur = val["_value"];
|
|
233
|
+
const inputRange = [cur, next];
|
|
234
|
+
const outputRange = [`${cur}deg`, `${next}deg`];
|
|
235
|
+
if (next < cur) {
|
|
236
|
+
inputRange.reverse();
|
|
237
|
+
outputRange.reverse();
|
|
238
|
+
}
|
|
239
|
+
return val.interpolate({
|
|
240
|
+
inputRange,
|
|
241
|
+
outputRange
|
|
242
|
+
});
|
|
243
|
+
}
|
|
174
244
|
function getAnimationConfig(key, animations, animation) {
|
|
175
245
|
if (typeof animation === "string") {
|
|
176
246
|
return animations[animation];
|
|
@@ -204,6 +274,11 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
204
274
|
}
|
|
205
275
|
// Annotate the CommonJS export names for ESM import in node:
|
|
206
276
|
0 && (module.exports = {
|
|
207
|
-
|
|
277
|
+
AnimatedText,
|
|
278
|
+
AnimatedView,
|
|
279
|
+
createAnimations,
|
|
280
|
+
useAnimatedNumber,
|
|
281
|
+
useAnimatedNumberReaction,
|
|
282
|
+
useAnimatedNumberStyle
|
|
208
283
|
});
|
|
209
284
|
//# sourceMappingURL=createAnimations.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA6C;AAC7C,
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport {\n AnimatedNumberStrategy,\n AnimationDriver,\n AnimationProp,\n UniversalAnimatedNumber,\n isWeb,\n useEvent,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { useContext, useEffect, useMemo, useRef } from 'react'\nimport { Animated } from 'react-native'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig = Partial<\n Pick<\n Animated.SpringAnimationConfig,\n | 'delay'\n | 'bounciness'\n | 'damping'\n | 'friction'\n | 'mass'\n | 'overshootClamping'\n | 'speed'\n | 'stiffness'\n | 'tension'\n | 'velocity'\n >\n>\n\nconst animatedStyleKey = {\n transform: true,\n opacity: true,\n}\n\nexport const AnimatedView = Animated.View\nexport const AnimatedText = Animated.Text\n\nexport function useAnimatedNumber(initial: number): UniversalAnimatedNumber<Animated.Value> {\n const state = useRef(\n null as any as {\n val: Animated.Value\n composite: Animated.CompositeAnimation | null\n strategy: AnimatedNumberStrategy\n }\n )\n if (!state.current) {\n state.current = {\n composite: null,\n val: new Animated.Value(initial),\n strategy: { type: 'spring' },\n }\n }\n\n return {\n getInstance() {\n return state.current.val\n },\n getValue() {\n return state.current.val['_value']\n },\n stop() {\n state.current.composite?.stop()\n state.current.composite = null\n },\n setValue(next: number, { type, ...config } = { type: 'spring' }) {\n const val = state.current.val\n if (type === 'direct') {\n val.setValue(next)\n } else if (type === 'spring') {\n state.current.composite?.stop()\n const composite = Animated.spring(val, {\n ...config,\n toValue: next,\n useNativeDriver: !isWeb,\n })\n composite.start()\n state.current.composite = composite\n } else {\n state.current.composite?.stop()\n const composite = Animated.timing(val, {\n ...config,\n toValue: next,\n useNativeDriver: !isWeb,\n })\n composite.start()\n state.current.composite = composite\n }\n },\n }\n}\n\nexport function useAnimatedNumberReaction(\n value: UniversalAnimatedNumber<Animated.Value>,\n cb: (current: number) => void\n) {\n const onChange = useEvent((current) => {\n cb(current.value)\n })\n\n useEffect(() => {\n const id = value.getInstance().addListener(onChange)\n return () => {\n value.getInstance().removeListener(id)\n }\n }, [value, onChange])\n}\n\nexport function useAnimatedNumberStyle<V extends UniversalAnimatedNumber<Animated.Value>>(\n value: V,\n getStyle: (value: any) => any\n) {\n return getStyle(value.getInstance())\n}\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n useAnimations: (props, helpers) => {\n const { onDidAnimate, delay, getStyle, state } = 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 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 animateStyles = useRef<Record<string, Animated.Value>>({})\n const animatedTranforms = useRef<{ [key: string]: Animated.Value }[]>([])\n const interpolations = useRef(new WeakMap<Animated.Value, Animated.AnimatedInterpolation>())\n\n // TODO loop and create values, run them if they change\n\n const runners: Function[] = []\n const completions: Promise<void>[] = []\n\n function update(key: string, animated: Animated.Value | undefined, valIn: string | number) {\n const [val, type] = getValue(valIn)\n const value = animated || new Animated.Value(val)\n if (type) {\n interpolations.current.set(value, getInterpolated(value, type, val))\n }\n if (animated) {\n const animationConfig = getAnimationConfig(key, animations, props.animation)\n\n let resolve\n const promise = new Promise<void>((res) => {\n resolve = res\n })\n completions.push(promise)\n\n runners.push(() => {\n Animated.spring(animated, {\n toValue: val,\n useNativeDriver: !isWeb,\n ...animationConfig,\n }).start(({ finished }) => {\n if (finished) {\n resolve()\n }\n })\n })\n }\n return value\n }\n\n function getValue(input: number | string) {\n if (typeof input !== 'string') {\n return [input] as const\n }\n const neg = input[0] === '-'\n if (neg) input = input.slice(1)\n const [_, number, after] = input.match(/([-0-9]+)(deg|%)/) ?? []\n return [+number * (neg ? -1 : 1), after] as const\n }\n\n const nonAnimatedStyle = {}\n for (const key in all) {\n const val = all[key]\n if (animatedStyleKey[key]) {\n if (key === 'transform') {\n // for now just support one transform key\n if (val) {\n for (const [index, transform] of val.entries()) {\n if (!transform) continue\n const tkey = Object.keys(transform)[0]\n animatedTranforms.current[index] = {\n [tkey]: update(tkey, animatedTranforms.current[index]?.[tkey], transform[tkey]),\n }\n }\n }\n } else {\n animateStyles.current[key] = update(key, animateStyles.current[key], val)\n }\n } else {\n nonAnimatedStyle[key] = val\n }\n }\n\n const animatedStyle = {\n ...Object.fromEntries(\n Object.entries({\n ...animateStyles.current,\n }).map(([k, v]) => [k, interpolations.current.get(v) || v])\n ),\n transform: animatedTranforms.current.map((r) => {\n const key = Object.keys(r)[0]\n const val = interpolations.current.get(r[key]) || r[key]\n return { [key]: val }\n }),\n }\n\n const args = [\n JSON.stringify(all),\n state.mounted,\n state.hover,\n state.press,\n state.pressIn,\n state.focus,\n delay,\n isPresent,\n onDidAnimate,\n presence?.exitVariant,\n presence?.enterVariant,\n ]\n\n useIsomorphicLayoutEffect(() => {\n //\n for (const runner of runners) {\n runner()\n }\n Promise.all(completions).then(() => {\n onDidAnimate?.()\n if (isExiting) {\n sendExitComplete?.()\n }\n })\n }, args)\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, args)\n },\n }\n}\n\nfunction getInterpolated(val: Animated.Value, postfix: string, next: number) {\n const cur = val['_value'] as number\n const inputRange = [cur, next]\n const outputRange = [`${cur}deg`, `${next}deg`]\n if (next < cur) {\n inputRange.reverse()\n outputRange.reverse()\n }\n return val.interpolate({\n inputRange,\n outputRange,\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] && 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 }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
File without changes
|
package/dist/cjs/index.js.map
CHANGED
|
File without changes
|
package/dist/cjs/polyfill.js
CHANGED
|
File without changes
|
package/dist/cjs/polyfill.js.map
CHANGED
|
File without changes
|
|
@@ -1,14 +1,80 @@
|
|
|
1
1
|
import { PresenceContext, usePresence } from "@tamagui/animate-presence";
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import {
|
|
3
|
+
isWeb,
|
|
4
|
+
useEvent,
|
|
5
|
+
useIsomorphicLayoutEffect
|
|
6
|
+
} from "@tamagui/core";
|
|
7
|
+
import { useContext, useEffect, useMemo, useRef } from "react";
|
|
4
8
|
import { Animated } from "react-native";
|
|
5
9
|
const animatedStyleKey = {
|
|
6
10
|
transform: true,
|
|
7
11
|
opacity: true
|
|
8
12
|
};
|
|
13
|
+
const AnimatedView = Animated.View;
|
|
14
|
+
const AnimatedText = Animated.Text;
|
|
15
|
+
function useAnimatedNumber(initial) {
|
|
16
|
+
const state = useRef(null);
|
|
17
|
+
if (!state.current) {
|
|
18
|
+
state.current = {
|
|
19
|
+
composite: null,
|
|
20
|
+
val: new Animated.Value(initial),
|
|
21
|
+
strategy: { type: "spring" }
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
return {
|
|
25
|
+
getInstance() {
|
|
26
|
+
return state.current.val;
|
|
27
|
+
},
|
|
28
|
+
getValue() {
|
|
29
|
+
return state.current.val["_value"];
|
|
30
|
+
},
|
|
31
|
+
stop() {
|
|
32
|
+
var _a;
|
|
33
|
+
(_a = state.current.composite) == null ? void 0 : _a.stop();
|
|
34
|
+
state.current.composite = null;
|
|
35
|
+
},
|
|
36
|
+
setValue(next, { type, ...config } = { type: "spring" }) {
|
|
37
|
+
var _a, _b;
|
|
38
|
+
const val = state.current.val;
|
|
39
|
+
if (type === "direct") {
|
|
40
|
+
val.setValue(next);
|
|
41
|
+
} else if (type === "spring") {
|
|
42
|
+
(_a = state.current.composite) == null ? void 0 : _a.stop();
|
|
43
|
+
const composite = Animated.spring(val, {
|
|
44
|
+
...config,
|
|
45
|
+
toValue: next,
|
|
46
|
+
useNativeDriver: !isWeb
|
|
47
|
+
});
|
|
48
|
+
composite.start();
|
|
49
|
+
state.current.composite = composite;
|
|
50
|
+
} else {
|
|
51
|
+
(_b = state.current.composite) == null ? void 0 : _b.stop();
|
|
52
|
+
const composite = Animated.timing(val, {
|
|
53
|
+
...config,
|
|
54
|
+
toValue: next,
|
|
55
|
+
useNativeDriver: !isWeb
|
|
56
|
+
});
|
|
57
|
+
composite.start();
|
|
58
|
+
state.current.composite = composite;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
function useAnimatedNumberReaction(value, cb) {
|
|
64
|
+
const onChange = useEvent((current) => {
|
|
65
|
+
cb(current.value);
|
|
66
|
+
});
|
|
67
|
+
useEffect(() => {
|
|
68
|
+
const id = value.getInstance().addListener(onChange);
|
|
69
|
+
return () => {
|
|
70
|
+
value.getInstance().removeListener(id);
|
|
71
|
+
};
|
|
72
|
+
}, [value, onChange]);
|
|
73
|
+
}
|
|
74
|
+
function useAnimatedNumberStyle(value, getStyle) {
|
|
75
|
+
return getStyle(value.getInstance());
|
|
76
|
+
}
|
|
9
77
|
function createAnimations(animations) {
|
|
10
|
-
const AnimatedView = Animated.View;
|
|
11
|
-
const AnimatedText = Animated.Text;
|
|
12
78
|
AnimatedView["displayName"] = "AnimatedView";
|
|
13
79
|
AnimatedText["displayName"] = "AnimatedText";
|
|
14
80
|
return {
|
|
@@ -16,6 +82,9 @@ function createAnimations(animations) {
|
|
|
16
82
|
animations,
|
|
17
83
|
View: AnimatedView,
|
|
18
84
|
Text: AnimatedText,
|
|
85
|
+
useAnimatedNumber,
|
|
86
|
+
useAnimatedNumberReaction,
|
|
87
|
+
useAnimatedNumberStyle,
|
|
19
88
|
useAnimations: (props, helpers) => {
|
|
20
89
|
var _a;
|
|
21
90
|
const { onDidAnimate, delay, getStyle, state } = helpers;
|
|
@@ -71,21 +140,8 @@ function createAnimations(animations) {
|
|
|
71
140
|
const [_, number, after] = input.match(/([-0-9]+)(deg|%)/) ?? [];
|
|
72
141
|
return [+number * (neg ? -1 : 1), after];
|
|
73
142
|
}
|
|
74
|
-
function getInterpolated(val, postfix, next) {
|
|
75
|
-
const cur = val["_value"];
|
|
76
|
-
const inputRange = [cur, next];
|
|
77
|
-
const outputRange = [`${cur}deg`, `${next}deg`];
|
|
78
|
-
if (next < cur) {
|
|
79
|
-
inputRange.reverse();
|
|
80
|
-
outputRange.reverse();
|
|
81
|
-
}
|
|
82
|
-
return val.interpolate({
|
|
83
|
-
inputRange,
|
|
84
|
-
outputRange
|
|
85
|
-
});
|
|
86
|
-
}
|
|
87
143
|
const nonAnimatedStyle = {};
|
|
88
|
-
for (const key
|
|
144
|
+
for (const key in all) {
|
|
89
145
|
const val = all[key];
|
|
90
146
|
if (animatedStyleKey[key]) {
|
|
91
147
|
if (key === "transform") {
|
|
@@ -148,6 +204,19 @@ function createAnimations(animations) {
|
|
|
148
204
|
}
|
|
149
205
|
};
|
|
150
206
|
}
|
|
207
|
+
function getInterpolated(val, postfix, next) {
|
|
208
|
+
const cur = val["_value"];
|
|
209
|
+
const inputRange = [cur, next];
|
|
210
|
+
const outputRange = [`${cur}deg`, `${next}deg`];
|
|
211
|
+
if (next < cur) {
|
|
212
|
+
inputRange.reverse();
|
|
213
|
+
outputRange.reverse();
|
|
214
|
+
}
|
|
215
|
+
return val.interpolate({
|
|
216
|
+
inputRange,
|
|
217
|
+
outputRange
|
|
218
|
+
});
|
|
219
|
+
}
|
|
151
220
|
function getAnimationConfig(key, animations, animation) {
|
|
152
221
|
if (typeof animation === "string") {
|
|
153
222
|
return animations[animation];
|
|
@@ -180,6 +249,11 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
180
249
|
};
|
|
181
250
|
}
|
|
182
251
|
export {
|
|
183
|
-
|
|
252
|
+
AnimatedText,
|
|
253
|
+
AnimatedView,
|
|
254
|
+
createAnimations,
|
|
255
|
+
useAnimatedNumber,
|
|
256
|
+
useAnimatedNumberReaction,
|
|
257
|
+
useAnimatedNumberStyle
|
|
184
258
|
};
|
|
185
259
|
//# sourceMappingURL=createAnimations.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport {
|
|
5
|
-
"mappings": "AAAA;AACA;
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport {\n AnimatedNumberStrategy,\n AnimationDriver,\n AnimationProp,\n UniversalAnimatedNumber,\n isWeb,\n useEvent,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { useContext, useEffect, useMemo, useRef } from 'react'\nimport { Animated } from 'react-native'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig = Partial<\n Pick<\n Animated.SpringAnimationConfig,\n | 'delay'\n | 'bounciness'\n | 'damping'\n | 'friction'\n | 'mass'\n | 'overshootClamping'\n | 'speed'\n | 'stiffness'\n | 'tension'\n | 'velocity'\n >\n>\n\nconst animatedStyleKey = {\n transform: true,\n opacity: true,\n}\n\nexport const AnimatedView = Animated.View\nexport const AnimatedText = Animated.Text\n\nexport function useAnimatedNumber(initial: number): UniversalAnimatedNumber<Animated.Value> {\n const state = useRef(\n null as any as {\n val: Animated.Value\n composite: Animated.CompositeAnimation | null\n strategy: AnimatedNumberStrategy\n }\n )\n if (!state.current) {\n state.current = {\n composite: null,\n val: new Animated.Value(initial),\n strategy: { type: 'spring' },\n }\n }\n\n return {\n getInstance() {\n return state.current.val\n },\n getValue() {\n return state.current.val['_value']\n },\n stop() {\n state.current.composite?.stop()\n state.current.composite = null\n },\n setValue(next: number, { type, ...config } = { type: 'spring' }) {\n const val = state.current.val\n if (type === 'direct') {\n val.setValue(next)\n } else if (type === 'spring') {\n state.current.composite?.stop()\n const composite = Animated.spring(val, {\n ...config,\n toValue: next,\n useNativeDriver: !isWeb,\n })\n composite.start()\n state.current.composite = composite\n } else {\n state.current.composite?.stop()\n const composite = Animated.timing(val, {\n ...config,\n toValue: next,\n useNativeDriver: !isWeb,\n })\n composite.start()\n state.current.composite = composite\n }\n },\n }\n}\n\nexport function useAnimatedNumberReaction(\n value: UniversalAnimatedNumber<Animated.Value>,\n cb: (current: number) => void\n) {\n const onChange = useEvent((current) => {\n cb(current.value)\n })\n\n useEffect(() => {\n const id = value.getInstance().addListener(onChange)\n return () => {\n value.getInstance().removeListener(id)\n }\n }, [value, onChange])\n}\n\nexport function useAnimatedNumberStyle<V extends UniversalAnimatedNumber<Animated.Value>>(\n value: V,\n getStyle: (value: any) => any\n) {\n return getStyle(value.getInstance())\n}\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n useAnimations: (props, helpers) => {\n const { onDidAnimate, delay, getStyle, state } = 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 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 animateStyles = useRef<Record<string, Animated.Value>>({})\n const animatedTranforms = useRef<{ [key: string]: Animated.Value }[]>([])\n const interpolations = useRef(new WeakMap<Animated.Value, Animated.AnimatedInterpolation>())\n\n // TODO loop and create values, run them if they change\n\n const runners: Function[] = []\n const completions: Promise<void>[] = []\n\n function update(key: string, animated: Animated.Value | undefined, valIn: string | number) {\n const [val, type] = getValue(valIn)\n const value = animated || new Animated.Value(val)\n if (type) {\n interpolations.current.set(value, getInterpolated(value, type, val))\n }\n if (animated) {\n const animationConfig = getAnimationConfig(key, animations, props.animation)\n\n let resolve\n const promise = new Promise<void>((res) => {\n resolve = res\n })\n completions.push(promise)\n\n runners.push(() => {\n Animated.spring(animated, {\n toValue: val,\n useNativeDriver: !isWeb,\n ...animationConfig,\n }).start(({ finished }) => {\n if (finished) {\n resolve()\n }\n })\n })\n }\n return value\n }\n\n function getValue(input: number | string) {\n if (typeof input !== 'string') {\n return [input] as const\n }\n const neg = input[0] === '-'\n if (neg) input = input.slice(1)\n const [_, number, after] = input.match(/([-0-9]+)(deg|%)/) ?? []\n return [+number * (neg ? -1 : 1), after] as const\n }\n\n const nonAnimatedStyle = {}\n for (const key in all) {\n const val = all[key]\n if (animatedStyleKey[key]) {\n if (key === 'transform') {\n // for now just support one transform key\n if (val) {\n for (const [index, transform] of val.entries()) {\n if (!transform) continue\n const tkey = Object.keys(transform)[0]\n animatedTranforms.current[index] = {\n [tkey]: update(tkey, animatedTranforms.current[index]?.[tkey], transform[tkey]),\n }\n }\n }\n } else {\n animateStyles.current[key] = update(key, animateStyles.current[key], val)\n }\n } else {\n nonAnimatedStyle[key] = val\n }\n }\n\n const animatedStyle = {\n ...Object.fromEntries(\n Object.entries({\n ...animateStyles.current,\n }).map(([k, v]) => [k, interpolations.current.get(v) || v])\n ),\n transform: animatedTranforms.current.map((r) => {\n const key = Object.keys(r)[0]\n const val = interpolations.current.get(r[key]) || r[key]\n return { [key]: val }\n }),\n }\n\n const args = [\n JSON.stringify(all),\n state.mounted,\n state.hover,\n state.press,\n state.pressIn,\n state.focus,\n delay,\n isPresent,\n onDidAnimate,\n presence?.exitVariant,\n presence?.enterVariant,\n ]\n\n useIsomorphicLayoutEffect(() => {\n //\n for (const runner of runners) {\n runner()\n }\n Promise.all(completions).then(() => {\n onDidAnimate?.()\n if (isExiting) {\n sendExitComplete?.()\n }\n })\n }, args)\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, args)\n },\n }\n}\n\nfunction getInterpolated(val: Animated.Value, postfix: string, next: number) {\n const cur = val['_value'] as number\n const inputRange = [cur, next]\n const outputRange = [`${cur}deg`, `${next}deg`]\n if (next < cur) {\n inputRange.reverse()\n outputRange.reverse()\n }\n return val.interpolate({\n inputRange,\n outputRange,\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] && 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 }\n}\n"],
|
|
5
|
+
"mappings": "AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AASA;AACA;AAsBA,MAAM,mBAAmB;AAAA,EACvB,WAAW;AAAA,EACX,SAAS;AACX;AAEO,MAAM,eAAe,SAAS;AAC9B,MAAM,eAAe,SAAS;AAE9B,2BAA2B,SAA0D;AAC1F,QAAM,QAAQ,OACZ,IAKF;AACA,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,WAAW;AAAA,MACX,KAAK,IAAI,SAAS,MAAM,OAAO;AAAA,MAC/B,UAAU,EAAE,MAAM,SAAS;AAAA,IAC7B;AAAA,EACF;AAEA,SAAO;AAAA,IACL,cAAc;AACZ,aAAO,MAAM,QAAQ;AAAA,IACvB;AAAA,IACA,WAAW;AACT,aAAO,MAAM,QAAQ,IAAI;AAAA,IAC3B;AAAA,IACA,OAAO;AAhEX;AAiEM,kBAAM,QAAQ,cAAd,mBAAyB;AACzB,YAAM,QAAQ,YAAY;AAAA,IAC5B;AAAA,IACA,SAAS,MAAc,EAAE,SAAS,WAAW,EAAE,MAAM,SAAS,GAAG;AApErE;AAqEM,YAAM,MAAM,MAAM,QAAQ;AAC1B,UAAI,SAAS,UAAU;AACrB,YAAI,SAAS,IAAI;AAAA,MACnB,WAAW,SAAS,UAAU;AAC5B,oBAAM,QAAQ,cAAd,mBAAyB;AACzB,cAAM,YAAY,SAAS,OAAO,KAAK;AAAA,UACrC,GAAG;AAAA,UACH,SAAS;AAAA,UACT,iBAAiB,CAAC;AAAA,QACpB,CAAC;AACD,kBAAU,MAAM;AAChB,cAAM,QAAQ,YAAY;AAAA,MAC5B,OAAO;AACL,oBAAM,QAAQ,cAAd,mBAAyB;AACzB,cAAM,YAAY,SAAS,OAAO,KAAK;AAAA,UACrC,GAAG;AAAA,UACH,SAAS;AAAA,UACT,iBAAiB,CAAC;AAAA,QACpB,CAAC;AACD,kBAAU,MAAM;AAChB,cAAM,QAAQ,YAAY;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AACF;AAEO,mCACL,OACA,IACA;AACA,QAAM,WAAW,SAAS,CAAC,YAAY;AACrC,OAAG,QAAQ,KAAK;AAAA,EAClB,CAAC;AAED,YAAU,MAAM;AACd,UAAM,KAAK,MAAM,YAAY,EAAE,YAAY,QAAQ;AACnD,WAAO,MAAM;AACX,YAAM,YAAY,EAAE,eAAe,EAAE;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,OAAO,QAAQ,CAAC;AACtB;AAEO,gCACL,OACA,UACA;AACA,SAAO,SAAS,MAAM,YAAY,CAAC;AACrC;AAEO,0BAAsD,YAAmC;AAC9F,eAAa,iBAAiB;AAC9B,eAAa,iBAAiB;AAE9B,SAAO;AAAA,IACL,cAAc;AAAA,IACd;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,CAAC,OAAO,YAAY;AAlIvC;AAmIM,YAAM,EAAE,cAAc,OAAO,UAAU,UAAU;AACjD,YAAM,CAAC,WAAW,oBAAoB,YAAY;AAClD,YAAM,WAAW,WAAW,eAAe;AAM3C,YAAM,YAAY,cAAc;AAChC,YAAM,aAAa,CAAC,MAAM;AAE1B,YAAM,MAAM,SAAS;AAAA,QACnB;AAAA,QACA;AAAA,QACA,aAAa,qCAAU;AAAA,QACvB,cAAc,qCAAU;AAAA,MAC1B,CAAC;AAED,YAAM,gBAAgB,OAAuC,CAAC,CAAC;AAC/D,YAAM,oBAAoB,OAA4C,CAAC,CAAC;AACxE,YAAM,iBAAiB,OAAO,oBAAI,QAAwD,CAAC;AAI3F,YAAM,UAAsB,CAAC;AAC7B,YAAM,cAA+B,CAAC;AAEtC,sBAAgB,KAAa,UAAsC,OAAwB;AACzF,cAAM,CAAC,KAAK,QAAQ,SAAS,KAAK;AAClC,cAAM,QAAQ,YAAY,IAAI,SAAS,MAAM,GAAG;AAChD,YAAI,MAAM;AACR,yBAAe,QAAQ,IAAI,OAAO,gBAAgB,OAAO,MAAM,GAAG,CAAC;AAAA,QACrE;AACA,YAAI,UAAU;AACZ,gBAAM,kBAAkB,mBAAmB,KAAK,YAAY,MAAM,SAAS;AAE3E,cAAI;AACJ,gBAAM,UAAU,IAAI,QAAc,CAAC,QAAQ;AACzC,sBAAU;AAAA,UACZ,CAAC;AACD,sBAAY,KAAK,OAAO;AAExB,kBAAQ,KAAK,MAAM;AACjB,qBAAS,OAAO,UAAU;AAAA,cACxB,SAAS;AAAA,cACT,iBAAiB,CAAC;AAAA,cAClB,GAAG;AAAA,YACL,CAAC,EAAE,MAAM,CAAC,EAAE,eAAe;AACzB,kBAAI,UAAU;AACZ,wBAAQ;AAAA,cACV;AAAA,YACF,CAAC;AAAA,UACH,CAAC;AAAA,QACH;AACA,eAAO;AAAA,MACT;AAEA,wBAAkB,OAAwB;AACxC,YAAI,OAAO,UAAU,UAAU;AAC7B,iBAAO,CAAC,KAAK;AAAA,QACf;AACA,cAAM,MAAM,MAAM,OAAO;AACzB,YAAI;AAAK,kBAAQ,MAAM,MAAM,CAAC;AAC9B,cAAM,CAAC,GAAG,QAAQ,SAAS,MAAM,MAAM,kBAAkB,KAAK,CAAC;AAC/D,eAAO,CAAC,CAAC,SAAU,OAAM,KAAK,IAAI,KAAK;AAAA,MACzC;AAEA,YAAM,mBAAmB,CAAC;AAC1B,iBAAW,OAAO,KAAK;AACrB,cAAM,MAAM,IAAI;AAChB,YAAI,iBAAiB,MAAM;AACzB,cAAI,QAAQ,aAAa;AAEvB,gBAAI,KAAK;AACP,yBAAW,CAAC,OAAO,cAAc,IAAI,QAAQ,GAAG;AAC9C,oBAAI,CAAC;AAAW;AAChB,sBAAM,OAAO,OAAO,KAAK,SAAS,EAAE;AACpC,kCAAkB,QAAQ,SAAS;AAAA,kBACjC,CAAC,OAAO,OAAO,MAAM,wBAAkB,QAAQ,WAA1B,mBAAmC,OAAO,UAAU,KAAK;AAAA,gBAChF;AAAA,cACF;AAAA,YACF;AAAA,UACF,OAAO;AACL,0BAAc,QAAQ,OAAO,OAAO,KAAK,cAAc,QAAQ,MAAM,GAAG;AAAA,UAC1E;AAAA,QACF,OAAO;AACL,2BAAiB,OAAO;AAAA,QAC1B;AAAA,MACF;AAEA,YAAM,gBAAgB;AAAA,QACpB,GAAG,OAAO,YACR,OAAO,QAAQ;AAAA,UACb,GAAG,cAAc;AAAA,QACnB,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,eAAe,QAAQ,IAAI,CAAC,KAAK,CAAC,CAAC,CAC5D;AAAA,QACA,WAAW,kBAAkB,QAAQ,IAAI,CAAC,MAAM;AAC9C,gBAAM,MAAM,OAAO,KAAK,CAAC,EAAE;AAC3B,gBAAM,MAAM,eAAe,QAAQ,IAAI,EAAE,IAAI,KAAK,EAAE;AACpD,iBAAO,EAAE,CAAC,MAAM,IAAI;AAAA,QACtB,CAAC;AAAA,MACH;AAEA,YAAM,OAAO;AAAA,QACX,KAAK,UAAU,GAAG;AAAA,QAClB,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,qCAAU;AAAA,QACV,qCAAU;AAAA,MACZ;AAEA,gCAA0B,MAAM;AAE9B,mBAAW,UAAU,SAAS;AAC5B,iBAAO;AAAA,QACT;AACA,gBAAQ,IAAI,WAAW,EAAE,KAAK,MAAM;AAClC;AACA,cAAI,WAAW;AACb;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH,GAAG,IAAI;AAEP,aAAO,QAAQ,MAAM;AACnB,eAAO;AAAA,UACL,OAAO,CAAC,kBAAkB,aAAa;AAAA,QACzC;AAAA,MAEF,GAAG,IAAI;AAAA,IACT;AAAA,EACF;AACF;AAEA,yBAAyB,KAAqB,SAAiB,MAAc;AAC3E,QAAM,MAAM,IAAI;AAChB,QAAM,aAAa,CAAC,KAAK,IAAI;AAC7B,QAAM,cAAc,CAAC,GAAG,UAAU,GAAG,SAAS;AAC9C,MAAI,OAAO,KAAK;AACd,eAAW,QAAQ;AACnB,gBAAY,QAAQ;AAAA,EACtB;AACA,SAAO,IAAI,YAAY;AAAA,IACrB;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAEA,4BAA4B,KAAa,YAA8B,WAA2B;AAChG,MAAI,OAAO,cAAc,UAAU;AACjC,WAAO,WAAW;AAAA,EACpB;AACA,MAAI,OAAO;AACX,MAAI;AACJ,MAAI,MAAM,QAAQ,SAAS,GAAG;AAC5B,WAAO,UAAU;AACjB,UAAM,OAAO,UAAU,MAAM,UAAU,GAAG;AAC1C,QAAI,MAAM;AACR,UAAI,OAAO,SAAS,UAAU;AAC5B,eAAO;AAAA,MACT,OAAO;AACL,eAAQ,KAAa,QAAQ;AAC7B,oBAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF,OAAO;AACL,UAAM,MAAM,uCAAY;AACxB,WAAO,2BAAK;AACZ,gBAAY;AAAA,EACd;AACA,QAAM,QAAQ,WAAW;AACzB,MAAI,CAAC,OAAO;AACV,UAAM,IAAI,MAAM,yBAAyB,kBAAkB,MAAM;AAAA,EACnE;AACA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
File without changes
|
package/dist/esm/index.js.map
CHANGED
|
File without changes
|
package/dist/esm/polyfill.js
CHANGED
|
File without changes
|
package/dist/esm/polyfill.js.map
CHANGED
|
File without changes
|
|
@@ -1,14 +1,78 @@
|
|
|
1
1
|
import { PresenceContext, usePresence } from "@tamagui/animate-presence";
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import {
|
|
3
|
+
isWeb,
|
|
4
|
+
useEvent,
|
|
5
|
+
useIsomorphicLayoutEffect
|
|
6
|
+
} from "@tamagui/core";
|
|
7
|
+
import { useContext, useEffect, useMemo, useRef } from "react";
|
|
4
8
|
import { Animated } from "react-native";
|
|
5
9
|
const animatedStyleKey = {
|
|
6
10
|
transform: true,
|
|
7
11
|
opacity: true
|
|
8
12
|
};
|
|
13
|
+
const AnimatedView = Animated.View;
|
|
14
|
+
const AnimatedText = Animated.Text;
|
|
15
|
+
function useAnimatedNumber(initial) {
|
|
16
|
+
const state = useRef(null);
|
|
17
|
+
if (!state.current) {
|
|
18
|
+
state.current = {
|
|
19
|
+
composite: null,
|
|
20
|
+
val: new Animated.Value(initial),
|
|
21
|
+
strategy: { type: "spring" }
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
return {
|
|
25
|
+
getInstance() {
|
|
26
|
+
return state.current.val;
|
|
27
|
+
},
|
|
28
|
+
getValue() {
|
|
29
|
+
return state.current.val["_value"];
|
|
30
|
+
},
|
|
31
|
+
stop() {
|
|
32
|
+
state.current.composite?.stop();
|
|
33
|
+
state.current.composite = null;
|
|
34
|
+
},
|
|
35
|
+
setValue(next, { type, ...config } = { type: "spring" }) {
|
|
36
|
+
const val = state.current.val;
|
|
37
|
+
if (type === "direct") {
|
|
38
|
+
val.setValue(next);
|
|
39
|
+
} else if (type === "spring") {
|
|
40
|
+
state.current.composite?.stop();
|
|
41
|
+
const composite = Animated.spring(val, {
|
|
42
|
+
...config,
|
|
43
|
+
toValue: next,
|
|
44
|
+
useNativeDriver: !isWeb
|
|
45
|
+
});
|
|
46
|
+
composite.start();
|
|
47
|
+
state.current.composite = composite;
|
|
48
|
+
} else {
|
|
49
|
+
state.current.composite?.stop();
|
|
50
|
+
const composite = Animated.timing(val, {
|
|
51
|
+
...config,
|
|
52
|
+
toValue: next,
|
|
53
|
+
useNativeDriver: !isWeb
|
|
54
|
+
});
|
|
55
|
+
composite.start();
|
|
56
|
+
state.current.composite = composite;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
function useAnimatedNumberReaction(value, cb) {
|
|
62
|
+
const onChange = useEvent((current) => {
|
|
63
|
+
cb(current.value);
|
|
64
|
+
});
|
|
65
|
+
useEffect(() => {
|
|
66
|
+
const id = value.getInstance().addListener(onChange);
|
|
67
|
+
return () => {
|
|
68
|
+
value.getInstance().removeListener(id);
|
|
69
|
+
};
|
|
70
|
+
}, [value, onChange]);
|
|
71
|
+
}
|
|
72
|
+
function useAnimatedNumberStyle(value, getStyle) {
|
|
73
|
+
return getStyle(value.getInstance());
|
|
74
|
+
}
|
|
9
75
|
function createAnimations(animations) {
|
|
10
|
-
const AnimatedView = Animated.View;
|
|
11
|
-
const AnimatedText = Animated.Text;
|
|
12
76
|
AnimatedView["displayName"] = "AnimatedView";
|
|
13
77
|
AnimatedText["displayName"] = "AnimatedText";
|
|
14
78
|
return {
|
|
@@ -16,8 +80,10 @@ function createAnimations(animations) {
|
|
|
16
80
|
animations,
|
|
17
81
|
View: AnimatedView,
|
|
18
82
|
Text: AnimatedText,
|
|
83
|
+
useAnimatedNumber,
|
|
84
|
+
useAnimatedNumberReaction,
|
|
85
|
+
useAnimatedNumberStyle,
|
|
19
86
|
useAnimations: (props, helpers) => {
|
|
20
|
-
var _a;
|
|
21
87
|
const { onDidAnimate, delay, getStyle, state } = helpers;
|
|
22
88
|
const [isPresent, sendExitComplete] = usePresence();
|
|
23
89
|
const presence = useContext(PresenceContext);
|
|
@@ -26,8 +92,8 @@ function createAnimations(animations) {
|
|
|
26
92
|
const all = getStyle({
|
|
27
93
|
isExiting,
|
|
28
94
|
isEntering,
|
|
29
|
-
exitVariant: presence
|
|
30
|
-
enterVariant: presence
|
|
95
|
+
exitVariant: presence?.exitVariant,
|
|
96
|
+
enterVariant: presence?.enterVariant
|
|
31
97
|
});
|
|
32
98
|
const animateStyles = useRef({});
|
|
33
99
|
const animatedTranforms = useRef([]);
|
|
@@ -62,31 +128,17 @@ function createAnimations(animations) {
|
|
|
62
128
|
return value;
|
|
63
129
|
}
|
|
64
130
|
function getValue(input) {
|
|
65
|
-
var _a2;
|
|
66
131
|
if (typeof input !== "string") {
|
|
67
132
|
return [input];
|
|
68
133
|
}
|
|
69
134
|
const neg = input[0] === "-";
|
|
70
135
|
if (neg)
|
|
71
136
|
input = input.slice(1);
|
|
72
|
-
const [_, number, after] =
|
|
137
|
+
const [_, number, after] = input.match(/([-0-9]+)(deg|%)/) ?? [];
|
|
73
138
|
return [+number * (neg ? -1 : 1), after];
|
|
74
139
|
}
|
|
75
|
-
function getInterpolated(val, postfix, next) {
|
|
76
|
-
const cur = val["_value"];
|
|
77
|
-
const inputRange = [cur, next];
|
|
78
|
-
const outputRange = [`${cur}deg`, `${next}deg`];
|
|
79
|
-
if (next < cur) {
|
|
80
|
-
inputRange.reverse();
|
|
81
|
-
outputRange.reverse();
|
|
82
|
-
}
|
|
83
|
-
return val.interpolate({
|
|
84
|
-
inputRange,
|
|
85
|
-
outputRange
|
|
86
|
-
});
|
|
87
|
-
}
|
|
88
140
|
const nonAnimatedStyle = {};
|
|
89
|
-
for (const key
|
|
141
|
+
for (const key in all) {
|
|
90
142
|
const val = all[key];
|
|
91
143
|
if (animatedStyleKey[key]) {
|
|
92
144
|
if (key === "transform") {
|
|
@@ -96,7 +148,7 @@ function createAnimations(animations) {
|
|
|
96
148
|
continue;
|
|
97
149
|
const tkey = Object.keys(transform)[0];
|
|
98
150
|
animatedTranforms.current[index] = {
|
|
99
|
-
[tkey]: update(tkey,
|
|
151
|
+
[tkey]: update(tkey, animatedTranforms.current[index]?.[tkey], transform[tkey])
|
|
100
152
|
};
|
|
101
153
|
}
|
|
102
154
|
}
|
|
@@ -127,17 +179,17 @@ function createAnimations(animations) {
|
|
|
127
179
|
delay,
|
|
128
180
|
isPresent,
|
|
129
181
|
onDidAnimate,
|
|
130
|
-
presence
|
|
131
|
-
presence
|
|
182
|
+
presence?.exitVariant,
|
|
183
|
+
presence?.enterVariant
|
|
132
184
|
];
|
|
133
185
|
useIsomorphicLayoutEffect(() => {
|
|
134
186
|
for (const runner of runners) {
|
|
135
187
|
runner();
|
|
136
188
|
}
|
|
137
189
|
Promise.all(completions).then(() => {
|
|
138
|
-
onDidAnimate
|
|
190
|
+
onDidAnimate?.();
|
|
139
191
|
if (isExiting) {
|
|
140
|
-
sendExitComplete
|
|
192
|
+
sendExitComplete?.();
|
|
141
193
|
}
|
|
142
194
|
});
|
|
143
195
|
}, args);
|
|
@@ -149,6 +201,19 @@ function createAnimations(animations) {
|
|
|
149
201
|
}
|
|
150
202
|
};
|
|
151
203
|
}
|
|
204
|
+
function getInterpolated(val, postfix, next) {
|
|
205
|
+
const cur = val["_value"];
|
|
206
|
+
const inputRange = [cur, next];
|
|
207
|
+
const outputRange = [`${cur}deg`, `${next}deg`];
|
|
208
|
+
if (next < cur) {
|
|
209
|
+
inputRange.reverse();
|
|
210
|
+
outputRange.reverse();
|
|
211
|
+
}
|
|
212
|
+
return val.interpolate({
|
|
213
|
+
inputRange,
|
|
214
|
+
outputRange
|
|
215
|
+
});
|
|
216
|
+
}
|
|
152
217
|
function getAnimationConfig(key, animations, animation) {
|
|
153
218
|
if (typeof animation === "string") {
|
|
154
219
|
return animations[animation];
|
|
@@ -167,8 +232,8 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
167
232
|
}
|
|
168
233
|
}
|
|
169
234
|
} else {
|
|
170
|
-
const val = animation
|
|
171
|
-
type = val
|
|
235
|
+
const val = animation?.[key];
|
|
236
|
+
type = val?.type;
|
|
172
237
|
extraConf = val;
|
|
173
238
|
}
|
|
174
239
|
const found = animations[type];
|
|
@@ -181,6 +246,11 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
181
246
|
};
|
|
182
247
|
}
|
|
183
248
|
export {
|
|
184
|
-
|
|
249
|
+
AnimatedText,
|
|
250
|
+
AnimatedView,
|
|
251
|
+
createAnimations,
|
|
252
|
+
useAnimatedNumber,
|
|
253
|
+
useAnimatedNumberReaction,
|
|
254
|
+
useAnimatedNumberStyle
|
|
185
255
|
};
|
|
186
256
|
//# sourceMappingURL=createAnimations.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport {
|
|
5
|
-
"mappings": "AAAA;AACA;
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport {\n AnimatedNumberStrategy,\n AnimationDriver,\n AnimationProp,\n UniversalAnimatedNumber,\n isWeb,\n useEvent,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { useContext, useEffect, useMemo, useRef } from 'react'\nimport { Animated } from 'react-native'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig = Partial<\n Pick<\n Animated.SpringAnimationConfig,\n | 'delay'\n | 'bounciness'\n | 'damping'\n | 'friction'\n | 'mass'\n | 'overshootClamping'\n | 'speed'\n | 'stiffness'\n | 'tension'\n | 'velocity'\n >\n>\n\nconst animatedStyleKey = {\n transform: true,\n opacity: true,\n}\n\nexport const AnimatedView = Animated.View\nexport const AnimatedText = Animated.Text\n\nexport function useAnimatedNumber(initial: number): UniversalAnimatedNumber<Animated.Value> {\n const state = useRef(\n null as any as {\n val: Animated.Value\n composite: Animated.CompositeAnimation | null\n strategy: AnimatedNumberStrategy\n }\n )\n if (!state.current) {\n state.current = {\n composite: null,\n val: new Animated.Value(initial),\n strategy: { type: 'spring' },\n }\n }\n\n return {\n getInstance() {\n return state.current.val\n },\n getValue() {\n return state.current.val['_value']\n },\n stop() {\n state.current.composite?.stop()\n state.current.composite = null\n },\n setValue(next: number, { type, ...config } = { type: 'spring' }) {\n const val = state.current.val\n if (type === 'direct') {\n val.setValue(next)\n } else if (type === 'spring') {\n state.current.composite?.stop()\n const composite = Animated.spring(val, {\n ...config,\n toValue: next,\n useNativeDriver: !isWeb,\n })\n composite.start()\n state.current.composite = composite\n } else {\n state.current.composite?.stop()\n const composite = Animated.timing(val, {\n ...config,\n toValue: next,\n useNativeDriver: !isWeb,\n })\n composite.start()\n state.current.composite = composite\n }\n },\n }\n}\n\nexport function useAnimatedNumberReaction(\n value: UniversalAnimatedNumber<Animated.Value>,\n cb: (current: number) => void\n) {\n const onChange = useEvent((current) => {\n cb(current.value)\n })\n\n useEffect(() => {\n const id = value.getInstance().addListener(onChange)\n return () => {\n value.getInstance().removeListener(id)\n }\n }, [value, onChange])\n}\n\nexport function useAnimatedNumberStyle<V extends UniversalAnimatedNumber<Animated.Value>>(\n value: V,\n getStyle: (value: any) => any\n) {\n return getStyle(value.getInstance())\n}\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n useAnimations: (props, helpers) => {\n const { onDidAnimate, delay, getStyle, state } = 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 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 animateStyles = useRef<Record<string, Animated.Value>>({})\n const animatedTranforms = useRef<{ [key: string]: Animated.Value }[]>([])\n const interpolations = useRef(new WeakMap<Animated.Value, Animated.AnimatedInterpolation>())\n\n // TODO loop and create values, run them if they change\n\n const runners: Function[] = []\n const completions: Promise<void>[] = []\n\n function update(key: string, animated: Animated.Value | undefined, valIn: string | number) {\n const [val, type] = getValue(valIn)\n const value = animated || new Animated.Value(val)\n if (type) {\n interpolations.current.set(value, getInterpolated(value, type, val))\n }\n if (animated) {\n const animationConfig = getAnimationConfig(key, animations, props.animation)\n\n let resolve\n const promise = new Promise<void>((res) => {\n resolve = res\n })\n completions.push(promise)\n\n runners.push(() => {\n Animated.spring(animated, {\n toValue: val,\n useNativeDriver: !isWeb,\n ...animationConfig,\n }).start(({ finished }) => {\n if (finished) {\n resolve()\n }\n })\n })\n }\n return value\n }\n\n function getValue(input: number | string) {\n if (typeof input !== 'string') {\n return [input] as const\n }\n const neg = input[0] === '-'\n if (neg) input = input.slice(1)\n const [_, number, after] = input.match(/([-0-9]+)(deg|%)/) ?? []\n return [+number * (neg ? -1 : 1), after] as const\n }\n\n const nonAnimatedStyle = {}\n for (const key in all) {\n const val = all[key]\n if (animatedStyleKey[key]) {\n if (key === 'transform') {\n // for now just support one transform key\n if (val) {\n for (const [index, transform] of val.entries()) {\n if (!transform) continue\n const tkey = Object.keys(transform)[0]\n animatedTranforms.current[index] = {\n [tkey]: update(tkey, animatedTranforms.current[index]?.[tkey], transform[tkey]),\n }\n }\n }\n } else {\n animateStyles.current[key] = update(key, animateStyles.current[key], val)\n }\n } else {\n nonAnimatedStyle[key] = val\n }\n }\n\n const animatedStyle = {\n ...Object.fromEntries(\n Object.entries({\n ...animateStyles.current,\n }).map(([k, v]) => [k, interpolations.current.get(v) || v])\n ),\n transform: animatedTranforms.current.map((r) => {\n const key = Object.keys(r)[0]\n const val = interpolations.current.get(r[key]) || r[key]\n return { [key]: val }\n }),\n }\n\n const args = [\n JSON.stringify(all),\n state.mounted,\n state.hover,\n state.press,\n state.pressIn,\n state.focus,\n delay,\n isPresent,\n onDidAnimate,\n presence?.exitVariant,\n presence?.enterVariant,\n ]\n\n useIsomorphicLayoutEffect(() => {\n //\n for (const runner of runners) {\n runner()\n }\n Promise.all(completions).then(() => {\n onDidAnimate?.()\n if (isExiting) {\n sendExitComplete?.()\n }\n })\n }, args)\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, args)\n },\n }\n}\n\nfunction getInterpolated(val: Animated.Value, postfix: string, next: number) {\n const cur = val['_value'] as number\n const inputRange = [cur, next]\n const outputRange = [`${cur}deg`, `${next}deg`]\n if (next < cur) {\n inputRange.reverse()\n outputRange.reverse()\n }\n return val.interpolate({\n inputRange,\n outputRange,\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] && 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 }\n}\n"],
|
|
5
|
+
"mappings": "AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AASA;AACA;AAsBA,MAAM,mBAAmB;AAAA,EACvB,WAAW;AAAA,EACX,SAAS;AACX;AAEO,MAAM,eAAe,SAAS;AAC9B,MAAM,eAAe,SAAS;AAE9B,2BAA2B,SAA0D;AAC1F,QAAM,QAAQ,OACZ,IAKF;AACA,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,WAAW;AAAA,MACX,KAAK,IAAI,SAAS,MAAM,OAAO;AAAA,MAC/B,UAAU,EAAE,MAAM,SAAS;AAAA,IAC7B;AAAA,EACF;AAEA,SAAO;AAAA,IACL,cAAc;AACZ,aAAO,MAAM,QAAQ;AAAA,IACvB;AAAA,IACA,WAAW;AACT,aAAO,MAAM,QAAQ,IAAI;AAAA,IAC3B;AAAA,IACA,OAAO;AACL,YAAM,QAAQ,WAAW,KAAK;AAC9B,YAAM,QAAQ,YAAY;AAAA,IAC5B;AAAA,IACA,SAAS,MAAc,EAAE,SAAS,WAAW,EAAE,MAAM,SAAS,GAAG;AAC/D,YAAM,MAAM,MAAM,QAAQ;AAC1B,UAAI,SAAS,UAAU;AACrB,YAAI,SAAS,IAAI;AAAA,MACnB,WAAW,SAAS,UAAU;AAC5B,cAAM,QAAQ,WAAW,KAAK;AAC9B,cAAM,YAAY,SAAS,OAAO,KAAK;AAAA,UACrC,GAAG;AAAA,UACH,SAAS;AAAA,UACT,iBAAiB,CAAC;AAAA,QACpB,CAAC;AACD,kBAAU,MAAM;AAChB,cAAM,QAAQ,YAAY;AAAA,MAC5B,OAAO;AACL,cAAM,QAAQ,WAAW,KAAK;AAC9B,cAAM,YAAY,SAAS,OAAO,KAAK;AAAA,UACrC,GAAG;AAAA,UACH,SAAS;AAAA,UACT,iBAAiB,CAAC;AAAA,QACpB,CAAC;AACD,kBAAU,MAAM;AAChB,cAAM,QAAQ,YAAY;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AACF;AAEO,mCACL,OACA,IACA;AACA,QAAM,WAAW,SAAS,CAAC,YAAY;AACrC,OAAG,QAAQ,KAAK;AAAA,EAClB,CAAC;AAED,YAAU,MAAM;AACd,UAAM,KAAK,MAAM,YAAY,EAAE,YAAY,QAAQ;AACnD,WAAO,MAAM;AACX,YAAM,YAAY,EAAE,eAAe,EAAE;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,OAAO,QAAQ,CAAC;AACtB;AAEO,gCACL,OACA,UACA;AACA,SAAO,SAAS,MAAM,YAAY,CAAC;AACrC;AAEO,0BAAsD,YAAmC;AAC9F,eAAa,iBAAiB;AAC9B,eAAa,iBAAiB;AAE9B,SAAO;AAAA,IACL,cAAc;AAAA,IACd;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,CAAC,OAAO,YAAY;AACjC,YAAM,EAAE,cAAc,OAAO,UAAU,UAAU;AACjD,YAAM,CAAC,WAAW,oBAAoB,YAAY;AAClD,YAAM,WAAW,WAAW,eAAe;AAM3C,YAAM,YAAY,cAAc;AAChC,YAAM,aAAa,CAAC,MAAM;AAE1B,YAAM,MAAM,SAAS;AAAA,QACnB;AAAA,QACA;AAAA,QACA,aAAa,UAAU;AAAA,QACvB,cAAc,UAAU;AAAA,MAC1B,CAAC;AAED,YAAM,gBAAgB,OAAuC,CAAC,CAAC;AAC/D,YAAM,oBAAoB,OAA4C,CAAC,CAAC;AACxE,YAAM,iBAAiB,OAAO,oBAAI,QAAwD,CAAC;AAI3F,YAAM,UAAsB,CAAC;AAC7B,YAAM,cAA+B,CAAC;AAEtC,sBAAgB,KAAa,UAAsC,OAAwB;AACzF,cAAM,CAAC,KAAK,QAAQ,SAAS,KAAK;AAClC,cAAM,QAAQ,YAAY,IAAI,SAAS,MAAM,GAAG;AAChD,YAAI,MAAM;AACR,yBAAe,QAAQ,IAAI,OAAO,gBAAgB,OAAO,MAAM,GAAG,CAAC;AAAA,QACrE;AACA,YAAI,UAAU;AACZ,gBAAM,kBAAkB,mBAAmB,KAAK,YAAY,MAAM,SAAS;AAE3E,cAAI;AACJ,gBAAM,UAAU,IAAI,QAAc,CAAC,QAAQ;AACzC,sBAAU;AAAA,UACZ,CAAC;AACD,sBAAY,KAAK,OAAO;AAExB,kBAAQ,KAAK,MAAM;AACjB,qBAAS,OAAO,UAAU;AAAA,cACxB,SAAS;AAAA,cACT,iBAAiB,CAAC;AAAA,cAClB,GAAG;AAAA,YACL,CAAC,EAAE,MAAM,CAAC,EAAE,eAAe;AACzB,kBAAI,UAAU;AACZ,wBAAQ;AAAA,cACV;AAAA,YACF,CAAC;AAAA,UACH,CAAC;AAAA,QACH;AACA,eAAO;AAAA,MACT;AAEA,wBAAkB,OAAwB;AACxC,YAAI,OAAO,UAAU,UAAU;AAC7B,iBAAO,CAAC,KAAK;AAAA,QACf;AACA,cAAM,MAAM,MAAM,OAAO;AACzB,YAAI;AAAK,kBAAQ,MAAM,MAAM,CAAC;AAC9B,cAAM,CAAC,GAAG,QAAQ,SAAS,MAAM,MAAM,kBAAkB,KAAK,CAAC;AAC/D,eAAO,CAAC,CAAC,SAAU,OAAM,KAAK,IAAI,KAAK;AAAA,MACzC;AAEA,YAAM,mBAAmB,CAAC;AAC1B,iBAAW,OAAO,KAAK;AACrB,cAAM,MAAM,IAAI;AAChB,YAAI,iBAAiB,MAAM;AACzB,cAAI,QAAQ,aAAa;AAEvB,gBAAI,KAAK;AACP,yBAAW,CAAC,OAAO,cAAc,IAAI,QAAQ,GAAG;AAC9C,oBAAI,CAAC;AAAW;AAChB,sBAAM,OAAO,OAAO,KAAK,SAAS,EAAE;AACpC,kCAAkB,QAAQ,SAAS;AAAA,kBACjC,CAAC,OAAO,OAAO,MAAM,kBAAkB,QAAQ,SAAS,OAAO,UAAU,KAAK;AAAA,gBAChF;AAAA,cACF;AAAA,YACF;AAAA,UACF,OAAO;AACL,0BAAc,QAAQ,OAAO,OAAO,KAAK,cAAc,QAAQ,MAAM,GAAG;AAAA,UAC1E;AAAA,QACF,OAAO;AACL,2BAAiB,OAAO;AAAA,QAC1B;AAAA,MACF;AAEA,YAAM,gBAAgB;AAAA,QACpB,GAAG,OAAO,YACR,OAAO,QAAQ;AAAA,UACb,GAAG,cAAc;AAAA,QACnB,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,eAAe,QAAQ,IAAI,CAAC,KAAK,CAAC,CAAC,CAC5D;AAAA,QACA,WAAW,kBAAkB,QAAQ,IAAI,CAAC,MAAM;AAC9C,gBAAM,MAAM,OAAO,KAAK,CAAC,EAAE;AAC3B,gBAAM,MAAM,eAAe,QAAQ,IAAI,EAAE,IAAI,KAAK,EAAE;AACpD,iBAAO,EAAE,CAAC,MAAM,IAAI;AAAA,QACtB,CAAC;AAAA,MACH;AAEA,YAAM,OAAO;AAAA,QACX,KAAK,UAAU,GAAG;AAAA,QAClB,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,MACZ;AAEA,gCAA0B,MAAM;AAE9B,mBAAW,UAAU,SAAS;AAC5B,iBAAO;AAAA,QACT;AACA,gBAAQ,IAAI,WAAW,EAAE,KAAK,MAAM;AAClC,yBAAe;AACf,cAAI,WAAW;AACb,+BAAmB;AAAA,UACrB;AAAA,QACF,CAAC;AAAA,MACH,GAAG,IAAI;AAEP,aAAO,QAAQ,MAAM;AACnB,eAAO;AAAA,UACL,OAAO,CAAC,kBAAkB,aAAa;AAAA,QACzC;AAAA,MAEF,GAAG,IAAI;AAAA,IACT;AAAA,EACF;AACF;AAEA,yBAAyB,KAAqB,SAAiB,MAAc;AAC3E,QAAM,MAAM,IAAI;AAChB,QAAM,aAAa,CAAC,KAAK,IAAI;AAC7B,QAAM,cAAc,CAAC,GAAG,UAAU,GAAG,SAAS;AAC9C,MAAI,OAAO,KAAK;AACd,eAAW,QAAQ;AACnB,gBAAY,QAAQ;AAAA,EACtB;AACA,SAAO,IAAI,YAAY;AAAA,IACrB;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAEA,4BAA4B,KAAa,YAA8B,WAA2B;AAChG,MAAI,OAAO,cAAc,UAAU;AACjC,WAAO,WAAW;AAAA,EACpB;AACA,MAAI,OAAO;AACX,MAAI;AACJ,MAAI,MAAM,QAAQ,SAAS,GAAG;AAC5B,WAAO,UAAU;AACjB,UAAM,OAAO,UAAU,MAAM,UAAU,GAAG;AAC1C,QAAI,MAAM;AACR,UAAI,OAAO,SAAS,UAAU;AAC5B,eAAO;AAAA,MACT,OAAO;AACL,eAAQ,KAAa,QAAQ;AAC7B,oBAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF,OAAO;AACL,UAAM,MAAM,YAAY;AACxB,WAAO,KAAK;AACZ,gBAAY;AAAA,EACd;AACA,QAAM,QAAQ,WAAW;AACzB,MAAI,CAAC,OAAO;AACV,UAAM,IAAI,MAAM,yBAAyB,kBAAkB,MAAM;AAAA,EACnE;AACA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/index.js
CHANGED
|
File without changes
|
package/dist/jsx/index.js.map
CHANGED
|
File without changes
|
package/dist/jsx/polyfill.js
CHANGED
|
File without changes
|
package/dist/jsx/polyfill.js.map
CHANGED
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/animations-react-native",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.143",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
|
-
"sideEffects":
|
|
5
|
+
"sideEffects": [
|
|
6
|
+
"./polyfill.js"
|
|
7
|
+
],
|
|
6
8
|
"license": "MIT",
|
|
7
9
|
"types": "./types/index.d.ts",
|
|
8
10
|
"main": "dist/cjs",
|
|
@@ -14,11 +16,11 @@
|
|
|
14
16
|
"dist"
|
|
15
17
|
],
|
|
16
18
|
"dependencies": {
|
|
17
|
-
"@tamagui/animate-presence": "^1.0.1-beta.
|
|
18
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
19
|
+
"@tamagui/animate-presence": "^1.0.1-beta.143",
|
|
20
|
+
"@tamagui/core": "^1.0.1-beta.143"
|
|
19
21
|
},
|
|
20
22
|
"devDependencies": {
|
|
21
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
23
|
+
"@tamagui/build": "^1.0.1-beta.143",
|
|
22
24
|
"react": "*",
|
|
23
25
|
"react-dom": "*",
|
|
24
26
|
"react-native": "*"
|
package/src/createAnimations.tsx
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
import { PresenceContext, usePresence } from '@tamagui/animate-presence'
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import {
|
|
3
|
+
AnimatedNumberStrategy,
|
|
4
|
+
AnimationDriver,
|
|
5
|
+
AnimationProp,
|
|
6
|
+
UniversalAnimatedNumber,
|
|
7
|
+
isWeb,
|
|
8
|
+
useEvent,
|
|
9
|
+
useIsomorphicLayoutEffect,
|
|
10
|
+
} from '@tamagui/core'
|
|
11
|
+
import { useContext, useEffect, useMemo, useRef } from 'react'
|
|
4
12
|
import { Animated } from 'react-native'
|
|
5
13
|
|
|
6
14
|
type AnimationsConfig<A extends Object = any> = {
|
|
@@ -28,10 +36,87 @@ const animatedStyleKey = {
|
|
|
28
36
|
opacity: true,
|
|
29
37
|
}
|
|
30
38
|
|
|
31
|
-
export
|
|
32
|
-
|
|
33
|
-
|
|
39
|
+
export const AnimatedView = Animated.View
|
|
40
|
+
export const AnimatedText = Animated.Text
|
|
41
|
+
|
|
42
|
+
export function useAnimatedNumber(initial: number): UniversalAnimatedNumber<Animated.Value> {
|
|
43
|
+
const state = useRef(
|
|
44
|
+
null as any as {
|
|
45
|
+
val: Animated.Value
|
|
46
|
+
composite: Animated.CompositeAnimation | null
|
|
47
|
+
strategy: AnimatedNumberStrategy
|
|
48
|
+
}
|
|
49
|
+
)
|
|
50
|
+
if (!state.current) {
|
|
51
|
+
state.current = {
|
|
52
|
+
composite: null,
|
|
53
|
+
val: new Animated.Value(initial),
|
|
54
|
+
strategy: { type: 'spring' },
|
|
55
|
+
}
|
|
56
|
+
}
|
|
34
57
|
|
|
58
|
+
return {
|
|
59
|
+
getInstance() {
|
|
60
|
+
return state.current.val
|
|
61
|
+
},
|
|
62
|
+
getValue() {
|
|
63
|
+
return state.current.val['_value']
|
|
64
|
+
},
|
|
65
|
+
stop() {
|
|
66
|
+
state.current.composite?.stop()
|
|
67
|
+
state.current.composite = null
|
|
68
|
+
},
|
|
69
|
+
setValue(next: number, { type, ...config } = { type: 'spring' }) {
|
|
70
|
+
const val = state.current.val
|
|
71
|
+
if (type === 'direct') {
|
|
72
|
+
val.setValue(next)
|
|
73
|
+
} else if (type === 'spring') {
|
|
74
|
+
state.current.composite?.stop()
|
|
75
|
+
const composite = Animated.spring(val, {
|
|
76
|
+
...config,
|
|
77
|
+
toValue: next,
|
|
78
|
+
useNativeDriver: !isWeb,
|
|
79
|
+
})
|
|
80
|
+
composite.start()
|
|
81
|
+
state.current.composite = composite
|
|
82
|
+
} else {
|
|
83
|
+
state.current.composite?.stop()
|
|
84
|
+
const composite = Animated.timing(val, {
|
|
85
|
+
...config,
|
|
86
|
+
toValue: next,
|
|
87
|
+
useNativeDriver: !isWeb,
|
|
88
|
+
})
|
|
89
|
+
composite.start()
|
|
90
|
+
state.current.composite = composite
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
export function useAnimatedNumberReaction(
|
|
97
|
+
value: UniversalAnimatedNumber<Animated.Value>,
|
|
98
|
+
cb: (current: number) => void
|
|
99
|
+
) {
|
|
100
|
+
const onChange = useEvent((current) => {
|
|
101
|
+
cb(current.value)
|
|
102
|
+
})
|
|
103
|
+
|
|
104
|
+
useEffect(() => {
|
|
105
|
+
const id = value.getInstance().addListener(onChange)
|
|
106
|
+
return () => {
|
|
107
|
+
value.getInstance().removeListener(id)
|
|
108
|
+
}
|
|
109
|
+
}, [value, onChange])
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
export function useAnimatedNumberStyle<V extends UniversalAnimatedNumber<Animated.Value>>(
|
|
113
|
+
value: V,
|
|
114
|
+
getStyle: (value: any) => any
|
|
115
|
+
) {
|
|
116
|
+
return getStyle(value.getInstance())
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
export function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {
|
|
35
120
|
AnimatedView['displayName'] = 'AnimatedView'
|
|
36
121
|
AnimatedText['displayName'] = 'AnimatedText'
|
|
37
122
|
|
|
@@ -40,6 +125,9 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
40
125
|
animations,
|
|
41
126
|
View: AnimatedView,
|
|
42
127
|
Text: AnimatedText,
|
|
128
|
+
useAnimatedNumber,
|
|
129
|
+
useAnimatedNumberReaction,
|
|
130
|
+
useAnimatedNumberStyle,
|
|
43
131
|
useAnimations: (props, helpers) => {
|
|
44
132
|
const { onDidAnimate, delay, getStyle, state } = helpers
|
|
45
133
|
const [isPresent, sendExitComplete] = usePresence()
|
|
@@ -108,22 +196,8 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
108
196
|
return [+number * (neg ? -1 : 1), after] as const
|
|
109
197
|
}
|
|
110
198
|
|
|
111
|
-
function getInterpolated(val: Animated.Value, postfix: string, next: number) {
|
|
112
|
-
const cur = val['_value'] as number
|
|
113
|
-
const inputRange = [cur, next]
|
|
114
|
-
const outputRange = [`${cur}deg`, `${next}deg`]
|
|
115
|
-
if (next < cur) {
|
|
116
|
-
inputRange.reverse()
|
|
117
|
-
outputRange.reverse()
|
|
118
|
-
}
|
|
119
|
-
return val.interpolate({
|
|
120
|
-
inputRange,
|
|
121
|
-
outputRange,
|
|
122
|
-
})
|
|
123
|
-
}
|
|
124
|
-
|
|
125
199
|
const nonAnimatedStyle = {}
|
|
126
|
-
for (const key
|
|
200
|
+
for (const key in all) {
|
|
127
201
|
const val = all[key]
|
|
128
202
|
if (animatedStyleKey[key]) {
|
|
129
203
|
if (key === 'transform') {
|
|
@@ -195,6 +269,20 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
195
269
|
}
|
|
196
270
|
}
|
|
197
271
|
|
|
272
|
+
function getInterpolated(val: Animated.Value, postfix: string, next: number) {
|
|
273
|
+
const cur = val['_value'] as number
|
|
274
|
+
const inputRange = [cur, next]
|
|
275
|
+
const outputRange = [`${cur}deg`, `${next}deg`]
|
|
276
|
+
if (next < cur) {
|
|
277
|
+
inputRange.reverse()
|
|
278
|
+
outputRange.reverse()
|
|
279
|
+
}
|
|
280
|
+
return val.interpolate({
|
|
281
|
+
inputRange,
|
|
282
|
+
outputRange,
|
|
283
|
+
})
|
|
284
|
+
}
|
|
285
|
+
|
|
198
286
|
function getAnimationConfig(key: string, animations: AnimationsConfig, animation?: AnimationProp) {
|
|
199
287
|
if (typeof animation === 'string') {
|
|
200
288
|
return animations[animation]
|
|
@@ -1,9 +1,14 @@
|
|
|
1
|
-
import { AnimationDriver } from '@tamagui/core';
|
|
1
|
+
import { AnimationDriver, UniversalAnimatedNumber } from '@tamagui/core';
|
|
2
2
|
import { Animated } from 'react-native';
|
|
3
3
|
declare type AnimationsConfig<A extends Object = any> = {
|
|
4
4
|
[Key in keyof A]: AnimationConfig;
|
|
5
5
|
};
|
|
6
6
|
declare type AnimationConfig = Partial<Pick<Animated.SpringAnimationConfig, 'delay' | 'bounciness' | 'damping' | 'friction' | 'mass' | 'overshootClamping' | 'speed' | 'stiffness' | 'tension' | 'velocity'>>;
|
|
7
|
+
export declare const AnimatedView: Animated.AnimatedComponent<typeof import("react-native").View>;
|
|
8
|
+
export declare const AnimatedText: Animated.AnimatedComponent<typeof import("react-native").Text>;
|
|
9
|
+
export declare function useAnimatedNumber(initial: number): UniversalAnimatedNumber<Animated.Value>;
|
|
10
|
+
export declare function useAnimatedNumberReaction(value: UniversalAnimatedNumber<Animated.Value>, cb: (current: number) => void): void;
|
|
11
|
+
export declare function useAnimatedNumberStyle<V extends UniversalAnimatedNumber<Animated.Value>>(value: V, getStyle: (value: any) => any): any;
|
|
7
12
|
export declare function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A>;
|
|
8
13
|
export {};
|
|
9
14
|
//# sourceMappingURL=createAnimations.d.ts.map
|