@tamagui/animations-react-native 1.0.1-beta.105 → 1.0.1-beta.106
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 +39 -16
- package/dist/cjs/createAnimations.js.map +2 -2
- package/dist/esm/createAnimations.js +39 -16
- package/dist/esm/createAnimations.js.map +2 -2
- package/dist/jsx/createAnimations.js +42 -16
- package/dist/jsx/createAnimations.js.map +2 -2
- package/package.json +4 -4
- package/src/createAnimations.tsx +45 -22
- package/types/createAnimations.d.ts.map +1 -1
|
@@ -74,30 +74,50 @@ function createAnimations(animations) {
|
|
|
74
74
|
});
|
|
75
75
|
const animateStyles = (0, import_react.useRef)({});
|
|
76
76
|
const animatedTranforms = (0, import_react.useRef)([]);
|
|
77
|
-
const interpolations = /* @__PURE__ */ new WeakMap();
|
|
77
|
+
const interpolations = (0, import_react.useRef)(/* @__PURE__ */ new WeakMap());
|
|
78
78
|
const runners = [];
|
|
79
79
|
function update(animated, valIn) {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
80
|
+
if (typeof props.animation !== "string") {
|
|
81
|
+
return new import_react_native.Animated.Value(0);
|
|
82
|
+
}
|
|
83
|
+
const [val, type] = getValue(valIn);
|
|
84
|
+
const value = animated || new import_react_native.Animated.Value(val);
|
|
85
|
+
if (type) {
|
|
86
|
+
interpolations.current.set(value, getInterpolated(value, type, val));
|
|
86
87
|
}
|
|
87
88
|
if (animated) {
|
|
88
|
-
const animationConfig =
|
|
89
|
+
const animationConfig = animations[props.animation];
|
|
89
90
|
runners.push(() => {
|
|
90
91
|
import_react_native.Animated.spring(animated, __spreadValues({
|
|
91
92
|
toValue: val,
|
|
92
93
|
useNativeDriver: !import_core.isWeb
|
|
93
94
|
}, animationConfig)).start();
|
|
94
95
|
});
|
|
95
|
-
return animated;
|
|
96
|
-
} else {
|
|
97
|
-
const res = new import_react_native.Animated.Value(val);
|
|
98
|
-
interpolations.set(res, postfix);
|
|
99
|
-
return res;
|
|
100
96
|
}
|
|
97
|
+
return value;
|
|
98
|
+
}
|
|
99
|
+
function getValue(input) {
|
|
100
|
+
if (typeof input !== "string") {
|
|
101
|
+
return [input];
|
|
102
|
+
}
|
|
103
|
+
const neg = input[0] === "-";
|
|
104
|
+
if (neg)
|
|
105
|
+
input = input.slice(1);
|
|
106
|
+
const [_, number, after] = input.match(/([-0-9]+)(deg|%)/) ?? [];
|
|
107
|
+
return [+number * (neg ? -1 : 1), after];
|
|
108
|
+
}
|
|
109
|
+
function getInterpolated(val, postfix, next) {
|
|
110
|
+
const cur = val["_value"];
|
|
111
|
+
const inputRange = [cur, next];
|
|
112
|
+
const outputRange = [`${cur}deg`, `${next}deg`];
|
|
113
|
+
if (next < cur) {
|
|
114
|
+
inputRange.reverse();
|
|
115
|
+
outputRange.reverse();
|
|
116
|
+
}
|
|
117
|
+
return val.interpolate({
|
|
118
|
+
inputRange,
|
|
119
|
+
outputRange
|
|
120
|
+
});
|
|
101
121
|
}
|
|
102
122
|
const nonAnimatedStyle = {};
|
|
103
123
|
for (const key of Object.keys(all)) {
|
|
@@ -121,8 +141,12 @@ function createAnimations(animations) {
|
|
|
121
141
|
nonAnimatedStyle[key] = val;
|
|
122
142
|
}
|
|
123
143
|
}
|
|
124
|
-
const animatedStyle = __spreadProps(__spreadValues({}, animateStyles.current), {
|
|
125
|
-
transform: animatedTranforms.current
|
|
144
|
+
const animatedStyle = __spreadProps(__spreadValues({}, Object.fromEntries(Object.entries(__spreadValues({}, animateStyles.current)).map(([k, v]) => [k, interpolations.current.get(v) || v]))), {
|
|
145
|
+
transform: animatedTranforms.current.map((r) => {
|
|
146
|
+
const key = Object.keys(r)[0];
|
|
147
|
+
const val = interpolations.current.get(r[key]) || r[key];
|
|
148
|
+
return { [key]: val };
|
|
149
|
+
})
|
|
126
150
|
});
|
|
127
151
|
const args = [
|
|
128
152
|
JSON.stringify(all),
|
|
@@ -140,7 +164,6 @@ function createAnimations(animations) {
|
|
|
140
164
|
];
|
|
141
165
|
(0, import_react.useLayoutEffect)(() => {
|
|
142
166
|
for (const runner of runners) {
|
|
143
|
-
console.log("gogo");
|
|
144
167
|
runner();
|
|
145
168
|
}
|
|
146
169
|
}, args);
|
|
@@ -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 { AnimationDriver, AnimationProp, isWeb } from '@tamagui/core'\nimport { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } 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// | ({ 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}\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 [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 onDidAnimateCb = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\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 animateStyles = useRef<Record<string, Animated.Value>>({})\n const animatedTranforms = useRef<{ [key: string]: Animated.Value }[]>([])\n const interpolations = new WeakMap<Animated.Value,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA6C;AAC7C,kBAAsD;AACtD,mBAAoF;AACpF,0BAAyB;AAyBzB,MAAM,mBAAmB;AAAA,EACvB,WAAW;AAAA,EACX,SAAS;AACX;AAEO,0BAAsD,YAAmC;AAC9F,QAAM,eAAe,6BAAS;AAC9B,QAAM,eAAe,6BAAS;AAE9B,eAAa,iBAAiB;AAC9B,eAAa,iBAAiB;AAE9B,SAAO;AAAA,IACL,cAAc;AAAA,IACd;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN,eAAe,CAAC,OAAO,YAAY;AA7CvC;AA8CM,YAAM,EAAE,SAAS,cAAc,OAAO,UAAU,OAAO,iBAAiB;AACxE,YAAM,CAAC,WAAW,oBAAoB,yCAAY;AAClD,YAAM,WAAW,6BAAW,uCAAe;AAE3C,YAAM,YAAY,sCAAU,eACxB,0BAAa,mBAAb,mBAA8B,SAAS,iBAAvC,mBAAqD,SAAQ,QAAQ,YACrE,QAAQ;AAEZ,YAAM,iBAAiB,8BACrB,IAAI,UAAS;AACX,qDAAe,GAAG;AAAA,MACpB,GACA,CAAC,YAAY,CACf;AAEA,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,yBAAuC,CAAC,CAAC;AAC/D,YAAM,oBAAoB,yBAA4C,CAAC,CAAC;AACxE,YAAM,iBAAiB,oBAAI,
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp, isWeb } from '@tamagui/core'\nimport { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } 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// | ({ 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}\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 [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 onDidAnimateCb = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\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 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\n function update(animated: Animated.Value | undefined, valIn: string | number) {\n if (typeof props.animation !== 'string') {\n return new Animated.Value(0)\n }\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 = animations[props.animation]\n runners.push(() => {\n Animated.spring(animated, {\n toValue: val,\n useNativeDriver: !isWeb,\n ...animationConfig,\n }).start()\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 function 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\n const nonAnimatedStyle = {}\n for (const key of Object.keys(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(animatedTranforms.current[index]?.[tkey], transform[tkey]),\n }\n }\n }\n } else {\n animateStyles.current[key] = update(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 onDidAnimateCb,\n presence?.exitVariant,\n presence?.enterVariant,\n ]\n\n useLayoutEffect(() => {\n //\n for (const runner of runners) {\n runner()\n }\n }, args)\n\n // const callback = (\n // isExiting: boolean,\n // exitingStyleProps: Record<string, boolean>,\n // key: string,\n // value: any\n // ) => {\n // return (completed, current) => {\n // onDidAnimateCb(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 // sendExitComplete?.()\n // }\n // }\n // }\n // }\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n }, args)\n },\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -54,30 +54,50 @@ function createAnimations(animations) {
|
|
|
54
54
|
});
|
|
55
55
|
const animateStyles = useRef({});
|
|
56
56
|
const animatedTranforms = useRef([]);
|
|
57
|
-
const interpolations = /* @__PURE__ */ new WeakMap();
|
|
57
|
+
const interpolations = useRef(/* @__PURE__ */ new WeakMap());
|
|
58
58
|
const runners = [];
|
|
59
59
|
function update(animated, valIn) {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
60
|
+
if (typeof props.animation !== "string") {
|
|
61
|
+
return new Animated.Value(0);
|
|
62
|
+
}
|
|
63
|
+
const [val, type] = getValue(valIn);
|
|
64
|
+
const value = animated || new Animated.Value(val);
|
|
65
|
+
if (type) {
|
|
66
|
+
interpolations.current.set(value, getInterpolated(value, type, val));
|
|
66
67
|
}
|
|
67
68
|
if (animated) {
|
|
68
|
-
const animationConfig =
|
|
69
|
+
const animationConfig = animations[props.animation];
|
|
69
70
|
runners.push(() => {
|
|
70
71
|
Animated.spring(animated, __spreadValues({
|
|
71
72
|
toValue: val,
|
|
72
73
|
useNativeDriver: !isWeb
|
|
73
74
|
}, animationConfig)).start();
|
|
74
75
|
});
|
|
75
|
-
return animated;
|
|
76
|
-
} else {
|
|
77
|
-
const res = new Animated.Value(val);
|
|
78
|
-
interpolations.set(res, postfix);
|
|
79
|
-
return res;
|
|
80
76
|
}
|
|
77
|
+
return value;
|
|
78
|
+
}
|
|
79
|
+
function getValue(input) {
|
|
80
|
+
if (typeof input !== "string") {
|
|
81
|
+
return [input];
|
|
82
|
+
}
|
|
83
|
+
const neg = input[0] === "-";
|
|
84
|
+
if (neg)
|
|
85
|
+
input = input.slice(1);
|
|
86
|
+
const [_, number, after] = input.match(/([-0-9]+)(deg|%)/) ?? [];
|
|
87
|
+
return [+number * (neg ? -1 : 1), after];
|
|
88
|
+
}
|
|
89
|
+
function getInterpolated(val, postfix, next) {
|
|
90
|
+
const cur = val["_value"];
|
|
91
|
+
const inputRange = [cur, next];
|
|
92
|
+
const outputRange = [`${cur}deg`, `${next}deg`];
|
|
93
|
+
if (next < cur) {
|
|
94
|
+
inputRange.reverse();
|
|
95
|
+
outputRange.reverse();
|
|
96
|
+
}
|
|
97
|
+
return val.interpolate({
|
|
98
|
+
inputRange,
|
|
99
|
+
outputRange
|
|
100
|
+
});
|
|
81
101
|
}
|
|
82
102
|
const nonAnimatedStyle = {};
|
|
83
103
|
for (const key of Object.keys(all)) {
|
|
@@ -101,8 +121,12 @@ function createAnimations(animations) {
|
|
|
101
121
|
nonAnimatedStyle[key] = val;
|
|
102
122
|
}
|
|
103
123
|
}
|
|
104
|
-
const animatedStyle = __spreadProps(__spreadValues({}, animateStyles.current), {
|
|
105
|
-
transform: animatedTranforms.current
|
|
124
|
+
const animatedStyle = __spreadProps(__spreadValues({}, Object.fromEntries(Object.entries(__spreadValues({}, animateStyles.current)).map(([k, v]) => [k, interpolations.current.get(v) || v]))), {
|
|
125
|
+
transform: animatedTranforms.current.map((r) => {
|
|
126
|
+
const key = Object.keys(r)[0];
|
|
127
|
+
const val = interpolations.current.get(r[key]) || r[key];
|
|
128
|
+
return { [key]: val };
|
|
129
|
+
})
|
|
106
130
|
});
|
|
107
131
|
const args = [
|
|
108
132
|
JSON.stringify(all),
|
|
@@ -120,7 +144,6 @@ function createAnimations(animations) {
|
|
|
120
144
|
];
|
|
121
145
|
useLayoutEffect(() => {
|
|
122
146
|
for (const runner of runners) {
|
|
123
|
-
console.log("gogo");
|
|
124
147
|
runner();
|
|
125
148
|
}
|
|
126
149
|
}, args);
|
|
@@ -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 { AnimationDriver, AnimationProp, isWeb } from '@tamagui/core'\nimport { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } 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// | ({ 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}\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 [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 onDidAnimateCb = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\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 animateStyles = useRef<Record<string, Animated.Value>>({})\n const animatedTranforms = useRef<{ [key: string]: Animated.Value }[]>([])\n const interpolations = new WeakMap<Animated.Value,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AAyBA,MAAM,mBAAmB;AAAA,EACvB,WAAW;AAAA,EACX,SAAS;AACX;AAEO,0BAAsD,YAAmC;AAC9F,QAAM,eAAe,SAAS;AAC9B,QAAM,eAAe,SAAS;AAE9B,eAAa,iBAAiB;AAC9B,eAAa,iBAAiB;AAE9B,SAAO;AAAA,IACL,cAAc;AAAA,IACd;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN,eAAe,CAAC,OAAO,YAAY;AA7CvC;AA8CM,YAAM,EAAE,SAAS,cAAc,OAAO,UAAU,OAAO,iBAAiB;AACxE,YAAM,CAAC,WAAW,oBAAoB,YAAY;AAClD,YAAM,WAAW,WAAW,eAAe;AAE3C,YAAM,YAAY,sCAAU,eACxB,0BAAa,mBAAb,mBAA8B,SAAS,iBAAvC,mBAAqD,SAAQ,QAAQ,YACrE,QAAQ;AAEZ,YAAM,iBAAiB,YACrB,IAAI,UAAS;AACX,qDAAe,GAAG;AAAA,MACpB,GACA,CAAC,YAAY,CACf;AAEA,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,oBAAI,
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp, isWeb } from '@tamagui/core'\nimport { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } 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// | ({ 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}\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 [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 onDidAnimateCb = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\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 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\n function update(animated: Animated.Value | undefined, valIn: string | number) {\n if (typeof props.animation !== 'string') {\n return new Animated.Value(0)\n }\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 = animations[props.animation]\n runners.push(() => {\n Animated.spring(animated, {\n toValue: val,\n useNativeDriver: !isWeb,\n ...animationConfig,\n }).start()\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 function 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\n const nonAnimatedStyle = {}\n for (const key of Object.keys(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(animatedTranforms.current[index]?.[tkey], transform[tkey]),\n }\n }\n }\n } else {\n animateStyles.current[key] = update(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 onDidAnimateCb,\n presence?.exitVariant,\n presence?.enterVariant,\n ]\n\n useLayoutEffect(() => {\n //\n for (const runner of runners) {\n runner()\n }\n }, args)\n\n // const callback = (\n // isExiting: boolean,\n // exitingStyleProps: Record<string, boolean>,\n // key: string,\n // value: any\n // ) => {\n // return (completed, current) => {\n // onDidAnimateCb(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 // sendExitComplete?.()\n // }\n // }\n // }\n // }\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n }, args)\n },\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,18 +35,19 @@ function createAnimations(animations) {
|
|
|
35
35
|
});
|
|
36
36
|
const animateStyles = useRef({});
|
|
37
37
|
const animatedTranforms = useRef([]);
|
|
38
|
-
const interpolations = /* @__PURE__ */ new WeakMap();
|
|
38
|
+
const interpolations = useRef(/* @__PURE__ */ new WeakMap());
|
|
39
39
|
const runners = [];
|
|
40
40
|
function update(animated, valIn) {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
41
|
+
if (typeof props.animation !== "string") {
|
|
42
|
+
return new Animated.Value(0);
|
|
43
|
+
}
|
|
44
|
+
const [val, type] = getValue(valIn);
|
|
45
|
+
const value = animated || new Animated.Value(val);
|
|
46
|
+
if (type) {
|
|
47
|
+
interpolations.current.set(value, getInterpolated(value, type, val));
|
|
47
48
|
}
|
|
48
49
|
if (animated) {
|
|
49
|
-
const animationConfig =
|
|
50
|
+
const animationConfig = animations[props.animation];
|
|
50
51
|
runners.push(() => {
|
|
51
52
|
Animated.spring(animated, {
|
|
52
53
|
toValue: val,
|
|
@@ -54,12 +55,32 @@ function createAnimations(animations) {
|
|
|
54
55
|
...animationConfig
|
|
55
56
|
}).start();
|
|
56
57
|
});
|
|
57
|
-
return animated;
|
|
58
|
-
} else {
|
|
59
|
-
const res = new Animated.Value(val);
|
|
60
|
-
interpolations.set(res, postfix);
|
|
61
|
-
return res;
|
|
62
58
|
}
|
|
59
|
+
return value;
|
|
60
|
+
}
|
|
61
|
+
function getValue(input) {
|
|
62
|
+
var _a2;
|
|
63
|
+
if (typeof input !== "string") {
|
|
64
|
+
return [input];
|
|
65
|
+
}
|
|
66
|
+
const neg = input[0] === "-";
|
|
67
|
+
if (neg)
|
|
68
|
+
input = input.slice(1);
|
|
69
|
+
const [_, number, after] = (_a2 = input.match(/([-0-9]+)(deg|%)/)) != null ? _a2 : [];
|
|
70
|
+
return [+number * (neg ? -1 : 1), after];
|
|
71
|
+
}
|
|
72
|
+
function getInterpolated(val, postfix, next) {
|
|
73
|
+
const cur = val["_value"];
|
|
74
|
+
const inputRange = [cur, next];
|
|
75
|
+
const outputRange = [`${cur}deg`, `${next}deg`];
|
|
76
|
+
if (next < cur) {
|
|
77
|
+
inputRange.reverse();
|
|
78
|
+
outputRange.reverse();
|
|
79
|
+
}
|
|
80
|
+
return val.interpolate({
|
|
81
|
+
inputRange,
|
|
82
|
+
outputRange
|
|
83
|
+
});
|
|
63
84
|
}
|
|
64
85
|
const nonAnimatedStyle = {};
|
|
65
86
|
for (const key of Object.keys(all)) {
|
|
@@ -84,8 +105,14 @@ function createAnimations(animations) {
|
|
|
84
105
|
}
|
|
85
106
|
}
|
|
86
107
|
const animatedStyle = {
|
|
87
|
-
...
|
|
88
|
-
|
|
108
|
+
...Object.fromEntries(Object.entries({
|
|
109
|
+
...animateStyles.current
|
|
110
|
+
}).map(([k, v]) => [k, interpolations.current.get(v) || v])),
|
|
111
|
+
transform: animatedTranforms.current.map((r) => {
|
|
112
|
+
const key = Object.keys(r)[0];
|
|
113
|
+
const val = interpolations.current.get(r[key]) || r[key];
|
|
114
|
+
return { [key]: val };
|
|
115
|
+
})
|
|
89
116
|
};
|
|
90
117
|
const args = [
|
|
91
118
|
JSON.stringify(all),
|
|
@@ -103,7 +130,6 @@ function createAnimations(animations) {
|
|
|
103
130
|
];
|
|
104
131
|
useLayoutEffect(() => {
|
|
105
132
|
for (const runner of runners) {
|
|
106
|
-
console.log("gogo");
|
|
107
133
|
runner();
|
|
108
134
|
}
|
|
109
135
|
}, args);
|
|
@@ -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 { AnimationDriver, AnimationProp, isWeb } from '@tamagui/core'\nimport { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } 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// | ({ 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}\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 [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 onDidAnimateCb = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\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 animateStyles = useRef<Record<string, Animated.Value>>({})\n const animatedTranforms = useRef<{ [key: string]: Animated.Value }[]>([])\n const interpolations = new WeakMap<Animated.Value,
|
|
5
|
-
"mappings": "AAAA;AACA;AACA;AACA;AAyBA,MAAM,mBAAmB;AAAA,EACvB,WAAW;AAAA,EACX,SAAS;AACX;AAEO,0BAAsD,YAAmC;AAC9F,QAAM,eAAe,SAAS;AAC9B,QAAM,eAAe,SAAS;AAE9B,eAAa,iBAAiB;AAC9B,eAAa,iBAAiB;AAE9B,SAAO;AAAA,IACL,cAAc;AAAA,IACd;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN,eAAe,CAAC,OAAO,YAAY;AA7CvC;AA8CM,YAAM,EAAE,SAAS,cAAc,OAAO,UAAU,OAAO,iBAAiB;AACxE,YAAM,CAAC,WAAW,oBAAoB,YAAY;AAClD,YAAM,WAAW,WAAW,eAAe;AAE3C,YAAM,YAAY,sCAAU,eACxB,0BAAa,mBAAb,mBAA8B,SAAS,iBAAvC,mBAAqD,SAAQ,QAAQ,YACrE,QAAQ;AAEZ,YAAM,iBAAiB,YACrB,IAAI,UAAS;AACX,qDAAe,GAAG;AAAA,MACpB,GACA,CAAC,YAAY,CACf;AAEA,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,oBAAI,
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp, isWeb } from '@tamagui/core'\nimport { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } 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// | ({ 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}\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 [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 onDidAnimateCb = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\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 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\n function update(animated: Animated.Value | undefined, valIn: string | number) {\n if (typeof props.animation !== 'string') {\n return new Animated.Value(0)\n }\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 = animations[props.animation]\n runners.push(() => {\n Animated.spring(animated, {\n toValue: val,\n useNativeDriver: !isWeb,\n ...animationConfig,\n }).start()\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 function 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\n const nonAnimatedStyle = {}\n for (const key of Object.keys(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(animatedTranforms.current[index]?.[tkey], transform[tkey]),\n }\n }\n }\n } else {\n animateStyles.current[key] = update(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 onDidAnimateCb,\n presence?.exitVariant,\n presence?.enterVariant,\n ]\n\n useLayoutEffect(() => {\n //\n for (const runner of runners) {\n runner()\n }\n }, args)\n\n // const callback = (\n // isExiting: boolean,\n // exitingStyleProps: Record<string, boolean>,\n // key: string,\n // value: any\n // ) => {\n // return (completed, current) => {\n // onDidAnimateCb(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 // sendExitComplete?.()\n // }\n // }\n // }\n // }\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n }, args)\n },\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/animations-react-native",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.106",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"sideEffects": true,
|
|
6
6
|
"license": "MIT",
|
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
"dist"
|
|
15
15
|
],
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@tamagui/animate-presence": "^1.0.1-beta.
|
|
18
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
17
|
+
"@tamagui/animate-presence": "^1.0.1-beta.106",
|
|
18
|
+
"@tamagui/core": "^1.0.1-beta.106"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
21
|
+
"@tamagui/build": "^1.0.1-beta.106",
|
|
22
22
|
"react": "*",
|
|
23
23
|
"react-dom": "*",
|
|
24
24
|
"react-native": "*"
|
package/src/createAnimations.tsx
CHANGED
|
@@ -71,39 +71,56 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
71
71
|
|
|
72
72
|
const animateStyles = useRef<Record<string, Animated.Value>>({})
|
|
73
73
|
const animatedTranforms = useRef<{ [key: string]: Animated.Value }[]>([])
|
|
74
|
-
const interpolations = new WeakMap<Animated.Value,
|
|
74
|
+
const interpolations = useRef(new WeakMap<Animated.Value, Animated.AnimatedInterpolation>())
|
|
75
75
|
|
|
76
76
|
// TODO loop and create values, run them if they change
|
|
77
77
|
|
|
78
78
|
const runners: Function[] = []
|
|
79
79
|
|
|
80
|
-
function update(animated: Animated.Value | undefined, valIn:
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
80
|
+
function update(animated: Animated.Value | undefined, valIn: string | number) {
|
|
81
|
+
if (typeof props.animation !== 'string') {
|
|
82
|
+
return new Animated.Value(0)
|
|
83
|
+
}
|
|
84
|
+
const [val, type] = getValue(valIn)
|
|
85
|
+
const value = animated || new Animated.Value(val)
|
|
86
|
+
if (type) {
|
|
87
|
+
interpolations.current.set(value, getInterpolated(value, type, val))
|
|
87
88
|
}
|
|
88
89
|
if (animated) {
|
|
89
|
-
const animationConfig =
|
|
90
|
+
const animationConfig = animations[props.animation]
|
|
90
91
|
runners.push(() => {
|
|
91
|
-
// console.log('animate to', val, animationConfig)
|
|
92
92
|
Animated.spring(animated, {
|
|
93
93
|
toValue: val,
|
|
94
94
|
useNativeDriver: !isWeb,
|
|
95
95
|
...animationConfig,
|
|
96
96
|
}).start()
|
|
97
97
|
})
|
|
98
|
-
return animated
|
|
99
|
-
} else {
|
|
100
|
-
const res = new Animated.Value(val)
|
|
101
|
-
// console.log('set up', res, (val) =>
|
|
102
|
-
// Animated.spring(res, { toValue: val, useNativeDriver: false }).start()
|
|
103
|
-
// )
|
|
104
|
-
interpolations.set(res, postfix)
|
|
105
|
-
return res
|
|
106
98
|
}
|
|
99
|
+
return value
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
function getValue(input: number | string) {
|
|
103
|
+
if (typeof input !== 'string') {
|
|
104
|
+
return [input] as const
|
|
105
|
+
}
|
|
106
|
+
const neg = input[0] === '-'
|
|
107
|
+
if (neg) input = input.slice(1)
|
|
108
|
+
const [_, number, after] = input.match(/([-0-9]+)(deg|%)/) ?? []
|
|
109
|
+
return [+number * (neg ? -1 : 1), after] as const
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
function getInterpolated(val: Animated.Value, postfix: string, next: number) {
|
|
113
|
+
const cur = val['_value'] as number
|
|
114
|
+
const inputRange = [cur, next]
|
|
115
|
+
const outputRange = [`${cur}deg`, `${next}deg`]
|
|
116
|
+
if (next < cur) {
|
|
117
|
+
inputRange.reverse()
|
|
118
|
+
outputRange.reverse()
|
|
119
|
+
}
|
|
120
|
+
return val.interpolate({
|
|
121
|
+
inputRange,
|
|
122
|
+
outputRange,
|
|
123
|
+
})
|
|
107
124
|
}
|
|
108
125
|
|
|
109
126
|
const nonAnimatedStyle = {}
|
|
@@ -116,7 +133,6 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
116
133
|
for (const [index, transform] of val.entries()) {
|
|
117
134
|
if (!transform) continue
|
|
118
135
|
const tkey = Object.keys(transform)[0]
|
|
119
|
-
// console.log('tkey', tkey)
|
|
120
136
|
animatedTranforms.current[index] = {
|
|
121
137
|
[tkey]: update(animatedTranforms.current[index]?.[tkey], transform[tkey]),
|
|
122
138
|
}
|
|
@@ -131,8 +147,16 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
131
147
|
}
|
|
132
148
|
|
|
133
149
|
const animatedStyle = {
|
|
134
|
-
...
|
|
135
|
-
|
|
150
|
+
...Object.fromEntries(
|
|
151
|
+
Object.entries({
|
|
152
|
+
...animateStyles.current,
|
|
153
|
+
}).map(([k, v]) => [k, interpolations.current.get(v) || v])
|
|
154
|
+
),
|
|
155
|
+
transform: animatedTranforms.current.map((r) => {
|
|
156
|
+
const key = Object.keys(r)[0]
|
|
157
|
+
const val = interpolations.current.get(r[key]) || r[key]
|
|
158
|
+
return { [key]: val }
|
|
159
|
+
}),
|
|
136
160
|
}
|
|
137
161
|
|
|
138
162
|
const args = [
|
|
@@ -153,7 +177,6 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
153
177
|
useLayoutEffect(() => {
|
|
154
178
|
//
|
|
155
179
|
for (const runner of runners) {
|
|
156
|
-
console.log('gogo')
|
|
157
180
|
runner()
|
|
158
181
|
}
|
|
159
182
|
}, args)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAwB,MAAM,eAAe,CAAA;AAErE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,aAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,IAAI;KAC7C,GAAG,IAAI,MAAM,CAAC,GAAG,eAAe;CAClC,CAAA;AAED,aAAK,eAAe,GAAG,OAAO,CAC5B,IAAI,CACF,QAAQ,CAAC,qBAAqB,EAC5B,OAAO,GACP,YAAY,GACZ,SAAS,GACT,UAAU,GACV,MAAM,GACN,mBAAmB,GACnB,OAAO,GACP,WAAW,GACX,SAAS,GACT,UAAU,CACb,CACF,CAAA;AAUD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,gBAAgB,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAwB,MAAM,eAAe,CAAA;AAErE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,aAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,IAAI;KAC7C,GAAG,IAAI,MAAM,CAAC,GAAG,eAAe;CAClC,CAAA;AAED,aAAK,eAAe,GAAG,OAAO,CAC5B,IAAI,CACF,QAAQ,CAAC,qBAAqB,EAC5B,OAAO,GACP,YAAY,GACZ,SAAS,GACT,UAAU,GACV,MAAM,GACN,mBAAmB,GACnB,OAAO,GACP,WAAW,GACX,SAAS,GACT,UAAU,CACb,CACF,CAAA;AAUD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,gBAAgB,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAkL9F"}
|