@tamagui/animations-react-native 1.9.4 → 1.9.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/createAnimations.js +25 -11
- package/dist/cjs/createAnimations.js.map +2 -2
- package/dist/esm/createAnimations.js +25 -11
- package/dist/esm/createAnimations.js.map +2 -2
- package/dist/esm/createAnimations.mjs +25 -11
- package/dist/esm/createAnimations.mjs.map +2 -2
- package/package.json +4 -4
- package/src/createAnimations.tsx +32 -16
- package/types/createAnimations.d.ts.map +1 -1
|
@@ -118,10 +118,9 @@ function createAnimations(animations) {
|
|
|
118
118
|
const mergedStyles = style;
|
|
119
119
|
const animateStyles = (0, import_web.useSafeRef)({});
|
|
120
120
|
const animatedTranforms = (0, import_web.useSafeRef)([]);
|
|
121
|
-
const animationsState = (0, import_web.useSafeRef)(
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
}
|
|
121
|
+
const animationsState = (0, import_web.useSafeRef)(
|
|
122
|
+
/* @__PURE__ */ new WeakMap()
|
|
123
|
+
);
|
|
125
124
|
const args = [
|
|
126
125
|
JSON.stringify(mergedStyles),
|
|
127
126
|
JSON.stringify(state),
|
|
@@ -208,11 +207,18 @@ function createAnimations(animations) {
|
|
|
208
207
|
completions.push(promise);
|
|
209
208
|
runners.push(() => {
|
|
210
209
|
value.stopAnimation();
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
210
|
+
function getAnimation() {
|
|
211
|
+
return import_react_native.Animated[animationConfig.type || "spring"](value, {
|
|
212
|
+
toValue: val,
|
|
213
|
+
useNativeDriver: !import_web.isWeb,
|
|
214
|
+
...animationConfig
|
|
215
|
+
});
|
|
216
|
+
}
|
|
217
|
+
const animation = animationConfig.delay ? import_react_native.Animated.sequence([
|
|
218
|
+
import_react_native.Animated.delay(animationConfig.delay),
|
|
219
|
+
getAnimation()
|
|
220
|
+
]) : getAnimation();
|
|
221
|
+
animation.start(({ finished }) => {
|
|
216
222
|
if (finished) {
|
|
217
223
|
resolve();
|
|
218
224
|
}
|
|
@@ -267,14 +273,16 @@ function getInterpolated(current, next, postfix = "deg") {
|
|
|
267
273
|
};
|
|
268
274
|
}
|
|
269
275
|
function getAnimationConfig(key, animations, animation) {
|
|
276
|
+
var _a, _b;
|
|
270
277
|
if (typeof animation === "string") {
|
|
271
278
|
return animations[animation];
|
|
272
279
|
}
|
|
273
280
|
let type = "";
|
|
274
281
|
let extraConf;
|
|
282
|
+
const shortKey = transformShorthands[key];
|
|
275
283
|
if (Array.isArray(animation)) {
|
|
276
284
|
type = animation[0];
|
|
277
|
-
const conf = animation[1]
|
|
285
|
+
const conf = ((_a = animation[1]) == null ? void 0 : _a[key]) ?? ((_b = animation[1]) == null ? void 0 : _b[shortKey]);
|
|
278
286
|
if (conf) {
|
|
279
287
|
if (typeof conf === "string") {
|
|
280
288
|
type = conf;
|
|
@@ -284,7 +292,7 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
284
292
|
}
|
|
285
293
|
}
|
|
286
294
|
} else {
|
|
287
|
-
const val = animation == null ? void 0 : animation[key];
|
|
295
|
+
const val = (animation == null ? void 0 : animation[key]) ?? (animation == null ? void 0 : animation[shortKey]);
|
|
288
296
|
type = val == null ? void 0 : val.type;
|
|
289
297
|
extraConf = val;
|
|
290
298
|
}
|
|
@@ -297,6 +305,12 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
297
305
|
...extraConf
|
|
298
306
|
};
|
|
299
307
|
}
|
|
308
|
+
const transformShorthands = {
|
|
309
|
+
x: "translateX",
|
|
310
|
+
y: "translateY",
|
|
311
|
+
translateX: "x",
|
|
312
|
+
translateY: "y"
|
|
313
|
+
};
|
|
300
314
|
function getValue(input) {
|
|
301
315
|
if (typeof input !== "string") {
|
|
302
316
|
return [input];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { usePresence } from '@tamagui/use-presence'\nimport {\n AnimatedNumberStrategy,\n AnimationDriver,\n AnimationProp,\n UniversalAnimatedNumber,\n isWeb,\n useEvent,\n useIsomorphicLayoutEffect,\n useSafeRef,\n} from '@tamagui/web'\nimport { useEffect, useMemo } from 'react'\nimport { Animated } from 'react-native'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype SpringConfig = { type?: 'spring' } & 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\ntype TimingConfig = { type: 'timing' } & Partial<Animated.TimingAnimationConfig>\n\ntype AnimationConfig = SpringConfig | TimingConfig\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(\n initial: number\n): UniversalAnimatedNumber<Animated.Value> {\n const state = useSafeRef(\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>(\n animations: A\n): AnimationDriver<A> {\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n isReactNative: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n usePresence,\n useAnimations: ({ props, onDidAnimate, style, state, presence }) => {\n const isExiting = presence?.[0] === false\n const sendExitComplete = presence?.[1]\n const mergedStyles = style\n const animateStyles = useSafeRef<Record<string, Animated.Value>>({})\n const animatedTranforms = useSafeRef<{ [key: string]: Animated.Value }[]>([])\n\n const animationsState = useSafeRef<\n WeakMap<\n Animated.Value,\n {\n interopolation: Animated.AnimatedInterpolation<any>\n current?: number | undefined\n }\n >\n >(null as any)\n if (!animationsState.current) {\n animationsState.current = new WeakMap()\n }\n\n // const args = [JSON.stringify(mergedStyles)]\n const args = [\n JSON.stringify(mergedStyles),\n JSON.stringify(state),\n isExiting,\n !!onDidAnimate,\n ]\n\n const res = useMemo(() => {\n const runners: Function[] = []\n const completions: Promise<void>[] = []\n\n const nonAnimatedStyle = {}\n for (const key in mergedStyles) {\n const val = mergedStyles[key]\n if (!animatedStyleKey[key]) {\n nonAnimatedStyle[key] = val\n continue\n }\n if (key !== 'transform') {\n animateStyles.current[key] = update(key, animateStyles.current[key], val)\n continue\n }\n // key: 'transform'\n // for now just support one transform key\n if (!val) continue\n\n for (const [index, transform] of val.entries()) {\n if (!transform) continue\n const tkey = Object.keys(transform)[0]\n const currentTransform = animatedTranforms.current[index]?.[tkey]\n animatedTranforms.current[index] = {\n [tkey]: update(tkey, currentTransform, transform[tkey]),\n }\n animatedTranforms.current = [...animatedTranforms.current]\n }\n }\n\n const animatedStyle = {\n ...Object.fromEntries(\n Object.entries(animateStyles.current).map(([k, v]) => [\n k,\n animationsState.current!.get(v)?.interopolation || v,\n ])\n ),\n transform: animatedTranforms.current.map((r) => {\n const key = Object.keys(r)[0]\n const val = animationsState.current!.get(r[key])?.interopolation || r[key]\n return { [key]: val }\n }),\n }\n\n return {\n runners,\n completions,\n style: [nonAnimatedStyle, animatedStyle],\n }\n\n function update(\n key: string,\n animated: Animated.Value | undefined,\n valIn: string | number\n ) {\n const [val, type] = getValue(valIn)\n const value = animated || new Animated.Value(val)\n\n // this optimization seems to work for web but not native...\n if (isWeb) {\n if (animated && val === animated['_value']) {\n // avoid running again for same value\n return value\n }\n }\n\n let interpolateArgs: any\n if (type) {\n const curInterpolation = animationsState.current.get(value)\n interpolateArgs = getInterpolated(\n curInterpolation?.current ?? value['_value'],\n val,\n type\n )\n animationsState.current!.set(value, {\n interopolation: value.interpolate(interpolateArgs),\n current: val,\n })\n }\n\n if (value) {\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 value.stopAnimation()\n Animated[animationConfig.type || 'spring'](value, {\n toValue: val,\n useNativeDriver: !isWeb,\n ...animationConfig,\n }).start(({ finished }) => {\n if (finished) {\n resolve()\n }\n })\n })\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n // eslint-disable-next-line no-console\n // prettier-ignore\n console.log(' \uD83D\uDCA0 animate',key,`from ${value['_value']} to`,valIn,`(${val})`,'type',type,'interpolate',interpolateArgs)\n }\n }\n return value\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, args)\n\n useIsomorphicLayoutEffect(() => {\n res.runners.forEach((r) => r())\n let cancel = false\n Promise.all(res.completions).then(() => {\n if (cancel) return\n onDidAnimate?.()\n if (isExiting) {\n sendExitComplete?.()\n }\n })\n return () => {\n cancel = true\n }\n }, args)\n\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n // eslint-disable-next-line no-console\n console.log(`Returning animated`, res)\n }\n }\n\n return res\n },\n }\n}\n\nfunction getInterpolated(current: number, next: number, postfix = 'deg') {\n if (next === current) {\n current = next - 0.000000001\n }\n const inputRange = [current, next]\n const outputRange = [`${current}${postfix}`, `${next}${postfix}`]\n if (next < current) {\n inputRange.reverse()\n outputRange.reverse()\n }\n return {\n inputRange,\n outputRange,\n }\n}\n\nfunction getAnimationConfig(\n key: string,\n animations: AnimationsConfig,\n animation?: AnimationProp\n): AnimationConfig {\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\nfunction getValue(input: number | string) {\n if (typeof input !== 'string') {\n return [input] as const\n }\n const [_, number, after] = input.match(/([-0-9]+)(deg|%|px)/) ?? []\n return [+number, after] as const\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA4B;AAC5B,iBASO;AACP,mBAAmC;AACnC,0BAAyB;AA0BzB,MAAM,mBAAmB;AAAA,EACvB,WAAW;AAAA,EACX,SAAS;AACX;AAEO,MAAM,eAAe,6BAAS;AAC9B,MAAM,eAAe,6BAAS;AAE9B,SAAS,kBACd,SACyC;AACzC,QAAM,YAAQ;AAAA,IACZ;AAAA,EAKF;AACA,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,WAAW;AAAA,MACX,KAAK,IAAI,6BAAS,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,QAAQ;AAAA,IACnC;AAAA,IACA,OAAO;AAvEX;AAwEM,kBAAM,QAAQ,cAAd,mBAAyB;AACzB,YAAM,QAAQ,YAAY;AAAA,IAC5B;AAAA,IACA,SAAS,MAAc,EAAE,MAAM,GAAG,OAAO,IAAI,EAAE,MAAM,SAAS,GAAG;AA3ErE;AA4EM,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,6BAAS,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,6BAAS,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,SAAS,0BACd,OACA,IACA;AACA,QAAM,eAAW,qBAAS,CAAC,YAAY;AACrC,OAAG,QAAQ,KAAK;AAAA,EAClB,CAAC;AAED,8BAAU,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,SAAS,uBACd,OACA,UACA;AACA,SAAO,SAAS,MAAM,YAAY,CAAC;AACrC;AAEO,SAAS,iBACd,YACoB;AACpB,eAAa,aAAa,IAAI;AAC9B,eAAa,aAAa,IAAI;AAE9B,SAAO;AAAA,IACL,eAAe;AAAA,IACf;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,CAAC,EAAE,OAAO,cAAc,OAAO,OAAO,SAAS,MAAM;AAClE,YAAM,aAAY,qCAAW,QAAO;AACpC,YAAM,mBAAmB,qCAAW;AACpC,YAAM,eAAe;AACrB,YAAM,oBAAgB,uBAA2C,CAAC,CAAC;AACnE,YAAM,wBAAoB,uBAAgD,CAAC,CAAC;
|
|
4
|
+
"sourcesContent": ["import { usePresence } from '@tamagui/use-presence'\nimport {\n AnimatedNumberStrategy,\n AnimationDriver,\n AnimationProp,\n UniversalAnimatedNumber,\n isWeb,\n useEvent,\n useIsomorphicLayoutEffect,\n useSafeRef,\n} from '@tamagui/web'\nimport { useEffect, useMemo } from 'react'\nimport { Animated } from 'react-native'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype SpringConfig = { type?: 'spring' } & 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\ntype TimingConfig = { type: 'timing' } & Partial<Animated.TimingAnimationConfig>\n\ntype AnimationConfig = SpringConfig | TimingConfig\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(\n initial: number\n): UniversalAnimatedNumber<Animated.Value> {\n const state = useSafeRef(\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>(\n animations: A\n): AnimationDriver<A> {\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n isReactNative: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n usePresence,\n useAnimations: ({ props, onDidAnimate, style, state, presence }) => {\n const isExiting = presence?.[0] === false\n const sendExitComplete = presence?.[1]\n const mergedStyles = style\n const animateStyles = useSafeRef<Record<string, Animated.Value>>({})\n const animatedTranforms = useSafeRef<{ [key: string]: Animated.Value }[]>([])\n const animationsState = useSafeRef(\n new WeakMap<\n Animated.Value,\n {\n interopolation: Animated.AnimatedInterpolation<any>\n current?: number | undefined\n }\n >()\n )\n\n const args = [\n JSON.stringify(mergedStyles),\n JSON.stringify(state),\n isExiting,\n !!onDidAnimate,\n ]\n\n const res = useMemo(() => {\n const runners: Function[] = []\n const completions: Promise<void>[] = []\n\n const nonAnimatedStyle = {}\n for (const key in mergedStyles) {\n const val = mergedStyles[key]\n if (!animatedStyleKey[key]) {\n nonAnimatedStyle[key] = val\n continue\n }\n if (key !== 'transform') {\n animateStyles.current[key] = update(key, animateStyles.current[key], val)\n continue\n }\n // key: 'transform'\n // for now just support one transform key\n if (!val) continue\n\n for (const [index, transform] of val.entries()) {\n if (!transform) continue\n const tkey = Object.keys(transform)[0]\n const currentTransform = animatedTranforms.current[index]?.[tkey]\n animatedTranforms.current[index] = {\n [tkey]: update(tkey, currentTransform, transform[tkey]),\n }\n animatedTranforms.current = [...animatedTranforms.current]\n }\n }\n\n const animatedStyle = {\n ...Object.fromEntries(\n Object.entries(animateStyles.current).map(([k, v]) => [\n k,\n animationsState.current!.get(v)?.interopolation || v,\n ])\n ),\n transform: animatedTranforms.current.map((r) => {\n const key = Object.keys(r)[0]\n const val = animationsState.current!.get(r[key])?.interopolation || r[key]\n return { [key]: val }\n }),\n }\n\n return {\n runners,\n completions,\n style: [nonAnimatedStyle, animatedStyle],\n }\n\n function update(\n key: string,\n animated: Animated.Value | undefined,\n valIn: string | number\n ) {\n const [val, type] = getValue(valIn)\n const value = animated || new Animated.Value(val)\n\n // this optimization seems to work for web but not native...\n if (isWeb) {\n if (animated && val === animated['_value']) {\n // avoid running again for same value\n return value\n }\n }\n\n let interpolateArgs: any\n if (type) {\n const curInterpolation = animationsState.current.get(value)\n interpolateArgs = getInterpolated(\n curInterpolation?.current ?? value['_value'],\n val,\n type\n )\n animationsState.current!.set(value, {\n interopolation: value.interpolate(interpolateArgs),\n current: val,\n })\n }\n\n if (value) {\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 value.stopAnimation()\n\n function getAnimation() {\n return Animated[animationConfig.type || 'spring'](value, {\n toValue: val,\n useNativeDriver: !isWeb,\n ...animationConfig,\n })\n }\n\n const animation = animationConfig.delay\n ? Animated.sequence([\n Animated.delay(animationConfig.delay),\n getAnimation(),\n ])\n : getAnimation()\n\n animation.start(({ finished }) => {\n if (finished) {\n resolve()\n }\n })\n })\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n // eslint-disable-next-line no-console\n // prettier-ignore\n console.log(' \uD83D\uDCA0 animate',key,`from ${value['_value']} to`,valIn,`(${val})`,'type',type,'interpolate',interpolateArgs)\n }\n }\n return value\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, args)\n\n useIsomorphicLayoutEffect(() => {\n res.runners.forEach((r) => r())\n let cancel = false\n Promise.all(res.completions).then(() => {\n if (cancel) return\n onDidAnimate?.()\n if (isExiting) {\n sendExitComplete?.()\n }\n })\n return () => {\n cancel = true\n }\n }, args)\n\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n // eslint-disable-next-line no-console\n console.log(`Returning animated`, res)\n }\n }\n\n return res\n },\n }\n}\n\nfunction getInterpolated(current: number, next: number, postfix = 'deg') {\n if (next === current) {\n current = next - 0.000000001\n }\n const inputRange = [current, next]\n const outputRange = [`${current}${postfix}`, `${next}${postfix}`]\n if (next < current) {\n inputRange.reverse()\n outputRange.reverse()\n }\n return {\n inputRange,\n outputRange,\n }\n}\n\nfunction getAnimationConfig(\n key: string,\n animations: AnimationsConfig,\n animation?: AnimationProp\n): AnimationConfig {\n if (typeof animation === 'string') {\n return animations[animation]\n }\n let type = ''\n let extraConf: any\n const shortKey = transformShorthands[key]\n if (Array.isArray(animation)) {\n type = animation[0] as string\n const conf = animation[1]?.[key] ?? animation[1]?.[shortKey]\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] ?? animation?.[shortKey]\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\n// try both combos\nconst transformShorthands = {\n x: 'translateX',\n y: 'translateY',\n translateX: 'x',\n translateY: 'y',\n}\n\nfunction getValue(input: number | string) {\n if (typeof input !== 'string') {\n return [input] as const\n }\n const [_, number, after] = input.match(/([-0-9]+)(deg|%|px)/) ?? []\n return [+number, after] as const\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["_a", "res"]
|
|
7
7
|
}
|
|
@@ -95,10 +95,9 @@ function createAnimations(animations) {
|
|
|
95
95
|
const mergedStyles = style;
|
|
96
96
|
const animateStyles = useSafeRef({});
|
|
97
97
|
const animatedTranforms = useSafeRef([]);
|
|
98
|
-
const animationsState = useSafeRef(
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
}
|
|
98
|
+
const animationsState = useSafeRef(
|
|
99
|
+
/* @__PURE__ */ new WeakMap()
|
|
100
|
+
);
|
|
102
101
|
const args = [
|
|
103
102
|
JSON.stringify(mergedStyles),
|
|
104
103
|
JSON.stringify(state),
|
|
@@ -185,11 +184,18 @@ function createAnimations(animations) {
|
|
|
185
184
|
completions.push(promise);
|
|
186
185
|
runners.push(() => {
|
|
187
186
|
value.stopAnimation();
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
187
|
+
function getAnimation() {
|
|
188
|
+
return Animated[animationConfig.type || "spring"](value, {
|
|
189
|
+
toValue: val,
|
|
190
|
+
useNativeDriver: !isWeb,
|
|
191
|
+
...animationConfig
|
|
192
|
+
});
|
|
193
|
+
}
|
|
194
|
+
const animation = animationConfig.delay ? Animated.sequence([
|
|
195
|
+
Animated.delay(animationConfig.delay),
|
|
196
|
+
getAnimation()
|
|
197
|
+
]) : getAnimation();
|
|
198
|
+
animation.start(({ finished }) => {
|
|
193
199
|
if (finished) {
|
|
194
200
|
resolve();
|
|
195
201
|
}
|
|
@@ -244,14 +250,16 @@ function getInterpolated(current, next, postfix = "deg") {
|
|
|
244
250
|
};
|
|
245
251
|
}
|
|
246
252
|
function getAnimationConfig(key, animations, animation) {
|
|
253
|
+
var _a, _b;
|
|
247
254
|
if (typeof animation === "string") {
|
|
248
255
|
return animations[animation];
|
|
249
256
|
}
|
|
250
257
|
let type = "";
|
|
251
258
|
let extraConf;
|
|
259
|
+
const shortKey = transformShorthands[key];
|
|
252
260
|
if (Array.isArray(animation)) {
|
|
253
261
|
type = animation[0];
|
|
254
|
-
const conf = animation[1]
|
|
262
|
+
const conf = ((_a = animation[1]) == null ? void 0 : _a[key]) ?? ((_b = animation[1]) == null ? void 0 : _b[shortKey]);
|
|
255
263
|
if (conf) {
|
|
256
264
|
if (typeof conf === "string") {
|
|
257
265
|
type = conf;
|
|
@@ -261,7 +269,7 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
261
269
|
}
|
|
262
270
|
}
|
|
263
271
|
} else {
|
|
264
|
-
const val = animation == null ? void 0 : animation[key];
|
|
272
|
+
const val = (animation == null ? void 0 : animation[key]) ?? (animation == null ? void 0 : animation[shortKey]);
|
|
265
273
|
type = val == null ? void 0 : val.type;
|
|
266
274
|
extraConf = val;
|
|
267
275
|
}
|
|
@@ -274,6 +282,12 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
274
282
|
...extraConf
|
|
275
283
|
};
|
|
276
284
|
}
|
|
285
|
+
const transformShorthands = {
|
|
286
|
+
x: "translateX",
|
|
287
|
+
y: "translateY",
|
|
288
|
+
translateX: "x",
|
|
289
|
+
translateY: "y"
|
|
290
|
+
};
|
|
277
291
|
function getValue(input) {
|
|
278
292
|
if (typeof input !== "string") {
|
|
279
293
|
return [input];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { usePresence } from '@tamagui/use-presence'\nimport {\n AnimatedNumberStrategy,\n AnimationDriver,\n AnimationProp,\n UniversalAnimatedNumber,\n isWeb,\n useEvent,\n useIsomorphicLayoutEffect,\n useSafeRef,\n} from '@tamagui/web'\nimport { useEffect, useMemo } from 'react'\nimport { Animated } from 'react-native'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype SpringConfig = { type?: 'spring' } & 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\ntype TimingConfig = { type: 'timing' } & Partial<Animated.TimingAnimationConfig>\n\ntype AnimationConfig = SpringConfig | TimingConfig\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(\n initial: number\n): UniversalAnimatedNumber<Animated.Value> {\n const state = useSafeRef(\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>(\n animations: A\n): AnimationDriver<A> {\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n isReactNative: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n usePresence,\n useAnimations: ({ props, onDidAnimate, style, state, presence }) => {\n const isExiting = presence?.[0] === false\n const sendExitComplete = presence?.[1]\n const mergedStyles = style\n const animateStyles = useSafeRef<Record<string, Animated.Value>>({})\n const animatedTranforms = useSafeRef<{ [key: string]: Animated.Value }[]>([])\n\n const animationsState = useSafeRef<\n WeakMap<\n Animated.Value,\n {\n interopolation: Animated.AnimatedInterpolation<any>\n current?: number | undefined\n }\n >\n >(null as any)\n if (!animationsState.current) {\n animationsState.current = new WeakMap()\n }\n\n // const args = [JSON.stringify(mergedStyles)]\n const args = [\n JSON.stringify(mergedStyles),\n JSON.stringify(state),\n isExiting,\n !!onDidAnimate,\n ]\n\n const res = useMemo(() => {\n const runners: Function[] = []\n const completions: Promise<void>[] = []\n\n const nonAnimatedStyle = {}\n for (const key in mergedStyles) {\n const val = mergedStyles[key]\n if (!animatedStyleKey[key]) {\n nonAnimatedStyle[key] = val\n continue\n }\n if (key !== 'transform') {\n animateStyles.current[key] = update(key, animateStyles.current[key], val)\n continue\n }\n // key: 'transform'\n // for now just support one transform key\n if (!val) continue\n\n for (const [index, transform] of val.entries()) {\n if (!transform) continue\n const tkey = Object.keys(transform)[0]\n const currentTransform = animatedTranforms.current[index]?.[tkey]\n animatedTranforms.current[index] = {\n [tkey]: update(tkey, currentTransform, transform[tkey]),\n }\n animatedTranforms.current = [...animatedTranforms.current]\n }\n }\n\n const animatedStyle = {\n ...Object.fromEntries(\n Object.entries(animateStyles.current).map(([k, v]) => [\n k,\n animationsState.current!.get(v)?.interopolation || v,\n ])\n ),\n transform: animatedTranforms.current.map((r) => {\n const key = Object.keys(r)[0]\n const val = animationsState.current!.get(r[key])?.interopolation || r[key]\n return { [key]: val }\n }),\n }\n\n return {\n runners,\n completions,\n style: [nonAnimatedStyle, animatedStyle],\n }\n\n function update(\n key: string,\n animated: Animated.Value | undefined,\n valIn: string | number\n ) {\n const [val, type] = getValue(valIn)\n const value = animated || new Animated.Value(val)\n\n // this optimization seems to work for web but not native...\n if (isWeb) {\n if (animated && val === animated['_value']) {\n // avoid running again for same value\n return value\n }\n }\n\n let interpolateArgs: any\n if (type) {\n const curInterpolation = animationsState.current.get(value)\n interpolateArgs = getInterpolated(\n curInterpolation?.current ?? value['_value'],\n val,\n type\n )\n animationsState.current!.set(value, {\n interopolation: value.interpolate(interpolateArgs),\n current: val,\n })\n }\n\n if (value) {\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 value.stopAnimation()\n Animated[animationConfig.type || 'spring'](value, {\n toValue: val,\n useNativeDriver: !isWeb,\n ...animationConfig,\n }).start(({ finished }) => {\n if (finished) {\n resolve()\n }\n })\n })\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n // eslint-disable-next-line no-console\n // prettier-ignore\n console.log(' \uD83D\uDCA0 animate',key,`from ${value['_value']} to`,valIn,`(${val})`,'type',type,'interpolate',interpolateArgs)\n }\n }\n return value\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, args)\n\n useIsomorphicLayoutEffect(() => {\n res.runners.forEach((r) => r())\n let cancel = false\n Promise.all(res.completions).then(() => {\n if (cancel) return\n onDidAnimate?.()\n if (isExiting) {\n sendExitComplete?.()\n }\n })\n return () => {\n cancel = true\n }\n }, args)\n\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n // eslint-disable-next-line no-console\n console.log(`Returning animated`, res)\n }\n }\n\n return res\n },\n }\n}\n\nfunction getInterpolated(current: number, next: number, postfix = 'deg') {\n if (next === current) {\n current = next - 0.000000001\n }\n const inputRange = [current, next]\n const outputRange = [`${current}${postfix}`, `${next}${postfix}`]\n if (next < current) {\n inputRange.reverse()\n outputRange.reverse()\n }\n return {\n inputRange,\n outputRange,\n }\n}\n\nfunction getAnimationConfig(\n key: string,\n animations: AnimationsConfig,\n animation?: AnimationProp\n): AnimationConfig {\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\nfunction getValue(input: number | string) {\n if (typeof input !== 'string') {\n return [input] as const\n }\n const [_, number, after] = input.match(/([-0-9]+)(deg|%|px)/) ?? []\n return [+number, after] as const\n}\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,mBAAmB;AAC5B;AAAA,EAKE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,eAAe;AACnC,SAAS,gBAAgB;AA0BzB,MAAM,mBAAmB;AAAA,EACvB,WAAW;AAAA,EACX,SAAS;AACX;AAEO,MAAM,eAAe,SAAS;AAC9B,MAAM,eAAe,SAAS;AAE9B,SAAS,kBACd,SACyC;AACzC,QAAM,QAAQ;AAAA,IACZ;AAAA,EAKF;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,QAAQ;AAAA,IACnC;AAAA,IACA,OAAO;AAvEX;AAwEM,kBAAM,QAAQ,cAAd,mBAAyB;AACzB,YAAM,QAAQ,YAAY;AAAA,IAC5B;AAAA,IACA,SAAS,MAAc,EAAE,MAAM,GAAG,OAAO,IAAI,EAAE,MAAM,SAAS,GAAG;AA3ErE;AA4EM,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,SAAS,0BACd,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,SAAS,uBACd,OACA,UACA;AACA,SAAO,SAAS,MAAM,YAAY,CAAC;AACrC;AAEO,SAAS,iBACd,YACoB;AACpB,eAAa,aAAa,IAAI;AAC9B,eAAa,aAAa,IAAI;AAE9B,SAAO;AAAA,IACL,eAAe;AAAA,IACf;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,CAAC,EAAE,OAAO,cAAc,OAAO,OAAO,SAAS,MAAM;AAClE,YAAM,aAAY,qCAAW,QAAO;AACpC,YAAM,mBAAmB,qCAAW;AACpC,YAAM,eAAe;AACrB,YAAM,gBAAgB,WAA2C,CAAC,CAAC;AACnE,YAAM,oBAAoB,WAAgD,CAAC,CAAC;
|
|
4
|
+
"sourcesContent": ["import { usePresence } from '@tamagui/use-presence'\nimport {\n AnimatedNumberStrategy,\n AnimationDriver,\n AnimationProp,\n UniversalAnimatedNumber,\n isWeb,\n useEvent,\n useIsomorphicLayoutEffect,\n useSafeRef,\n} from '@tamagui/web'\nimport { useEffect, useMemo } from 'react'\nimport { Animated } from 'react-native'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype SpringConfig = { type?: 'spring' } & 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\ntype TimingConfig = { type: 'timing' } & Partial<Animated.TimingAnimationConfig>\n\ntype AnimationConfig = SpringConfig | TimingConfig\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(\n initial: number\n): UniversalAnimatedNumber<Animated.Value> {\n const state = useSafeRef(\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>(\n animations: A\n): AnimationDriver<A> {\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n isReactNative: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n usePresence,\n useAnimations: ({ props, onDidAnimate, style, state, presence }) => {\n const isExiting = presence?.[0] === false\n const sendExitComplete = presence?.[1]\n const mergedStyles = style\n const animateStyles = useSafeRef<Record<string, Animated.Value>>({})\n const animatedTranforms = useSafeRef<{ [key: string]: Animated.Value }[]>([])\n const animationsState = useSafeRef(\n new WeakMap<\n Animated.Value,\n {\n interopolation: Animated.AnimatedInterpolation<any>\n current?: number | undefined\n }\n >()\n )\n\n const args = [\n JSON.stringify(mergedStyles),\n JSON.stringify(state),\n isExiting,\n !!onDidAnimate,\n ]\n\n const res = useMemo(() => {\n const runners: Function[] = []\n const completions: Promise<void>[] = []\n\n const nonAnimatedStyle = {}\n for (const key in mergedStyles) {\n const val = mergedStyles[key]\n if (!animatedStyleKey[key]) {\n nonAnimatedStyle[key] = val\n continue\n }\n if (key !== 'transform') {\n animateStyles.current[key] = update(key, animateStyles.current[key], val)\n continue\n }\n // key: 'transform'\n // for now just support one transform key\n if (!val) continue\n\n for (const [index, transform] of val.entries()) {\n if (!transform) continue\n const tkey = Object.keys(transform)[0]\n const currentTransform = animatedTranforms.current[index]?.[tkey]\n animatedTranforms.current[index] = {\n [tkey]: update(tkey, currentTransform, transform[tkey]),\n }\n animatedTranforms.current = [...animatedTranforms.current]\n }\n }\n\n const animatedStyle = {\n ...Object.fromEntries(\n Object.entries(animateStyles.current).map(([k, v]) => [\n k,\n animationsState.current!.get(v)?.interopolation || v,\n ])\n ),\n transform: animatedTranforms.current.map((r) => {\n const key = Object.keys(r)[0]\n const val = animationsState.current!.get(r[key])?.interopolation || r[key]\n return { [key]: val }\n }),\n }\n\n return {\n runners,\n completions,\n style: [nonAnimatedStyle, animatedStyle],\n }\n\n function update(\n key: string,\n animated: Animated.Value | undefined,\n valIn: string | number\n ) {\n const [val, type] = getValue(valIn)\n const value = animated || new Animated.Value(val)\n\n // this optimization seems to work for web but not native...\n if (isWeb) {\n if (animated && val === animated['_value']) {\n // avoid running again for same value\n return value\n }\n }\n\n let interpolateArgs: any\n if (type) {\n const curInterpolation = animationsState.current.get(value)\n interpolateArgs = getInterpolated(\n curInterpolation?.current ?? value['_value'],\n val,\n type\n )\n animationsState.current!.set(value, {\n interopolation: value.interpolate(interpolateArgs),\n current: val,\n })\n }\n\n if (value) {\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 value.stopAnimation()\n\n function getAnimation() {\n return Animated[animationConfig.type || 'spring'](value, {\n toValue: val,\n useNativeDriver: !isWeb,\n ...animationConfig,\n })\n }\n\n const animation = animationConfig.delay\n ? Animated.sequence([\n Animated.delay(animationConfig.delay),\n getAnimation(),\n ])\n : getAnimation()\n\n animation.start(({ finished }) => {\n if (finished) {\n resolve()\n }\n })\n })\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n // eslint-disable-next-line no-console\n // prettier-ignore\n console.log(' \uD83D\uDCA0 animate',key,`from ${value['_value']} to`,valIn,`(${val})`,'type',type,'interpolate',interpolateArgs)\n }\n }\n return value\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, args)\n\n useIsomorphicLayoutEffect(() => {\n res.runners.forEach((r) => r())\n let cancel = false\n Promise.all(res.completions).then(() => {\n if (cancel) return\n onDidAnimate?.()\n if (isExiting) {\n sendExitComplete?.()\n }\n })\n return () => {\n cancel = true\n }\n }, args)\n\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n // eslint-disable-next-line no-console\n console.log(`Returning animated`, res)\n }\n }\n\n return res\n },\n }\n}\n\nfunction getInterpolated(current: number, next: number, postfix = 'deg') {\n if (next === current) {\n current = next - 0.000000001\n }\n const inputRange = [current, next]\n const outputRange = [`${current}${postfix}`, `${next}${postfix}`]\n if (next < current) {\n inputRange.reverse()\n outputRange.reverse()\n }\n return {\n inputRange,\n outputRange,\n }\n}\n\nfunction getAnimationConfig(\n key: string,\n animations: AnimationsConfig,\n animation?: AnimationProp\n): AnimationConfig {\n if (typeof animation === 'string') {\n return animations[animation]\n }\n let type = ''\n let extraConf: any\n const shortKey = transformShorthands[key]\n if (Array.isArray(animation)) {\n type = animation[0] as string\n const conf = animation[1]?.[key] ?? animation[1]?.[shortKey]\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] ?? animation?.[shortKey]\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\n// try both combos\nconst transformShorthands = {\n x: 'translateX',\n y: 'translateY',\n translateX: 'x',\n translateY: 'y',\n}\n\nfunction getValue(input: number | string) {\n if (typeof input !== 'string') {\n return [input] as const\n }\n const [_, number, after] = input.match(/([-0-9]+)(deg|%|px)/) ?? []\n return [+number, after] as const\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["_a", "res"]
|
|
7
7
|
}
|
|
@@ -95,10 +95,9 @@ function createAnimations(animations) {
|
|
|
95
95
|
const mergedStyles = style;
|
|
96
96
|
const animateStyles = useSafeRef({});
|
|
97
97
|
const animatedTranforms = useSafeRef([]);
|
|
98
|
-
const animationsState = useSafeRef(
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
}
|
|
98
|
+
const animationsState = useSafeRef(
|
|
99
|
+
/* @__PURE__ */ new WeakMap()
|
|
100
|
+
);
|
|
102
101
|
const args = [
|
|
103
102
|
JSON.stringify(mergedStyles),
|
|
104
103
|
JSON.stringify(state),
|
|
@@ -185,11 +184,18 @@ function createAnimations(animations) {
|
|
|
185
184
|
completions.push(promise);
|
|
186
185
|
runners.push(() => {
|
|
187
186
|
value.stopAnimation();
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
187
|
+
function getAnimation() {
|
|
188
|
+
return Animated[animationConfig.type || "spring"](value, {
|
|
189
|
+
toValue: val,
|
|
190
|
+
useNativeDriver: !isWeb,
|
|
191
|
+
...animationConfig
|
|
192
|
+
});
|
|
193
|
+
}
|
|
194
|
+
const animation = animationConfig.delay ? Animated.sequence([
|
|
195
|
+
Animated.delay(animationConfig.delay),
|
|
196
|
+
getAnimation()
|
|
197
|
+
]) : getAnimation();
|
|
198
|
+
animation.start(({ finished }) => {
|
|
193
199
|
if (finished) {
|
|
194
200
|
resolve();
|
|
195
201
|
}
|
|
@@ -244,14 +250,16 @@ function getInterpolated(current, next, postfix = "deg") {
|
|
|
244
250
|
};
|
|
245
251
|
}
|
|
246
252
|
function getAnimationConfig(key, animations, animation) {
|
|
253
|
+
var _a, _b;
|
|
247
254
|
if (typeof animation === "string") {
|
|
248
255
|
return animations[animation];
|
|
249
256
|
}
|
|
250
257
|
let type = "";
|
|
251
258
|
let extraConf;
|
|
259
|
+
const shortKey = transformShorthands[key];
|
|
252
260
|
if (Array.isArray(animation)) {
|
|
253
261
|
type = animation[0];
|
|
254
|
-
const conf = animation[1]
|
|
262
|
+
const conf = ((_a = animation[1]) == null ? void 0 : _a[key]) ?? ((_b = animation[1]) == null ? void 0 : _b[shortKey]);
|
|
255
263
|
if (conf) {
|
|
256
264
|
if (typeof conf === "string") {
|
|
257
265
|
type = conf;
|
|
@@ -261,7 +269,7 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
261
269
|
}
|
|
262
270
|
}
|
|
263
271
|
} else {
|
|
264
|
-
const val = animation == null ? void 0 : animation[key];
|
|
272
|
+
const val = (animation == null ? void 0 : animation[key]) ?? (animation == null ? void 0 : animation[shortKey]);
|
|
265
273
|
type = val == null ? void 0 : val.type;
|
|
266
274
|
extraConf = val;
|
|
267
275
|
}
|
|
@@ -274,6 +282,12 @@ function getAnimationConfig(key, animations, animation) {
|
|
|
274
282
|
...extraConf
|
|
275
283
|
};
|
|
276
284
|
}
|
|
285
|
+
const transformShorthands = {
|
|
286
|
+
x: "translateX",
|
|
287
|
+
y: "translateY",
|
|
288
|
+
translateX: "x",
|
|
289
|
+
translateY: "y"
|
|
290
|
+
};
|
|
277
291
|
function getValue(input) {
|
|
278
292
|
if (typeof input !== "string") {
|
|
279
293
|
return [input];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { usePresence } from '@tamagui/use-presence'\nimport {\n AnimatedNumberStrategy,\n AnimationDriver,\n AnimationProp,\n UniversalAnimatedNumber,\n isWeb,\n useEvent,\n useIsomorphicLayoutEffect,\n useSafeRef,\n} from '@tamagui/web'\nimport { useEffect, useMemo } from 'react'\nimport { Animated } from 'react-native'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype SpringConfig = { type?: 'spring' } & 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\ntype TimingConfig = { type: 'timing' } & Partial<Animated.TimingAnimationConfig>\n\ntype AnimationConfig = SpringConfig | TimingConfig\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(\n initial: number\n): UniversalAnimatedNumber<Animated.Value> {\n const state = useSafeRef(\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>(\n animations: A\n): AnimationDriver<A> {\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n isReactNative: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n usePresence,\n useAnimations: ({ props, onDidAnimate, style, state, presence }) => {\n const isExiting = presence?.[0] === false\n const sendExitComplete = presence?.[1]\n const mergedStyles = style\n const animateStyles = useSafeRef<Record<string, Animated.Value>>({})\n const animatedTranforms = useSafeRef<{ [key: string]: Animated.Value }[]>([])\n\n const animationsState = useSafeRef<\n WeakMap<\n Animated.Value,\n {\n interopolation: Animated.AnimatedInterpolation<any>\n current?: number | undefined\n }\n >\n >(null as any)\n if (!animationsState.current) {\n animationsState.current = new WeakMap()\n }\n\n // const args = [JSON.stringify(mergedStyles)]\n const args = [\n JSON.stringify(mergedStyles),\n JSON.stringify(state),\n isExiting,\n !!onDidAnimate,\n ]\n\n const res = useMemo(() => {\n const runners: Function[] = []\n const completions: Promise<void>[] = []\n\n const nonAnimatedStyle = {}\n for (const key in mergedStyles) {\n const val = mergedStyles[key]\n if (!animatedStyleKey[key]) {\n nonAnimatedStyle[key] = val\n continue\n }\n if (key !== 'transform') {\n animateStyles.current[key] = update(key, animateStyles.current[key], val)\n continue\n }\n // key: 'transform'\n // for now just support one transform key\n if (!val) continue\n\n for (const [index, transform] of val.entries()) {\n if (!transform) continue\n const tkey = Object.keys(transform)[0]\n const currentTransform = animatedTranforms.current[index]?.[tkey]\n animatedTranforms.current[index] = {\n [tkey]: update(tkey, currentTransform, transform[tkey]),\n }\n animatedTranforms.current = [...animatedTranforms.current]\n }\n }\n\n const animatedStyle = {\n ...Object.fromEntries(\n Object.entries(animateStyles.current).map(([k, v]) => [\n k,\n animationsState.current!.get(v)?.interopolation || v,\n ])\n ),\n transform: animatedTranforms.current.map((r) => {\n const key = Object.keys(r)[0]\n const val = animationsState.current!.get(r[key])?.interopolation || r[key]\n return { [key]: val }\n }),\n }\n\n return {\n runners,\n completions,\n style: [nonAnimatedStyle, animatedStyle],\n }\n\n function update(\n key: string,\n animated: Animated.Value | undefined,\n valIn: string | number\n ) {\n const [val, type] = getValue(valIn)\n const value = animated || new Animated.Value(val)\n\n // this optimization seems to work for web but not native...\n if (isWeb) {\n if (animated && val === animated['_value']) {\n // avoid running again for same value\n return value\n }\n }\n\n let interpolateArgs: any\n if (type) {\n const curInterpolation = animationsState.current.get(value)\n interpolateArgs = getInterpolated(\n curInterpolation?.current ?? value['_value'],\n val,\n type\n )\n animationsState.current!.set(value, {\n interopolation: value.interpolate(interpolateArgs),\n current: val,\n })\n }\n\n if (value) {\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 value.stopAnimation()\n Animated[animationConfig.type || 'spring'](value, {\n toValue: val,\n useNativeDriver: !isWeb,\n ...animationConfig,\n }).start(({ finished }) => {\n if (finished) {\n resolve()\n }\n })\n })\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n // eslint-disable-next-line no-console\n // prettier-ignore\n console.log(' \uD83D\uDCA0 animate',key,`from ${value['_value']} to`,valIn,`(${val})`,'type',type,'interpolate',interpolateArgs)\n }\n }\n return value\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, args)\n\n useIsomorphicLayoutEffect(() => {\n res.runners.forEach((r) => r())\n let cancel = false\n Promise.all(res.completions).then(() => {\n if (cancel) return\n onDidAnimate?.()\n if (isExiting) {\n sendExitComplete?.()\n }\n })\n return () => {\n cancel = true\n }\n }, args)\n\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n // eslint-disable-next-line no-console\n console.log(`Returning animated`, res)\n }\n }\n\n return res\n },\n }\n}\n\nfunction getInterpolated(current: number, next: number, postfix = 'deg') {\n if (next === current) {\n current = next - 0.000000001\n }\n const inputRange = [current, next]\n const outputRange = [`${current}${postfix}`, `${next}${postfix}`]\n if (next < current) {\n inputRange.reverse()\n outputRange.reverse()\n }\n return {\n inputRange,\n outputRange,\n }\n}\n\nfunction getAnimationConfig(\n key: string,\n animations: AnimationsConfig,\n animation?: AnimationProp\n): AnimationConfig {\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\nfunction getValue(input: number | string) {\n if (typeof input !== 'string') {\n return [input] as const\n }\n const [_, number, after] = input.match(/([-0-9]+)(deg|%|px)/) ?? []\n return [+number, after] as const\n}\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,mBAAmB;AAC5B;AAAA,EAKE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,eAAe;AACnC,SAAS,gBAAgB;AA0BzB,MAAM,mBAAmB;AAAA,EACvB,WAAW;AAAA,EACX,SAAS;AACX;AAEO,MAAM,eAAe,SAAS;AAC9B,MAAM,eAAe,SAAS;AAE9B,SAAS,kBACd,SACyC;AACzC,QAAM,QAAQ;AAAA,IACZ;AAAA,EAKF;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,QAAQ;AAAA,IACnC;AAAA,IACA,OAAO;AAvEX;AAwEM,kBAAM,QAAQ,cAAd,mBAAyB;AACzB,YAAM,QAAQ,YAAY;AAAA,IAC5B;AAAA,IACA,SAAS,MAAc,EAAE,MAAM,GAAG,OAAO,IAAI,EAAE,MAAM,SAAS,GAAG;AA3ErE;AA4EM,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,SAAS,0BACd,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,SAAS,uBACd,OACA,UACA;AACA,SAAO,SAAS,MAAM,YAAY,CAAC;AACrC;AAEO,SAAS,iBACd,YACoB;AACpB,eAAa,aAAa,IAAI;AAC9B,eAAa,aAAa,IAAI;AAE9B,SAAO;AAAA,IACL,eAAe;AAAA,IACf;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,CAAC,EAAE,OAAO,cAAc,OAAO,OAAO,SAAS,MAAM;AAClE,YAAM,aAAY,qCAAW,QAAO;AACpC,YAAM,mBAAmB,qCAAW;AACpC,YAAM,eAAe;AACrB,YAAM,gBAAgB,WAA2C,CAAC,CAAC;AACnE,YAAM,oBAAoB,WAAgD,CAAC,CAAC;
|
|
4
|
+
"sourcesContent": ["import { usePresence } from '@tamagui/use-presence'\nimport {\n AnimatedNumberStrategy,\n AnimationDriver,\n AnimationProp,\n UniversalAnimatedNumber,\n isWeb,\n useEvent,\n useIsomorphicLayoutEffect,\n useSafeRef,\n} from '@tamagui/web'\nimport { useEffect, useMemo } from 'react'\nimport { Animated } from 'react-native'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype SpringConfig = { type?: 'spring' } & 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\ntype TimingConfig = { type: 'timing' } & Partial<Animated.TimingAnimationConfig>\n\ntype AnimationConfig = SpringConfig | TimingConfig\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(\n initial: number\n): UniversalAnimatedNumber<Animated.Value> {\n const state = useSafeRef(\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>(\n animations: A\n): AnimationDriver<A> {\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n isReactNative: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n usePresence,\n useAnimations: ({ props, onDidAnimate, style, state, presence }) => {\n const isExiting = presence?.[0] === false\n const sendExitComplete = presence?.[1]\n const mergedStyles = style\n const animateStyles = useSafeRef<Record<string, Animated.Value>>({})\n const animatedTranforms = useSafeRef<{ [key: string]: Animated.Value }[]>([])\n const animationsState = useSafeRef(\n new WeakMap<\n Animated.Value,\n {\n interopolation: Animated.AnimatedInterpolation<any>\n current?: number | undefined\n }\n >()\n )\n\n const args = [\n JSON.stringify(mergedStyles),\n JSON.stringify(state),\n isExiting,\n !!onDidAnimate,\n ]\n\n const res = useMemo(() => {\n const runners: Function[] = []\n const completions: Promise<void>[] = []\n\n const nonAnimatedStyle = {}\n for (const key in mergedStyles) {\n const val = mergedStyles[key]\n if (!animatedStyleKey[key]) {\n nonAnimatedStyle[key] = val\n continue\n }\n if (key !== 'transform') {\n animateStyles.current[key] = update(key, animateStyles.current[key], val)\n continue\n }\n // key: 'transform'\n // for now just support one transform key\n if (!val) continue\n\n for (const [index, transform] of val.entries()) {\n if (!transform) continue\n const tkey = Object.keys(transform)[0]\n const currentTransform = animatedTranforms.current[index]?.[tkey]\n animatedTranforms.current[index] = {\n [tkey]: update(tkey, currentTransform, transform[tkey]),\n }\n animatedTranforms.current = [...animatedTranforms.current]\n }\n }\n\n const animatedStyle = {\n ...Object.fromEntries(\n Object.entries(animateStyles.current).map(([k, v]) => [\n k,\n animationsState.current!.get(v)?.interopolation || v,\n ])\n ),\n transform: animatedTranforms.current.map((r) => {\n const key = Object.keys(r)[0]\n const val = animationsState.current!.get(r[key])?.interopolation || r[key]\n return { [key]: val }\n }),\n }\n\n return {\n runners,\n completions,\n style: [nonAnimatedStyle, animatedStyle],\n }\n\n function update(\n key: string,\n animated: Animated.Value | undefined,\n valIn: string | number\n ) {\n const [val, type] = getValue(valIn)\n const value = animated || new Animated.Value(val)\n\n // this optimization seems to work for web but not native...\n if (isWeb) {\n if (animated && val === animated['_value']) {\n // avoid running again for same value\n return value\n }\n }\n\n let interpolateArgs: any\n if (type) {\n const curInterpolation = animationsState.current.get(value)\n interpolateArgs = getInterpolated(\n curInterpolation?.current ?? value['_value'],\n val,\n type\n )\n animationsState.current!.set(value, {\n interopolation: value.interpolate(interpolateArgs),\n current: val,\n })\n }\n\n if (value) {\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 value.stopAnimation()\n\n function getAnimation() {\n return Animated[animationConfig.type || 'spring'](value, {\n toValue: val,\n useNativeDriver: !isWeb,\n ...animationConfig,\n })\n }\n\n const animation = animationConfig.delay\n ? Animated.sequence([\n Animated.delay(animationConfig.delay),\n getAnimation(),\n ])\n : getAnimation()\n\n animation.start(({ finished }) => {\n if (finished) {\n resolve()\n }\n })\n })\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n // eslint-disable-next-line no-console\n // prettier-ignore\n console.log(' \uD83D\uDCA0 animate',key,`from ${value['_value']} to`,valIn,`(${val})`,'type',type,'interpolate',interpolateArgs)\n }\n }\n return value\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, args)\n\n useIsomorphicLayoutEffect(() => {\n res.runners.forEach((r) => r())\n let cancel = false\n Promise.all(res.completions).then(() => {\n if (cancel) return\n onDidAnimate?.()\n if (isExiting) {\n sendExitComplete?.()\n }\n })\n return () => {\n cancel = true\n }\n }, args)\n\n if (process.env.NODE_ENV === 'development') {\n if (props['debug']) {\n // eslint-disable-next-line no-console\n console.log(`Returning animated`, res)\n }\n }\n\n return res\n },\n }\n}\n\nfunction getInterpolated(current: number, next: number, postfix = 'deg') {\n if (next === current) {\n current = next - 0.000000001\n }\n const inputRange = [current, next]\n const outputRange = [`${current}${postfix}`, `${next}${postfix}`]\n if (next < current) {\n inputRange.reverse()\n outputRange.reverse()\n }\n return {\n inputRange,\n outputRange,\n }\n}\n\nfunction getAnimationConfig(\n key: string,\n animations: AnimationsConfig,\n animation?: AnimationProp\n): AnimationConfig {\n if (typeof animation === 'string') {\n return animations[animation]\n }\n let type = ''\n let extraConf: any\n const shortKey = transformShorthands[key]\n if (Array.isArray(animation)) {\n type = animation[0] as string\n const conf = animation[1]?.[key] ?? animation[1]?.[shortKey]\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] ?? animation?.[shortKey]\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\n// try both combos\nconst transformShorthands = {\n x: 'translateX',\n y: 'translateY',\n translateX: 'x',\n translateY: 'y',\n}\n\nfunction getValue(input: number | string) {\n if (typeof input !== 'string') {\n return [input] as const\n }\n const [_, number, after] = input.match(/([-0-9]+)(deg|%|px)/) ?? []\n return [+number, after] as const\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["_a", "res"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/animations-react-native",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.6",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"sideEffects": [
|
|
6
6
|
"./polyfill.js"
|
|
@@ -15,11 +15,11 @@
|
|
|
15
15
|
"dist"
|
|
16
16
|
],
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@tamagui/use-presence": "1.9.
|
|
19
|
-
"@tamagui/web": "1.9.
|
|
18
|
+
"@tamagui/use-presence": "1.9.6",
|
|
19
|
+
"@tamagui/web": "1.9.6"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"@tamagui/build": "1.9.
|
|
22
|
+
"@tamagui/build": "1.9.6",
|
|
23
23
|
"react": "^18.2.0",
|
|
24
24
|
"react-native": "^0.71.4"
|
|
25
25
|
},
|
package/src/createAnimations.tsx
CHANGED
|
@@ -144,21 +144,16 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
144
144
|
const mergedStyles = style
|
|
145
145
|
const animateStyles = useSafeRef<Record<string, Animated.Value>>({})
|
|
146
146
|
const animatedTranforms = useSafeRef<{ [key: string]: Animated.Value }[]>([])
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
WeakMap<
|
|
147
|
+
const animationsState = useSafeRef(
|
|
148
|
+
new WeakMap<
|
|
150
149
|
Animated.Value,
|
|
151
150
|
{
|
|
152
151
|
interopolation: Animated.AnimatedInterpolation<any>
|
|
153
152
|
current?: number | undefined
|
|
154
153
|
}
|
|
155
|
-
>
|
|
156
|
-
|
|
157
|
-
if (!animationsState.current) {
|
|
158
|
-
animationsState.current = new WeakMap()
|
|
159
|
-
}
|
|
154
|
+
>()
|
|
155
|
+
)
|
|
160
156
|
|
|
161
|
-
// const args = [JSON.stringify(mergedStyles)]
|
|
162
157
|
const args = [
|
|
163
158
|
JSON.stringify(mergedStyles),
|
|
164
159
|
JSON.stringify(state),
|
|
@@ -257,11 +252,23 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
257
252
|
|
|
258
253
|
runners.push(() => {
|
|
259
254
|
value.stopAnimation()
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
255
|
+
|
|
256
|
+
function getAnimation() {
|
|
257
|
+
return Animated[animationConfig.type || 'spring'](value, {
|
|
258
|
+
toValue: val,
|
|
259
|
+
useNativeDriver: !isWeb,
|
|
260
|
+
...animationConfig,
|
|
261
|
+
})
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
const animation = animationConfig.delay
|
|
265
|
+
? Animated.sequence([
|
|
266
|
+
Animated.delay(animationConfig.delay),
|
|
267
|
+
getAnimation(),
|
|
268
|
+
])
|
|
269
|
+
: getAnimation()
|
|
270
|
+
|
|
271
|
+
animation.start(({ finished }) => {
|
|
265
272
|
if (finished) {
|
|
266
273
|
resolve()
|
|
267
274
|
}
|
|
@@ -334,9 +341,10 @@ function getAnimationConfig(
|
|
|
334
341
|
}
|
|
335
342
|
let type = ''
|
|
336
343
|
let extraConf: any
|
|
344
|
+
const shortKey = transformShorthands[key]
|
|
337
345
|
if (Array.isArray(animation)) {
|
|
338
346
|
type = animation[0] as string
|
|
339
|
-
const conf = animation[1]
|
|
347
|
+
const conf = animation[1]?.[key] ?? animation[1]?.[shortKey]
|
|
340
348
|
if (conf) {
|
|
341
349
|
if (typeof conf === 'string') {
|
|
342
350
|
type = conf
|
|
@@ -346,7 +354,7 @@ function getAnimationConfig(
|
|
|
346
354
|
}
|
|
347
355
|
}
|
|
348
356
|
} else {
|
|
349
|
-
const val = animation?.[key]
|
|
357
|
+
const val = animation?.[key] ?? animation?.[shortKey]
|
|
350
358
|
type = val?.type
|
|
351
359
|
extraConf = val
|
|
352
360
|
}
|
|
@@ -360,6 +368,14 @@ function getAnimationConfig(
|
|
|
360
368
|
}
|
|
361
369
|
}
|
|
362
370
|
|
|
371
|
+
// try both combos
|
|
372
|
+
const transformShorthands = {
|
|
373
|
+
x: 'translateX',
|
|
374
|
+
y: 'translateY',
|
|
375
|
+
translateX: 'x',
|
|
376
|
+
translateY: 'y',
|
|
377
|
+
}
|
|
378
|
+
|
|
363
379
|
function getValue(input: number | string) {
|
|
364
380
|
if (typeof input !== 'string') {
|
|
365
381
|
return [input] as const
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,eAAe,EAEf,uBAAuB,EAKxB,MAAM,cAAc,CAAA;AAErB,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,IAAI;KAC7C,GAAG,IAAI,MAAM,CAAC,GAAG,eAAe;CAClC,CAAA;AAED,KAAK,YAAY,GAAG;IAAE,IAAI,CAAC,EAAE,QAAQ,CAAA;CAAE,GAAG,OAAO,CAC/C,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;AAED,KAAK,YAAY,GAAG;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAC,CAAA;AAEhF,KAAK,eAAe,GAAG,YAAY,GAAG,YAAY,CAAA;AAOlD,eAAO,MAAM,YAAY,gEAAgB,CAAA;AACzC,eAAO,MAAM,YAAY,gEAAgB,CAAA;AAEzC,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,MAAM,GACd,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAoDzC;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC9C,EAAE,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,QAY9B;AAED,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,EACtF,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,OAG9B;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,gBAAgB,EACzD,UAAU,EAAE,CAAC,GACZ,eAAe,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,eAAe,EAEf,uBAAuB,EAKxB,MAAM,cAAc,CAAA;AAErB,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,IAAI;KAC7C,GAAG,IAAI,MAAM,CAAC,GAAG,eAAe;CAClC,CAAA;AAED,KAAK,YAAY,GAAG;IAAE,IAAI,CAAC,EAAE,QAAQ,CAAA;CAAE,GAAG,OAAO,CAC/C,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;AAED,KAAK,YAAY,GAAG;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAC,CAAA;AAEhF,KAAK,eAAe,GAAG,YAAY,GAAG,YAAY,CAAA;AAOlD,eAAO,MAAM,YAAY,gEAAgB,CAAA;AACzC,eAAO,MAAM,YAAY,gEAAgB,CAAA;AAEzC,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,MAAM,GACd,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAoDzC;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC9C,EAAE,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,QAY9B;AAED,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,EACtF,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,OAG9B;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,gBAAgB,EACzD,UAAU,EAAE,CAAC,GACZ,eAAe,CAAC,CAAC,CAAC,CA4LpB"}
|