@tamagui/animations-motion 1.0.1-beta.151 → 1.0.1-beta.152
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 +3 -1
- package/dist/cjs/createAnimations.js.map +2 -2
- package/dist/esm/createAnimations.js +3 -1
- package/dist/esm/createAnimations.js.map +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/jsx/createAnimations.js +3 -1
- package/dist/jsx/createAnimations.js.map +2 -2
- package/dist/jsx/index.js.map +1 -1
- package/package.json +3 -3
- package/src/createAnimations.tsx +3 -1
- package/types/createAnimations.d.ts +2 -2
|
@@ -32,7 +32,9 @@ var import_react_native = require("react-native");
|
|
|
32
32
|
const AnimatedView = import_react_native.View;
|
|
33
33
|
const AnimatedText = import_react_native.Text;
|
|
34
34
|
function useAnimatedNumber(initial) {
|
|
35
|
-
const state = (0, import_react.useRef)(
|
|
35
|
+
const state = (0, import_react.useRef)(
|
|
36
|
+
null
|
|
37
|
+
);
|
|
36
38
|
if (!state.current) {
|
|
37
39
|
state.current = {
|
|
38
40
|
val: initial,
|
|
@@ -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 {\n AnimatedNumberStrategy,\n AnimationDriver,\n AnimationProp,\n UniversalAnimatedNumber,\n isWeb,\n useEvent,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { AnimationControls, animate } from 'motion'\nimport { useContext, useEffect, useMemo, useRef } from 'react'\nimport { Text, View } from 'react-native'\n\nexport const AnimatedView = View\nexport const AnimatedText = Text\n\nexport function useAnimatedNumber(\n initial: number\n): UniversalAnimatedNumber<AnimationControls | null> {\n const state = useRef(\n null as any as {\n val: number\n controls: AnimationControls | null\n }\n )\n if (!state.current) {\n state.current = {\n val: initial,\n controls: null,\n }\n }\n return {\n getInstance() {\n return state.current.controls\n },\n getValue() {\n return state.current.val\n },\n stop() {\n state.current.controls?.stop()\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<any>,\n cb: (current: number) => void\n) {\n // const onChange = useEvent((current) => {\n // cb(current.value)\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<any>>(\n value: V,\n getStyle: (value: any) => any\n) {\n return getStyle(value.getInstance())\n}\n\nexport function createAnimations<A extends
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA6C;
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport {\n AnimatedNumberStrategy,\n AnimationConfigType,\n AnimationDriver,\n AnimationProp,\n UniversalAnimatedNumber,\n isWeb,\n useEvent,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { AnimationControls, animate } from 'motion'\nimport { useContext, useEffect, useMemo, useRef } from 'react'\nimport { Text, View } from 'react-native'\n\nexport const AnimatedView = View\nexport const AnimatedText = Text\n\nexport function useAnimatedNumber(\n initial: number\n): UniversalAnimatedNumber<AnimationControls | null> {\n const state = useRef(\n null as any as {\n val: number\n controls: AnimationControls | null\n }\n )\n if (!state.current) {\n state.current = {\n val: initial,\n controls: null,\n }\n }\n return {\n getInstance() {\n return state.current.controls\n },\n getValue() {\n return state.current.val\n },\n stop() {\n state.current.controls?.stop()\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<any>,\n cb: (current: number) => void\n) {\n // const onChange = useEvent((current) => {\n // cb(current.value)\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<any>>(\n value: V,\n getStyle: (value: any) => any\n) {\n return getStyle(value.getInstance())\n}\n\n// @ts-ignore\nexport function createAnimations<A extends AnimationConfigType>(animations: A): AnimationDriver<A> {\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n useAnimations: (props, helpers) => {\n const { onDidAnimate, delay, getStyle, state } = helpers\n const [isPresent, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n\n const 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 args = [\n JSON.stringify(all),\n state.mounted,\n state.hover,\n state.press,\n state.pressIn,\n state.focus,\n delay,\n isPresent,\n onDidAnimate,\n presence?.exitVariant,\n presence?.enterVariant,\n ]\n\n // return useMemo(() => {\n // return {\n // style: [nonAnimatedStyle, animatedStyle],\n // }\n // // eslint-disable-next-line react-hooks/exhaustive-deps\n // }, args)\n return {}\n },\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA6C;AAY7C,mBAAuD;AACvD,0BAA2B;AAEpB,MAAM,eAAe;AACrB,MAAM,eAAe;AAErB,SAAS,kBACd,SACmD;AACnD,QAAM,YAAQ;AAAA,IACZ;AAAA,EAIF;AACA,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,KAAK;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,EACF;AACA,SAAO;AAAA,IACL,cAAc;AACZ,aAAO,MAAM,QAAQ;AAAA,IACvB;AAAA,IACA,WAAW;AACT,aAAO,MAAM,QAAQ;AAAA,IACvB;AAAA,IACA,OAAO;AAxCX;AAyCM,kBAAM,QAAQ,aAAd,mBAAwB;AAAA,IAC1B;AAAA,IACA,SAAS,MAAc,EAAE,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,GAAG;AAAA,IAuBjE;AAAA,EACF;AACF;AAEO,SAAS,0BACd,OACA,IACA;AAUF;AAEO,SAAS,uBACd,OACA,UACA;AACA,SAAO,SAAS,MAAM,YAAY,CAAC;AACrC;AAGO,SAAS,iBAAgD,YAAmC;AACjG,eAAa,iBAAiB;AAC9B,eAAa,iBAAiB;AAE9B,SAAO;AAAA,IACL,cAAc;AAAA,IACd;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,CAAC,OAAO,YAAY;AACjC,YAAM,EAAE,cAAc,OAAO,UAAU,MAAM,IAAI;AACjD,YAAM,CAAC,WAAW,gBAAgB,QAAI,qCAAY;AAClD,YAAM,eAAW,yBAAW,uCAAe;AAE3C,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,OAAO;AAAA,QACX,KAAK,UAAU,GAAG;AAAA,QAClB,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,qCAAU;AAAA,QACV,qCAAU;AAAA,MACZ;AAQA,aAAO,CAAC;AAAA,IACV;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,7 +4,9 @@ import { Text, View } from "react-native";
|
|
|
4
4
|
const AnimatedView = View;
|
|
5
5
|
const AnimatedText = Text;
|
|
6
6
|
function useAnimatedNumber(initial) {
|
|
7
|
-
const state = useRef(
|
|
7
|
+
const state = useRef(
|
|
8
|
+
null
|
|
9
|
+
);
|
|
8
10
|
if (!state.current) {
|
|
9
11
|
state.current = {
|
|
10
12
|
val: initial,
|
|
@@ -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 {\n AnimatedNumberStrategy,\n AnimationDriver,\n AnimationProp,\n UniversalAnimatedNumber,\n isWeb,\n useEvent,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { AnimationControls, animate } from 'motion'\nimport { useContext, useEffect, useMemo, useRef } from 'react'\nimport { Text, View } from 'react-native'\n\nexport const AnimatedView = View\nexport const AnimatedText = Text\n\nexport function useAnimatedNumber(\n initial: number\n): UniversalAnimatedNumber<AnimationControls | null> {\n const state = useRef(\n null as any as {\n val: number\n controls: AnimationControls | null\n }\n )\n if (!state.current) {\n state.current = {\n val: initial,\n controls: null,\n }\n }\n return {\n getInstance() {\n return state.current.controls\n },\n getValue() {\n return state.current.val\n },\n stop() {\n state.current.controls?.stop()\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<any>,\n cb: (current: number) => void\n) {\n // const onChange = useEvent((current) => {\n // cb(current.value)\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<any>>(\n value: V,\n getStyle: (value: any) => any\n) {\n return getStyle(value.getInstance())\n}\n\nexport function createAnimations<A extends
|
|
5
|
-
"mappings": "AAAA;
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport {\n AnimatedNumberStrategy,\n AnimationConfigType,\n AnimationDriver,\n AnimationProp,\n UniversalAnimatedNumber,\n isWeb,\n useEvent,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { AnimationControls, animate } from 'motion'\nimport { useContext, useEffect, useMemo, useRef } from 'react'\nimport { Text, View } from 'react-native'\n\nexport const AnimatedView = View\nexport const AnimatedText = Text\n\nexport function useAnimatedNumber(\n initial: number\n): UniversalAnimatedNumber<AnimationControls | null> {\n const state = useRef(\n null as any as {\n val: number\n controls: AnimationControls | null\n }\n )\n if (!state.current) {\n state.current = {\n val: initial,\n controls: null,\n }\n }\n return {\n getInstance() {\n return state.current.controls\n },\n getValue() {\n return state.current.val\n },\n stop() {\n state.current.controls?.stop()\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<any>,\n cb: (current: number) => void\n) {\n // const onChange = useEvent((current) => {\n // cb(current.value)\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<any>>(\n value: V,\n getStyle: (value: any) => any\n) {\n return getStyle(value.getInstance())\n}\n\n// @ts-ignore\nexport function createAnimations<A extends AnimationConfigType>(animations: A): AnimationDriver<A> {\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n useAnimations: (props, helpers) => {\n const { onDidAnimate, delay, getStyle, state } = helpers\n const [isPresent, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n\n const 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 args = [\n JSON.stringify(all),\n state.mounted,\n state.hover,\n state.press,\n state.pressIn,\n state.focus,\n delay,\n isPresent,\n onDidAnimate,\n presence?.exitVariant,\n presence?.enterVariant,\n ]\n\n // return useMemo(() => {\n // return {\n // style: [nonAnimatedStyle, animatedStyle],\n // }\n // // eslint-disable-next-line react-hooks/exhaustive-deps\n // }, args)\n return {}\n },\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,iBAAiB,mBAAmB;AAY7C,SAAS,YAAgC,cAAc;AACvD,SAAS,MAAM,YAAY;AAEpB,MAAM,eAAe;AACrB,MAAM,eAAe;AAErB,SAAS,kBACd,SACmD;AACnD,QAAM,QAAQ;AAAA,IACZ;AAAA,EAIF;AACA,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,KAAK;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,EACF;AACA,SAAO;AAAA,IACL,cAAc;AACZ,aAAO,MAAM,QAAQ;AAAA,IACvB;AAAA,IACA,WAAW;AACT,aAAO,MAAM,QAAQ;AAAA,IACvB;AAAA,IACA,OAAO;AAxCX;AAyCM,kBAAM,QAAQ,aAAd,mBAAwB;AAAA,IAC1B;AAAA,IACA,SAAS,MAAc,EAAE,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,GAAG;AAAA,IAuBjE;AAAA,EACF;AACF;AAEO,SAAS,0BACd,OACA,IACA;AAUF;AAEO,SAAS,uBACd,OACA,UACA;AACA,SAAO,SAAS,MAAM,YAAY,CAAC;AACrC;AAGO,SAAS,iBAAgD,YAAmC;AACjG,eAAa,iBAAiB;AAC9B,eAAa,iBAAiB;AAE9B,SAAO;AAAA,IACL,cAAc;AAAA,IACd;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,CAAC,OAAO,YAAY;AACjC,YAAM,EAAE,cAAc,OAAO,UAAU,MAAM,IAAI;AACjD,YAAM,CAAC,WAAW,gBAAgB,IAAI,YAAY;AAClD,YAAM,WAAW,WAAW,eAAe;AAE3C,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,OAAO;AAAA,QACX,KAAK,UAAU,GAAG;AAAA,QAClB,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,qCAAU;AAAA,QACV,qCAAU;AAAA,MACZ;AAQA,aAAO,CAAC;AAAA,IACV;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -4,7 +4,9 @@ import { Text, View } from "react-native";
|
|
|
4
4
|
const AnimatedView = View;
|
|
5
5
|
const AnimatedText = Text;
|
|
6
6
|
function useAnimatedNumber(initial) {
|
|
7
|
-
const state = useRef(
|
|
7
|
+
const state = useRef(
|
|
8
|
+
null
|
|
9
|
+
);
|
|
8
10
|
if (!state.current) {
|
|
9
11
|
state.current = {
|
|
10
12
|
val: initial,
|
|
@@ -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 {\n AnimatedNumberStrategy,\n AnimationDriver,\n AnimationProp,\n UniversalAnimatedNumber,\n isWeb,\n useEvent,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { AnimationControls, animate } from 'motion'\nimport { useContext, useEffect, useMemo, useRef } from 'react'\nimport { Text, View } from 'react-native'\n\nexport const AnimatedView = View\nexport const AnimatedText = Text\n\nexport function useAnimatedNumber(\n initial: number\n): UniversalAnimatedNumber<AnimationControls | null> {\n const state = useRef(\n null as any as {\n val: number\n controls: AnimationControls | null\n }\n )\n if (!state.current) {\n state.current = {\n val: initial,\n controls: null,\n }\n }\n return {\n getInstance() {\n return state.current.controls\n },\n getValue() {\n return state.current.val\n },\n stop() {\n state.current.controls?.stop()\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<any>,\n cb: (current: number) => void\n) {\n // const onChange = useEvent((current) => {\n // cb(current.value)\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<any>>(\n value: V,\n getStyle: (value: any) => any\n) {\n return getStyle(value.getInstance())\n}\n\nexport function createAnimations<A extends
|
|
5
|
-
"mappings": "AAAA;
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport {\n AnimatedNumberStrategy,\n AnimationConfigType,\n AnimationDriver,\n AnimationProp,\n UniversalAnimatedNumber,\n isWeb,\n useEvent,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { AnimationControls, animate } from 'motion'\nimport { useContext, useEffect, useMemo, useRef } from 'react'\nimport { Text, View } from 'react-native'\n\nexport const AnimatedView = View\nexport const AnimatedText = Text\n\nexport function useAnimatedNumber(\n initial: number\n): UniversalAnimatedNumber<AnimationControls | null> {\n const state = useRef(\n null as any as {\n val: number\n controls: AnimationControls | null\n }\n )\n if (!state.current) {\n state.current = {\n val: initial,\n controls: null,\n }\n }\n return {\n getInstance() {\n return state.current.controls\n },\n getValue() {\n return state.current.val\n },\n stop() {\n state.current.controls?.stop()\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<any>,\n cb: (current: number) => void\n) {\n // const onChange = useEvent((current) => {\n // cb(current.value)\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<any>>(\n value: V,\n getStyle: (value: any) => any\n) {\n return getStyle(value.getInstance())\n}\n\n// @ts-ignore\nexport function createAnimations<A extends AnimationConfigType>(animations: A): AnimationDriver<A> {\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimatedNumber,\n useAnimatedNumberReaction,\n useAnimatedNumberStyle,\n useAnimations: (props, helpers) => {\n const { onDidAnimate, delay, getStyle, state } = helpers\n const [isPresent, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n\n const 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 args = [\n JSON.stringify(all),\n state.mounted,\n state.hover,\n state.press,\n state.pressIn,\n state.focus,\n delay,\n isPresent,\n onDidAnimate,\n presence?.exitVariant,\n presence?.enterVariant,\n ]\n\n // return useMemo(() => {\n // return {\n // style: [nonAnimatedStyle, animatedStyle],\n // }\n // // eslint-disable-next-line react-hooks/exhaustive-deps\n // }, args)\n return {}\n },\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,iBAAiB,mBAAmB;AAY7C,SAAS,YAAgC,cAAc;AACvD,SAAS,MAAM,YAAY;AAEpB,MAAM,eAAe;AACrB,MAAM,eAAe;AAErB,SAAS,kBACd,SACmD;AACnD,QAAM,QAAQ;AAAA,IACZ;AAAA,EAIF;AACA,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,KAAK;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,EACF;AACA,SAAO;AAAA,IACL,cAAc;AACZ,aAAO,MAAM,QAAQ;AAAA,IACvB;AAAA,IACA,WAAW;AACT,aAAO,MAAM,QAAQ;AAAA,IACvB;AAAA,IACA,OAAO;AACL,YAAM,QAAQ,UAAU,KAAK;AAAA,IAC/B;AAAA,IACA,SAAS,MAAc,EAAE,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,GAAG;AAAA,IAuBjE;AAAA,EACF;AACF;AAEO,SAAS,0BACd,OACA,IACA;AAUF;AAEO,SAAS,uBACd,OACA,UACA;AACA,SAAO,SAAS,MAAM,YAAY,CAAC;AACrC;AAGO,SAAS,iBAAgD,YAAmC;AACjG,eAAa,iBAAiB;AAC9B,eAAa,iBAAiB;AAE9B,SAAO;AAAA,IACL,cAAc;AAAA,IACd;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,CAAC,OAAO,YAAY;AACjC,YAAM,EAAE,cAAc,OAAO,UAAU,MAAM,IAAI;AACjD,YAAM,CAAC,WAAW,gBAAgB,IAAI,YAAY;AAClD,YAAM,WAAW,WAAW,eAAe;AAE3C,YAAM,YAAY,cAAc;AAChC,YAAM,aAAa,CAAC,MAAM;AAE1B,YAAM,MAAM,SAAS;AAAA,QACnB;AAAA,QACA;AAAA,QACA,aAAa,UAAU;AAAA,QACvB,cAAc,UAAU;AAAA,MAC1B,CAAC;AAED,YAAM,OAAO;AAAA,QACX,KAAK,UAAU,GAAG;AAAA,QAClB,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,MACZ;AAQA,aAAO,CAAC;AAAA,IACV;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/index.js.map
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/animations-motion",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.152",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"types": "./types/index.d.ts",
|
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
"dist"
|
|
14
14
|
],
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
16
|
+
"@tamagui/core": "^1.0.1-beta.152",
|
|
17
17
|
"motion": "^10.14.0"
|
|
18
18
|
},
|
|
19
19
|
"devDependencies": {
|
|
20
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
20
|
+
"@tamagui/build": "^1.0.1-beta.152"
|
|
21
21
|
},
|
|
22
22
|
"scripts": {
|
|
23
23
|
"build": "tamagui-build",
|
package/src/createAnimations.tsx
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { PresenceContext, usePresence } from '@tamagui/animate-presence'
|
|
2
2
|
import {
|
|
3
3
|
AnimatedNumberStrategy,
|
|
4
|
+
AnimationConfigType,
|
|
4
5
|
AnimationDriver,
|
|
5
6
|
AnimationProp,
|
|
6
7
|
UniversalAnimatedNumber,
|
|
@@ -89,7 +90,8 @@ export function useAnimatedNumberStyle<V extends UniversalAnimatedNumber<any>>(
|
|
|
89
90
|
return getStyle(value.getInstance())
|
|
90
91
|
}
|
|
91
92
|
|
|
92
|
-
|
|
93
|
+
// @ts-ignore
|
|
94
|
+
export function createAnimations<A extends AnimationConfigType>(animations: A): AnimationDriver<A> {
|
|
93
95
|
AnimatedView['displayName'] = 'AnimatedView'
|
|
94
96
|
AnimatedText['displayName'] = 'AnimatedText'
|
|
95
97
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AnimationDriver, UniversalAnimatedNumber } from '@tamagui/core';
|
|
1
|
+
import { AnimationConfigType, AnimationDriver, UniversalAnimatedNumber } from '@tamagui/core';
|
|
2
2
|
import { AnimationControls } from 'motion';
|
|
3
3
|
import { Text, View } from 'react-native';
|
|
4
4
|
export declare const AnimatedView: typeof View;
|
|
@@ -6,5 +6,5 @@ export declare const AnimatedText: typeof Text;
|
|
|
6
6
|
export declare function useAnimatedNumber(initial: number): UniversalAnimatedNumber<AnimationControls | null>;
|
|
7
7
|
export declare function useAnimatedNumberReaction(value: UniversalAnimatedNumber<any>, cb: (current: number) => void): void;
|
|
8
8
|
export declare function useAnimatedNumberStyle<V extends UniversalAnimatedNumber<any>>(value: V, getStyle: (value: any) => any): any;
|
|
9
|
-
export declare function createAnimations<A extends
|
|
9
|
+
export declare function createAnimations<A extends AnimationConfigType>(animations: A): AnimationDriver<A>;
|
|
10
10
|
//# sourceMappingURL=createAnimations.d.ts.map
|