@tamagui/animations-moti 1.61.2 → 1.62.0
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 +35 -78
- package/dist/cjs/createAnimations.js.map +1 -1
- package/dist/cjs/createAnimations.native.js +119 -0
- package/dist/cjs/createAnimations.native.js.map +6 -0
- package/dist/cjs/index.js +4 -8
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/index.native.js +21 -0
- package/dist/cjs/index.native.js.map +6 -0
- package/dist/cjs/polyfill.js +1 -4
- package/dist/cjs/polyfill.js.map +1 -1
- package/dist/cjs/polyfill.native.js +3 -0
- package/dist/cjs/polyfill.native.js.map +6 -0
- package/dist/esm/createAnimations.js +27 -61
- package/dist/esm/createAnimations.js.map +1 -1
- package/dist/esm/polyfill.js +1 -3
- package/dist/esm/polyfill.js.map +1 -1
- package/package.json +4 -4
|
@@ -1,20 +1,15 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
var __create = Object.create;
|
|
3
2
|
var __defProp = Object.defineProperty;
|
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
6
|
var __export = (target, all) => {
|
|
9
7
|
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable:
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
9
|
+
}, __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
14
11
|
for (let key of __getOwnPropNames(from))
|
|
15
|
-
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
12
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
13
|
return to;
|
|
19
14
|
};
|
|
20
15
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
@@ -22,26 +17,22 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
22
17
|
// file that has been converted to a CommonJS file using a Babel-
|
|
23
18
|
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
19
|
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable:
|
|
20
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
|
|
26
21
|
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
|
+
)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
29
23
|
var createAnimations_exports = {};
|
|
30
24
|
__export(createAnimations_exports, {
|
|
31
25
|
createAnimations: () => createAnimations
|
|
32
26
|
});
|
|
33
27
|
module.exports = __toCommonJS(createAnimations_exports);
|
|
34
|
-
var import_use_presence = require("@tamagui/use-presence");
|
|
35
|
-
var import_author = require("moti/author");
|
|
36
|
-
var import_react = require("react");
|
|
37
|
-
var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
|
|
28
|
+
var import_use_presence = require("@tamagui/use-presence"), import_author = require("moti/author"), import_react = require("react"), import_react_native_reanimated = __toESM(require("react-native-reanimated"));
|
|
38
29
|
function createAnimations(animations) {
|
|
39
30
|
return {
|
|
40
31
|
View: import_react_native_reanimated.default.View,
|
|
41
32
|
Text: import_react_native_reanimated.default.Text,
|
|
42
|
-
isReactNative:
|
|
43
|
-
keepStyleSSR:
|
|
44
|
-
supportsCSSVars:
|
|
33
|
+
isReactNative: !0,
|
|
34
|
+
keepStyleSSR: !0,
|
|
35
|
+
supportsCSSVars: !0,
|
|
45
36
|
animations,
|
|
46
37
|
usePresence: import_use_presence.usePresence,
|
|
47
38
|
useAnimatedNumber(initial) {
|
|
@@ -58,13 +49,7 @@ function createAnimations(animations) {
|
|
|
58
49
|
},
|
|
59
50
|
setValue(next, config = { type: "spring" }) {
|
|
60
51
|
"worklet";
|
|
61
|
-
|
|
62
|
-
sharedValue.value = next;
|
|
63
|
-
} else if (config.type === "spring") {
|
|
64
|
-
sharedValue.value = (0, import_react_native_reanimated.withSpring)(next, config);
|
|
65
|
-
} else {
|
|
66
|
-
sharedValue.value = (0, import_react_native_reanimated.withTiming)(next, config);
|
|
67
|
-
}
|
|
52
|
+
config.type === "direct" ? sharedValue.value = next : config.type === "spring" ? sharedValue.value = (0, import_react_native_reanimated.withSpring)(next, config) : sharedValue.value = (0, import_react_native_reanimated.withTiming)(next, config);
|
|
68
53
|
},
|
|
69
54
|
stop() {
|
|
70
55
|
"worklet";
|
|
@@ -77,13 +62,9 @@ function createAnimations(animations) {
|
|
|
77
62
|
useAnimatedNumberReaction({ value }, onValue) {
|
|
78
63
|
const instance = value.getInstance();
|
|
79
64
|
return (0, import_react_native_reanimated.useAnimatedReaction)(
|
|
80
|
-
() =>
|
|
81
|
-
return instance.value;
|
|
82
|
-
},
|
|
65
|
+
() => instance.value,
|
|
83
66
|
(next, prev) => {
|
|
84
|
-
|
|
85
|
-
(0, import_react_native_reanimated.runOnJS)(onValue)(next);
|
|
86
|
-
}
|
|
67
|
+
prev !== next && (0, import_react_native_reanimated.runOnJS)(onValue)(next);
|
|
87
68
|
},
|
|
88
69
|
// dependency array is very important here
|
|
89
70
|
[onValue, instance]
|
|
@@ -93,62 +74,38 @@ function createAnimations(animations) {
|
|
|
93
74
|
* `getStyle` must be a worklet
|
|
94
75
|
*/
|
|
95
76
|
useAnimatedNumberStyle(val, getStyle) {
|
|
96
|
-
const instance = val.getInstance();
|
|
97
|
-
|
|
98
|
-
return instance.value;
|
|
99
|
-
}, [instance, getStyle]);
|
|
100
|
-
return (0, import_react_native_reanimated.useAnimatedStyle)(() => {
|
|
101
|
-
return getStyle(derivedValue.value);
|
|
102
|
-
}, [val, getStyle, derivedValue, instance]);
|
|
77
|
+
const instance = val.getInstance(), derivedValue = (0, import_react_native_reanimated.useDerivedValue)(() => instance.value, [instance, getStyle]);
|
|
78
|
+
return (0, import_react_native_reanimated.useAnimatedStyle)(() => getStyle(derivedValue.value), [val, getStyle, derivedValue, instance]);
|
|
103
79
|
},
|
|
104
80
|
useAnimations: ({ props, presence, style, onDidAnimate }) => {
|
|
105
81
|
const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation;
|
|
106
|
-
let animate;
|
|
107
|
-
let dontAnimate;
|
|
82
|
+
let animate, dontAnimate;
|
|
108
83
|
const animateOnly = props.animateOnly || ["transform", "opacity"];
|
|
109
84
|
if (animateOnly) {
|
|
110
|
-
animate = {};
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
} else {
|
|
119
|
-
animate = { ...style };
|
|
120
|
-
dontAnimate = {};
|
|
121
|
-
}
|
|
122
|
-
const animateStr = JSON.stringify(animate);
|
|
123
|
-
const styles = (0, import_react.useMemo)(() => JSON.parse(animateStr), [animateStr]);
|
|
124
|
-
const isExiting = Boolean(presence == null ? void 0 : presence[1]);
|
|
125
|
-
const sendExitComplete = presence == null ? void 0 : presence[1];
|
|
126
|
-
const transition = animations[animationKey];
|
|
127
|
-
const onDidAnimateCombined = (0, import_react.useCallback)(() => {
|
|
128
|
-
onDidAnimate == null ? void 0 : onDidAnimate();
|
|
129
|
-
sendExitComplete == null ? void 0 : sendExitComplete();
|
|
130
|
-
}, []);
|
|
131
|
-
const motiProps = {
|
|
85
|
+
animate = {}, dontAnimate = { ...style };
|
|
86
|
+
for (const key of animateOnly)
|
|
87
|
+
key in style && (animate[key] = style[key], delete dontAnimate[key]);
|
|
88
|
+
} else
|
|
89
|
+
animate = { ...style }, dontAnimate = {};
|
|
90
|
+
const animateStr = JSON.stringify(animate), styles = (0, import_react.useMemo)(() => JSON.parse(animateStr), [animateStr]), isExiting = !!presence?.[1], sendExitComplete = presence?.[1], transition = animations[animationKey], onDidAnimateCombined = (0, import_react.useCallback)(() => {
|
|
91
|
+
onDidAnimate?.(), sendExitComplete?.();
|
|
92
|
+
}, []), motiProps = {
|
|
132
93
|
animate: isExiting ? void 0 : styles,
|
|
133
94
|
transition,
|
|
134
95
|
onDidAnimate: onDidAnimateCombined,
|
|
135
96
|
usePresenceValue: presence,
|
|
136
97
|
presenceContext: (0, import_react.useContext)(import_use_presence.PresenceContext),
|
|
137
98
|
exit: isExiting ? styles : void 0
|
|
138
|
-
};
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
animateStr
|
|
149
|
-
});
|
|
150
|
-
}
|
|
151
|
-
return {
|
|
99
|
+
}, moti = (0, import_author.useMotify)(motiProps);
|
|
100
|
+
return process.env.NODE_ENV === "development" && props.debug === "verbose" && console.log("Moti animation:", {
|
|
101
|
+
animate,
|
|
102
|
+
transition,
|
|
103
|
+
styles,
|
|
104
|
+
moti,
|
|
105
|
+
dontAnimate,
|
|
106
|
+
isExiting,
|
|
107
|
+
animateStr
|
|
108
|
+
}), {
|
|
152
109
|
style: [dontAnimate, moti.style]
|
|
153
110
|
};
|
|
154
111
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"mappings": "
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["Animated"]
|
|
6
6
|
}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
10
|
+
}, __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
return to;
|
|
15
|
+
};
|
|
16
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
17
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
18
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
19
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
20
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
|
|
22
|
+
mod
|
|
23
|
+
)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
24
|
+
var createAnimations_exports = {};
|
|
25
|
+
__export(createAnimations_exports, {
|
|
26
|
+
createAnimations: () => createAnimations
|
|
27
|
+
});
|
|
28
|
+
module.exports = __toCommonJS(createAnimations_exports);
|
|
29
|
+
var import_use_presence = require("@tamagui/use-presence"), import_author = require("moti/author"), import_react = require("react"), import_react_native_reanimated = __toESM(require("react-native-reanimated"));
|
|
30
|
+
function createAnimations(animations) {
|
|
31
|
+
return {
|
|
32
|
+
View: import_react_native_reanimated.default.View,
|
|
33
|
+
Text: import_react_native_reanimated.default.Text,
|
|
34
|
+
isReactNative: !0,
|
|
35
|
+
keepStyleSSR: !0,
|
|
36
|
+
supportsCSSVars: !0,
|
|
37
|
+
animations,
|
|
38
|
+
usePresence: import_use_presence.usePresence,
|
|
39
|
+
useAnimatedNumber(initial) {
|
|
40
|
+
const sharedValue = (0, import_react_native_reanimated.useSharedValue)(initial);
|
|
41
|
+
return (0, import_react.useMemo)(
|
|
42
|
+
() => ({
|
|
43
|
+
getInstance() {
|
|
44
|
+
"worklet";
|
|
45
|
+
return sharedValue;
|
|
46
|
+
},
|
|
47
|
+
getValue() {
|
|
48
|
+
"worklet";
|
|
49
|
+
return sharedValue.value;
|
|
50
|
+
},
|
|
51
|
+
setValue(next, config = { type: "spring" }) {
|
|
52
|
+
"worklet";
|
|
53
|
+
config.type === "direct" ? sharedValue.value = next : config.type === "spring" ? sharedValue.value = (0, import_react_native_reanimated.withSpring)(next, config) : sharedValue.value = (0, import_react_native_reanimated.withTiming)(next, config);
|
|
54
|
+
},
|
|
55
|
+
stop() {
|
|
56
|
+
"worklet";
|
|
57
|
+
(0, import_react_native_reanimated.cancelAnimation)(sharedValue);
|
|
58
|
+
}
|
|
59
|
+
}),
|
|
60
|
+
[sharedValue]
|
|
61
|
+
);
|
|
62
|
+
},
|
|
63
|
+
useAnimatedNumberReaction({ value }, onValue) {
|
|
64
|
+
const instance = value.getInstance();
|
|
65
|
+
return (0, import_react_native_reanimated.useAnimatedReaction)(
|
|
66
|
+
() => instance.value,
|
|
67
|
+
(next, prev) => {
|
|
68
|
+
prev !== next && (0, import_react_native_reanimated.runOnJS)(onValue)(next);
|
|
69
|
+
},
|
|
70
|
+
// dependency array is very important here
|
|
71
|
+
[onValue, instance]
|
|
72
|
+
);
|
|
73
|
+
},
|
|
74
|
+
/**
|
|
75
|
+
* `getStyle` must be a worklet
|
|
76
|
+
*/
|
|
77
|
+
useAnimatedNumberStyle(val, getStyle) {
|
|
78
|
+
const instance = val.getInstance(), derivedValue = (0, import_react_native_reanimated.useDerivedValue)(() => instance.value, [instance, getStyle]);
|
|
79
|
+
return (0, import_react_native_reanimated.useAnimatedStyle)(() => getStyle(derivedValue.value), [val, getStyle, derivedValue, instance]);
|
|
80
|
+
},
|
|
81
|
+
useAnimations: ({ props, presence, style, onDidAnimate }) => {
|
|
82
|
+
const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation;
|
|
83
|
+
let animate, dontAnimate;
|
|
84
|
+
const animateOnly = props.animateOnly || ["transform", "opacity"];
|
|
85
|
+
if (animateOnly) {
|
|
86
|
+
animate = {}, dontAnimate = { ...style };
|
|
87
|
+
for (const key of animateOnly)
|
|
88
|
+
key in style && (animate[key] = style[key], delete dontAnimate[key]);
|
|
89
|
+
} else
|
|
90
|
+
animate = { ...style }, dontAnimate = {};
|
|
91
|
+
const animateStr = JSON.stringify(animate), styles = (0, import_react.useMemo)(() => JSON.parse(animateStr), [animateStr]), isExiting = !!presence?.[1], sendExitComplete = presence?.[1], transition = animations[animationKey], onDidAnimateCombined = (0, import_react.useCallback)(() => {
|
|
92
|
+
onDidAnimate?.(), sendExitComplete?.();
|
|
93
|
+
}, []), motiProps = {
|
|
94
|
+
animate: isExiting ? void 0 : styles,
|
|
95
|
+
transition,
|
|
96
|
+
onDidAnimate: onDidAnimateCombined,
|
|
97
|
+
usePresenceValue: presence,
|
|
98
|
+
presenceContext: (0, import_react.useContext)(import_use_presence.PresenceContext),
|
|
99
|
+
exit: isExiting ? styles : void 0
|
|
100
|
+
}, moti = (0, import_author.useMotify)(motiProps);
|
|
101
|
+
return process.env.NODE_ENV === "development" && props.debug === "verbose" && console.log("Moti animation:", {
|
|
102
|
+
animate,
|
|
103
|
+
transition,
|
|
104
|
+
styles,
|
|
105
|
+
moti,
|
|
106
|
+
dontAnimate,
|
|
107
|
+
isExiting,
|
|
108
|
+
animateStr
|
|
109
|
+
}), {
|
|
110
|
+
style: [dontAnimate, moti.style]
|
|
111
|
+
};
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
}
|
|
115
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
116
|
+
0 && (module.exports = {
|
|
117
|
+
createAnimations
|
|
118
|
+
});
|
|
119
|
+
//# sourceMappingURL=createAnimations.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
+
"mappings": "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",
|
|
5
|
+
"names": ["Animated"]
|
|
6
|
+
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,18 +1,14 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
var __defProp = Object.defineProperty;
|
|
3
2
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
5
|
var __copyProps = (to, from, except, desc) => {
|
|
7
|
-
if (from && typeof from
|
|
6
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
8
7
|
for (let key of __getOwnPropNames(from))
|
|
9
|
-
|
|
10
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
-
}
|
|
8
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
12
9
|
return to;
|
|
13
|
-
};
|
|
14
|
-
var
|
|
15
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
10
|
+
}, __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
11
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
16
12
|
var src_exports = {};
|
|
17
13
|
module.exports = __toCommonJS(src_exports);
|
|
18
14
|
var import_polyfill = require("./polyfill");
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __copyProps = (to, from, except, desc) => {
|
|
7
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
8
|
+
for (let key of __getOwnPropNames(from))
|
|
9
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
10
|
+
return to;
|
|
11
|
+
}, __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
12
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
13
|
+
var src_exports = {};
|
|
14
|
+
module.exports = __toCommonJS(src_exports);
|
|
15
|
+
var import_polyfill = require("./polyfill");
|
|
16
|
+
__reExport(src_exports, require("./createAnimations"), module.exports);
|
|
17
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
18
|
+
0 && (module.exports = {
|
|
19
|
+
...require("./createAnimations")
|
|
20
|
+
});
|
|
21
|
+
//# sourceMappingURL=index.js.map
|
package/dist/cjs/polyfill.js
CHANGED
package/dist/cjs/polyfill.js.map
CHANGED
|
@@ -15,9 +15,9 @@ function createAnimations(animations) {
|
|
|
15
15
|
return {
|
|
16
16
|
View: Animated.View,
|
|
17
17
|
Text: Animated.Text,
|
|
18
|
-
isReactNative:
|
|
19
|
-
keepStyleSSR:
|
|
20
|
-
supportsCSSVars:
|
|
18
|
+
isReactNative: !0,
|
|
19
|
+
keepStyleSSR: !0,
|
|
20
|
+
supportsCSSVars: !0,
|
|
21
21
|
animations,
|
|
22
22
|
usePresence,
|
|
23
23
|
useAnimatedNumber(initial) {
|
|
@@ -34,13 +34,7 @@ function createAnimations(animations) {
|
|
|
34
34
|
},
|
|
35
35
|
setValue(next, config = { type: "spring" }) {
|
|
36
36
|
"worklet";
|
|
37
|
-
|
|
38
|
-
sharedValue.value = next;
|
|
39
|
-
} else if (config.type === "spring") {
|
|
40
|
-
sharedValue.value = withSpring(next, config);
|
|
41
|
-
} else {
|
|
42
|
-
sharedValue.value = withTiming(next, config);
|
|
43
|
-
}
|
|
37
|
+
config.type === "direct" ? sharedValue.value = next : config.type === "spring" ? sharedValue.value = withSpring(next, config) : sharedValue.value = withTiming(next, config);
|
|
44
38
|
},
|
|
45
39
|
stop() {
|
|
46
40
|
"worklet";
|
|
@@ -53,13 +47,9 @@ function createAnimations(animations) {
|
|
|
53
47
|
useAnimatedNumberReaction({ value }, onValue) {
|
|
54
48
|
const instance = value.getInstance();
|
|
55
49
|
return useAnimatedReaction(
|
|
56
|
-
() =>
|
|
57
|
-
return instance.value;
|
|
58
|
-
},
|
|
50
|
+
() => instance.value,
|
|
59
51
|
(next, prev) => {
|
|
60
|
-
|
|
61
|
-
runOnJS(onValue)(next);
|
|
62
|
-
}
|
|
52
|
+
prev !== next && runOnJS(onValue)(next);
|
|
63
53
|
},
|
|
64
54
|
// dependency array is very important here
|
|
65
55
|
[onValue, instance]
|
|
@@ -69,62 +59,38 @@ function createAnimations(animations) {
|
|
|
69
59
|
* `getStyle` must be a worklet
|
|
70
60
|
*/
|
|
71
61
|
useAnimatedNumberStyle(val, getStyle) {
|
|
72
|
-
const instance = val.getInstance();
|
|
73
|
-
|
|
74
|
-
return instance.value;
|
|
75
|
-
}, [instance, getStyle]);
|
|
76
|
-
return useAnimatedStyle(() => {
|
|
77
|
-
return getStyle(derivedValue.value);
|
|
78
|
-
}, [val, getStyle, derivedValue, instance]);
|
|
62
|
+
const instance = val.getInstance(), derivedValue = useDerivedValue(() => instance.value, [instance, getStyle]);
|
|
63
|
+
return useAnimatedStyle(() => getStyle(derivedValue.value), [val, getStyle, derivedValue, instance]);
|
|
79
64
|
},
|
|
80
65
|
useAnimations: ({ props, presence, style, onDidAnimate }) => {
|
|
81
66
|
const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation;
|
|
82
|
-
let animate;
|
|
83
|
-
let dontAnimate;
|
|
67
|
+
let animate, dontAnimate;
|
|
84
68
|
const animateOnly = props.animateOnly || ["transform", "opacity"];
|
|
85
69
|
if (animateOnly) {
|
|
86
|
-
animate = {};
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
} else {
|
|
95
|
-
animate = { ...style };
|
|
96
|
-
dontAnimate = {};
|
|
97
|
-
}
|
|
98
|
-
const animateStr = JSON.stringify(animate);
|
|
99
|
-
const styles = useMemo(() => JSON.parse(animateStr), [animateStr]);
|
|
100
|
-
const isExiting = Boolean(presence == null ? void 0 : presence[1]);
|
|
101
|
-
const sendExitComplete = presence == null ? void 0 : presence[1];
|
|
102
|
-
const transition = animations[animationKey];
|
|
103
|
-
const onDidAnimateCombined = useCallback(() => {
|
|
104
|
-
onDidAnimate == null ? void 0 : onDidAnimate();
|
|
105
|
-
sendExitComplete == null ? void 0 : sendExitComplete();
|
|
106
|
-
}, []);
|
|
107
|
-
const motiProps = {
|
|
70
|
+
animate = {}, dontAnimate = { ...style };
|
|
71
|
+
for (const key of animateOnly)
|
|
72
|
+
key in style && (animate[key] = style[key], delete dontAnimate[key]);
|
|
73
|
+
} else
|
|
74
|
+
animate = { ...style }, dontAnimate = {};
|
|
75
|
+
const animateStr = JSON.stringify(animate), styles = useMemo(() => JSON.parse(animateStr), [animateStr]), isExiting = !!presence?.[1], sendExitComplete = presence?.[1], transition = animations[animationKey], onDidAnimateCombined = useCallback(() => {
|
|
76
|
+
onDidAnimate?.(), sendExitComplete?.();
|
|
77
|
+
}, []), motiProps = {
|
|
108
78
|
animate: isExiting ? void 0 : styles,
|
|
109
79
|
transition,
|
|
110
80
|
onDidAnimate: onDidAnimateCombined,
|
|
111
81
|
usePresenceValue: presence,
|
|
112
82
|
presenceContext: useContext(PresenceContext),
|
|
113
83
|
exit: isExiting ? styles : void 0
|
|
114
|
-
};
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
animateStr
|
|
125
|
-
});
|
|
126
|
-
}
|
|
127
|
-
return {
|
|
84
|
+
}, moti = useMotify(motiProps);
|
|
85
|
+
return process.env.NODE_ENV === "development" && props.debug === "verbose" && console.log("Moti animation:", {
|
|
86
|
+
animate,
|
|
87
|
+
transition,
|
|
88
|
+
styles,
|
|
89
|
+
moti,
|
|
90
|
+
dontAnimate,
|
|
91
|
+
isExiting,
|
|
92
|
+
animateStr
|
|
93
|
+
}), {
|
|
128
94
|
style: [dontAnimate, moti.style]
|
|
129
95
|
};
|
|
130
96
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,iBAAiB,mBAAmB;AAG7C,SAAS,iBAAiB;AAC1B,SAAS,aAAa,YAAY,eAAe;AACjD,OAAO;AAAA,EAEL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIA,SAAS,iBACd,YACoB;AACpB,SAAO;AAAA,IACL,MAAM,SAAS;AAAA,IACf,MAAM,SAAS;AAAA,IACf,eAAe;AAAA,IACf,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IAEA,kBAAkB,SAA4D;AAC5E,YAAM,cAAc,eAAe,OAAO;AAE1C,aAAO;AAAA,QACL,OAAO;AAAA,UACL,cAAc;AACZ;AACA,mBAAO;AAAA,UACT;AAAA,UACA,WAAW;AACT;AACA,mBAAO,YAAY;AAAA,UACrB;AAAA,UACA,SAAS,MAAM,SAAS,EAAE,MAAM,SAAS,GAAG;AAC1C;AACA,
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
package/dist/esm/polyfill.js
CHANGED
package/dist/esm/polyfill.js.map
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/animations-moti",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.62.0",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"types": "./types/index.d.ts",
|
|
@@ -12,12 +12,12 @@
|
|
|
12
12
|
"dist"
|
|
13
13
|
],
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@tamagui/use-presence": "1.
|
|
16
|
-
"@tamagui/web": "1.
|
|
15
|
+
"@tamagui/use-presence": "1.62.0",
|
|
16
|
+
"@tamagui/web": "1.62.0",
|
|
17
17
|
"moti": "^0.25.3"
|
|
18
18
|
},
|
|
19
19
|
"devDependencies": {
|
|
20
|
-
"@tamagui/build": "1.
|
|
20
|
+
"@tamagui/build": "1.62.0",
|
|
21
21
|
"react-native-reanimated": "^3.3.0"
|
|
22
22
|
},
|
|
23
23
|
"scripts": {
|