@tamagui/animations-react-native 1.13.2 → 1.13.4
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 +1 -326
- package/dist/cjs/createAnimations.js.map +2 -2
- package/dist/cjs/index.js +1 -19
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/polyfill.js +1 -4
- package/dist/cjs/polyfill.js.map +1 -1
- package/dist/esm/createAnimations.js +1 -302
- package/dist/esm/createAnimations.js.map +2 -2
- package/dist/esm/createAnimations.mjs +1 -302
- package/dist/esm/createAnimations.mjs.map +2 -2
- package/dist/esm/index.js +1 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.mjs +1 -2
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/polyfill.js +1 -3
- package/dist/esm/polyfill.js.map +1 -1
- package/dist/esm/polyfill.mjs +1 -3
- package/dist/esm/polyfill.mjs.map +1 -1
- package/package.json +4 -4
|
@@ -1,303 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
isWeb,
|
|
4
|
-
useEvent,
|
|
5
|
-
useIsomorphicLayoutEffect,
|
|
6
|
-
useSafeRef
|
|
7
|
-
} from "@tamagui/web";
|
|
8
|
-
import { useEffect, useMemo } from "react";
|
|
9
|
-
import { Animated } from "react-native";
|
|
10
|
-
const animatedStyleKey = {
|
|
11
|
-
transform: true,
|
|
12
|
-
opacity: true
|
|
13
|
-
};
|
|
14
|
-
const AnimatedView = Animated.View;
|
|
15
|
-
const AnimatedText = Animated.Text;
|
|
16
|
-
function useAnimatedNumber(initial) {
|
|
17
|
-
const state = useSafeRef(
|
|
18
|
-
null
|
|
19
|
-
);
|
|
20
|
-
if (!state.current) {
|
|
21
|
-
state.current = {
|
|
22
|
-
composite: null,
|
|
23
|
-
val: new Animated.Value(initial),
|
|
24
|
-
strategy: { type: "spring" }
|
|
25
|
-
};
|
|
26
|
-
}
|
|
27
|
-
return {
|
|
28
|
-
getInstance() {
|
|
29
|
-
return state.current.val;
|
|
30
|
-
},
|
|
31
|
-
getValue() {
|
|
32
|
-
return state.current.val["_value"];
|
|
33
|
-
},
|
|
34
|
-
stop() {
|
|
35
|
-
var _a;
|
|
36
|
-
(_a = state.current.composite) == null ? void 0 : _a.stop();
|
|
37
|
-
state.current.composite = null;
|
|
38
|
-
},
|
|
39
|
-
setValue(next, { type, ...config } = { type: "spring" }) {
|
|
40
|
-
var _a, _b;
|
|
41
|
-
const val = state.current.val;
|
|
42
|
-
if (type === "direct") {
|
|
43
|
-
val.setValue(next);
|
|
44
|
-
} else if (type === "spring") {
|
|
45
|
-
(_a = state.current.composite) == null ? void 0 : _a.stop();
|
|
46
|
-
const composite = Animated.spring(val, {
|
|
47
|
-
...config,
|
|
48
|
-
toValue: next,
|
|
49
|
-
useNativeDriver: !isWeb
|
|
50
|
-
});
|
|
51
|
-
composite.start();
|
|
52
|
-
state.current.composite = composite;
|
|
53
|
-
} else {
|
|
54
|
-
(_b = state.current.composite) == null ? void 0 : _b.stop();
|
|
55
|
-
const composite = Animated.timing(val, {
|
|
56
|
-
...config,
|
|
57
|
-
toValue: next,
|
|
58
|
-
useNativeDriver: !isWeb
|
|
59
|
-
});
|
|
60
|
-
composite.start();
|
|
61
|
-
state.current.composite = composite;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
};
|
|
65
|
-
}
|
|
66
|
-
function useAnimatedNumberReaction({
|
|
67
|
-
value
|
|
68
|
-
}, onValue) {
|
|
69
|
-
const onChange = useEvent((current) => {
|
|
70
|
-
onValue(current.value);
|
|
71
|
-
});
|
|
72
|
-
useEffect(() => {
|
|
73
|
-
const id = value.getInstance().addListener(onChange);
|
|
74
|
-
return () => {
|
|
75
|
-
value.getInstance().removeListener(id);
|
|
76
|
-
};
|
|
77
|
-
}, [value, onChange]);
|
|
78
|
-
}
|
|
79
|
-
function useAnimatedNumberStyle(value, getStyle) {
|
|
80
|
-
return getStyle(value.getInstance());
|
|
81
|
-
}
|
|
82
|
-
function createAnimations(animations) {
|
|
83
|
-
AnimatedView["displayName"] = "AnimatedView";
|
|
84
|
-
AnimatedText["displayName"] = "AnimatedText";
|
|
85
|
-
return {
|
|
86
|
-
isReactNative: true,
|
|
87
|
-
animations,
|
|
88
|
-
View: AnimatedView,
|
|
89
|
-
Text: AnimatedText,
|
|
90
|
-
useAnimatedNumber,
|
|
91
|
-
useAnimatedNumberReaction,
|
|
92
|
-
useAnimatedNumberStyle,
|
|
93
|
-
usePresence,
|
|
94
|
-
useAnimations: ({ props, onDidAnimate, style, state, presence }) => {
|
|
95
|
-
const isExiting = (presence == null ? void 0 : presence[0]) === false;
|
|
96
|
-
const sendExitComplete = presence == null ? void 0 : presence[1];
|
|
97
|
-
const mergedStyles = style;
|
|
98
|
-
const animateStyles = useSafeRef({});
|
|
99
|
-
const animatedTranforms = useSafeRef([]);
|
|
100
|
-
const animationsState = useSafeRef(
|
|
101
|
-
/* @__PURE__ */ new WeakMap()
|
|
102
|
-
);
|
|
103
|
-
const args = [
|
|
104
|
-
JSON.stringify(mergedStyles),
|
|
105
|
-
JSON.stringify(state),
|
|
106
|
-
isExiting,
|
|
107
|
-
!!onDidAnimate
|
|
108
|
-
];
|
|
109
|
-
const res = useMemo(() => {
|
|
110
|
-
var _a;
|
|
111
|
-
const runners = [];
|
|
112
|
-
const completions = [];
|
|
113
|
-
const nonAnimatedStyle = {};
|
|
114
|
-
for (const key in mergedStyles) {
|
|
115
|
-
const val = mergedStyles[key];
|
|
116
|
-
if (!animatedStyleKey[key]) {
|
|
117
|
-
nonAnimatedStyle[key] = val;
|
|
118
|
-
continue;
|
|
119
|
-
}
|
|
120
|
-
if (key !== "transform") {
|
|
121
|
-
animateStyles.current[key] = update(key, animateStyles.current[key], val);
|
|
122
|
-
continue;
|
|
123
|
-
}
|
|
124
|
-
if (!val)
|
|
125
|
-
continue;
|
|
126
|
-
for (const [index, transform] of val.entries()) {
|
|
127
|
-
if (!transform)
|
|
128
|
-
continue;
|
|
129
|
-
const tkey = Object.keys(transform)[0];
|
|
130
|
-
const currentTransform = (_a = animatedTranforms.current[index]) == null ? void 0 : _a[tkey];
|
|
131
|
-
animatedTranforms.current[index] = {
|
|
132
|
-
[tkey]: update(tkey, currentTransform, transform[tkey])
|
|
133
|
-
};
|
|
134
|
-
animatedTranforms.current = [...animatedTranforms.current];
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
const animatedStyle = {
|
|
138
|
-
...Object.fromEntries(
|
|
139
|
-
Object.entries(animateStyles.current).map(([k, v]) => {
|
|
140
|
-
var _a2;
|
|
141
|
-
return [
|
|
142
|
-
k,
|
|
143
|
-
((_a2 = animationsState.current.get(v)) == null ? void 0 : _a2.interopolation) || v
|
|
144
|
-
];
|
|
145
|
-
})
|
|
146
|
-
),
|
|
147
|
-
transform: animatedTranforms.current.map((r) => {
|
|
148
|
-
var _a2;
|
|
149
|
-
const key = Object.keys(r)[0];
|
|
150
|
-
const val = ((_a2 = animationsState.current.get(r[key])) == null ? void 0 : _a2.interopolation) || r[key];
|
|
151
|
-
return { [key]: val };
|
|
152
|
-
})
|
|
153
|
-
};
|
|
154
|
-
return {
|
|
155
|
-
runners,
|
|
156
|
-
completions,
|
|
157
|
-
style: [nonAnimatedStyle, animatedStyle]
|
|
158
|
-
};
|
|
159
|
-
function update(key, animated, valIn) {
|
|
160
|
-
const [val, type] = getValue(valIn);
|
|
161
|
-
const value = animated || new Animated.Value(val);
|
|
162
|
-
let interpolateArgs;
|
|
163
|
-
if (type) {
|
|
164
|
-
const curInterpolation = animationsState.current.get(value);
|
|
165
|
-
interpolateArgs = getInterpolated(
|
|
166
|
-
(curInterpolation == null ? void 0 : curInterpolation.current) ?? value["_value"],
|
|
167
|
-
val,
|
|
168
|
-
type
|
|
169
|
-
);
|
|
170
|
-
animationsState.current.set(value, {
|
|
171
|
-
interopolation: value.interpolate(interpolateArgs),
|
|
172
|
-
current: val
|
|
173
|
-
});
|
|
174
|
-
}
|
|
175
|
-
if (value) {
|
|
176
|
-
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
177
|
-
let resolve;
|
|
178
|
-
const promise = new Promise((res2) => {
|
|
179
|
-
resolve = res2;
|
|
180
|
-
});
|
|
181
|
-
completions.push(promise);
|
|
182
|
-
runners.push(() => {
|
|
183
|
-
value.stopAnimation();
|
|
184
|
-
function getAnimation() {
|
|
185
|
-
return Animated[animationConfig.type || "spring"](value, {
|
|
186
|
-
toValue: val,
|
|
187
|
-
useNativeDriver: !isWeb,
|
|
188
|
-
...animationConfig
|
|
189
|
-
});
|
|
190
|
-
}
|
|
191
|
-
const animation = animationConfig.delay ? Animated.sequence([
|
|
192
|
-
Animated.delay(animationConfig.delay),
|
|
193
|
-
getAnimation()
|
|
194
|
-
]) : getAnimation();
|
|
195
|
-
animation.start(({ finished }) => {
|
|
196
|
-
if (finished) {
|
|
197
|
-
resolve();
|
|
198
|
-
}
|
|
199
|
-
});
|
|
200
|
-
});
|
|
201
|
-
}
|
|
202
|
-
if (process.env.NODE_ENV === "development") {
|
|
203
|
-
if (props["debug"]) {
|
|
204
|
-
console.log(" \u{1F4A0} animate", key, `from ${value["_value"]} to`, valIn, `(${val})`, "type", type, "interpolate", interpolateArgs);
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
return value;
|
|
208
|
-
}
|
|
209
|
-
}, args);
|
|
210
|
-
useIsomorphicLayoutEffect(() => {
|
|
211
|
-
res.runners.forEach((r) => r());
|
|
212
|
-
let cancel = false;
|
|
213
|
-
Promise.all(res.completions).then(() => {
|
|
214
|
-
if (cancel)
|
|
215
|
-
return;
|
|
216
|
-
onDidAnimate == null ? void 0 : onDidAnimate();
|
|
217
|
-
if (isExiting) {
|
|
218
|
-
sendExitComplete == null ? void 0 : sendExitComplete();
|
|
219
|
-
}
|
|
220
|
-
});
|
|
221
|
-
return () => {
|
|
222
|
-
cancel = true;
|
|
223
|
-
};
|
|
224
|
-
}, args);
|
|
225
|
-
if (process.env.NODE_ENV === "development") {
|
|
226
|
-
if (props["debug"]) {
|
|
227
|
-
console.log(`Returning animated`, res);
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
return res;
|
|
231
|
-
}
|
|
232
|
-
};
|
|
233
|
-
}
|
|
234
|
-
function getInterpolated(current, next, postfix = "deg") {
|
|
235
|
-
if (next === current) {
|
|
236
|
-
current = next - 1e-9;
|
|
237
|
-
}
|
|
238
|
-
const inputRange = [current, next];
|
|
239
|
-
const outputRange = [`${current}${postfix}`, `${next}${postfix}`];
|
|
240
|
-
if (next < current) {
|
|
241
|
-
inputRange.reverse();
|
|
242
|
-
outputRange.reverse();
|
|
243
|
-
}
|
|
244
|
-
return {
|
|
245
|
-
inputRange,
|
|
246
|
-
outputRange
|
|
247
|
-
};
|
|
248
|
-
}
|
|
249
|
-
function getAnimationConfig(key, animations, animation) {
|
|
250
|
-
var _a, _b;
|
|
251
|
-
if (typeof animation === "string") {
|
|
252
|
-
return animations[animation];
|
|
253
|
-
}
|
|
254
|
-
let type = "";
|
|
255
|
-
let extraConf;
|
|
256
|
-
const shortKey = transformShorthands[key];
|
|
257
|
-
if (Array.isArray(animation)) {
|
|
258
|
-
type = animation[0];
|
|
259
|
-
const conf = ((_a = animation[1]) == null ? void 0 : _a[key]) ?? ((_b = animation[1]) == null ? void 0 : _b[shortKey]);
|
|
260
|
-
if (conf) {
|
|
261
|
-
if (typeof conf === "string") {
|
|
262
|
-
type = conf;
|
|
263
|
-
} else {
|
|
264
|
-
type = conf.type || type;
|
|
265
|
-
extraConf = conf;
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
} else {
|
|
269
|
-
const val = (animation == null ? void 0 : animation[key]) ?? (animation == null ? void 0 : animation[shortKey]);
|
|
270
|
-
type = val == null ? void 0 : val.type;
|
|
271
|
-
extraConf = val;
|
|
272
|
-
}
|
|
273
|
-
const found = animations[type];
|
|
274
|
-
if (!found) {
|
|
275
|
-
throw new Error(`No animation of type "${type}" for key "${key}"`);
|
|
276
|
-
}
|
|
277
|
-
return {
|
|
278
|
-
...found,
|
|
279
|
-
...extraConf
|
|
280
|
-
};
|
|
281
|
-
}
|
|
282
|
-
const transformShorthands = {
|
|
283
|
-
x: "translateX",
|
|
284
|
-
y: "translateY",
|
|
285
|
-
translateX: "x",
|
|
286
|
-
translateY: "y"
|
|
287
|
-
};
|
|
288
|
-
function getValue(input) {
|
|
289
|
-
if (typeof input !== "string") {
|
|
290
|
-
return [input];
|
|
291
|
-
}
|
|
292
|
-
const [_, number, after] = input.match(/([-0-9]+)(deg|%|px)/) ?? [];
|
|
293
|
-
return [+number, after];
|
|
294
|
-
}
|
|
295
|
-
export {
|
|
296
|
-
AnimatedText,
|
|
297
|
-
AnimatedView,
|
|
298
|
-
createAnimations,
|
|
299
|
-
useAnimatedNumber,
|
|
300
|
-
useAnimatedNumberReaction,
|
|
301
|
-
useAnimatedNumberStyle
|
|
302
|
-
};
|
|
1
|
+
import{usePresence as U}from"@tamagui/use-presence";import{isWeb as w,useEvent as K,useIsomorphicLayoutEffect as L,useSafeRef as h}from"@tamagui/web";import{useEffect as D,useMemo as J}from"react";import{Animated as p}from"react-native";const M={transform:!0,opacity:!0},R=p.View,k=p.Text;function W(n){const t=h(null);return t.current||(t.current={composite:null,val:new p.Value(n),strategy:{type:"spring"}}),{getInstance(){return t.current.val},getValue(){return t.current.val._value},stop(){var e;(e=t.current.composite)==null||e.stop(),t.current.composite=null},setValue(e,{type:r,...m}={type:"spring"}){var d,g;const s=t.current.val;if(r==="direct")s.setValue(e);else if(r==="spring"){(d=t.current.composite)==null||d.stop();const u=p.spring(s,{...m,toValue:e,useNativeDriver:!w});u.start(),t.current.composite=u}else{(g=t.current.composite)==null||g.stop();const u=p.timing(s,{...m,toValue:e,useNativeDriver:!w});u.start(),t.current.composite=u}}}}function X({value:n},t){const e=K(r=>{t(r.value)});D(()=>{const r=n.getInstance().addListener(e);return()=>{n.getInstance().removeListener(r)}},[n,e])}function Y(n,t){return t(n.getInstance())}function oe(n){return R.displayName="AnimatedView",k.displayName="AnimatedText",{isReactNative:!0,animations:n,View:R,Text:k,useAnimatedNumber:W,useAnimatedNumberReaction:X,useAnimatedNumberStyle:Y,usePresence:U,useAnimations:({props:t,onDidAnimate:e,style:r,state:m,presence:s})=>{const d=(s==null?void 0:s[0])===!1,g=s==null?void 0:s[1],u=r,o=h({}),v=h([]),V=h(new WeakMap),E=[JSON.stringify(u),JSON.stringify(m),d,!!e],N=J(()=>{var T;const b=[],C=[],O={};for(const i in u){const a=u[i];if(!M[i]){O[i]=a;continue}if(i!=="transform"){o.current[i]=P(i,o.current[i],a);continue}if(a)for(const[f,c]of a.entries()){if(!c)continue;const y=Object.keys(c)[0],l=(T=v.current[f])==null?void 0:T[y];v.current[f]={[y]:P(y,l,c[y])},v.current=[...v.current]}}const _={...Object.fromEntries(Object.entries(o.current).map(([i,a])=>{var f;return[i,((f=V.current.get(a))==null?void 0:f.interopolation)||a]})),transform:v.current.map(i=>{var c;const a=Object.keys(i)[0],f=((c=V.current.get(i[a]))==null?void 0:c.interopolation)||i[a];return{[a]:f}})};return{runners:b,completions:C,style:[O,_]};function P(i,a,f){const[c,y]=B(f),l=a||new p.Value(c);let x;if(y){const A=V.current.get(l);x=q((A==null?void 0:A.current)??l._value,c,y),V.current.set(l,{interopolation:l.interpolate(x),current:c})}if(l){const A=F(i,n,t.animation);let $;const j=new Promise(S=>{$=S});C.push(j),b.push(()=>{l.stopAnimation();function S(){return p[A.type||"spring"](l,{toValue:c,useNativeDriver:!w,...A})}(A.delay?p.sequence([p.delay(A.delay),S()]):S()).start(({finished:I})=>{I&&$()})})}return process.env.NODE_ENV==="development"&&t.debug&&console.log(" \u{1F4A0} animate",i,`from ${l._value} to`,f,`(${c})`,"type",y,"interpolate",x),l}},E);return L(()=>{N.runners.forEach(C=>C());let b=!1;return Promise.all(N.completions).then(()=>{b||(e==null||e(),d&&(g==null||g()))}),()=>{b=!0}},E),process.env.NODE_ENV==="development"&&t.debug&&console.log("Returning animated",N),N}}}function q(n,t,e="deg"){t===n&&(n=t-1e-9);const r=[n,t],m=[`${n}${e}`,`${t}${e}`];return t<n&&(r.reverse(),m.reverse()),{inputRange:r,outputRange:m}}function F(n,t,e){var g,u;if(typeof e=="string")return t[e];let r="",m;const s=z[n];if(Array.isArray(e)){r=e[0];const o=((g=e[1])==null?void 0:g[n])??((u=e[1])==null?void 0:u[s]);o&&(typeof o=="string"?r=o:(r=o.type||r,m=o))}else{const o=(e==null?void 0:e[n])??(e==null?void 0:e[s]);r=o==null?void 0:o.type,m=o}const d=t[r];if(!d)throw new Error(`No animation of type "${r}" for key "${n}"`);return{...d,...m}}const z={x:"translateX",y:"translateY",translateX:"x",translateY:"y"};function B(n){if(typeof n!="string")return[n];const[t,e,r]=n.match(/([-0-9]+)(deg|%|px)/)??[];return[+e,r]}export{k as AnimatedText,R as AnimatedView,oe as createAnimations,W as useAnimatedNumber,X as useAnimatedNumberReaction,Y as useAnimatedNumberStyle};
|
|
303
2
|
//# sourceMappingURL=createAnimations.mjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
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 {\n value,\n }: {\n value: UniversalAnimatedNumber<Animated.Value>\n },\n onValue: (current: number) => void\n) {\n const onChange = useEvent((current) => {\n onValue(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 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": "AAAA,
|
|
6
|
-
"names": ["_a", "res"]
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["usePresence", "isWeb", "useEvent", "useIsomorphicLayoutEffect", "useSafeRef", "useEffect", "useMemo", "Animated", "animatedStyleKey", "AnimatedView", "AnimatedText", "useAnimatedNumber", "initial", "state", "_a", "next", "type", "config", "_b", "val", "composite", "useAnimatedNumberReaction", "value", "onValue", "onChange", "current", "id", "useAnimatedNumberStyle", "getStyle", "createAnimations", "animations", "props", "onDidAnimate", "style", "presence", "isExiting", "sendExitComplete", "mergedStyles", "animateStyles", "animatedTranforms", "animationsState", "args", "res", "runners", "completions", "nonAnimatedStyle", "key", "update", "index", "transform", "tkey", "currentTransform", "animatedStyle", "k", "v", "r", "animated", "valIn", "getValue", "interpolateArgs", "curInterpolation", "getInterpolated", "animationConfig", "getAnimationConfig", "resolve", "promise", "getAnimation", "finished", "cancel", "postfix", "inputRange", "outputRange", "animation", "extraConf", "shortKey", "transformShorthands", "conf", "found", "input", "_", "number", "after"]
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
package/dist/esm/index.mjs
CHANGED
package/dist/esm/index.mjs.map
CHANGED
package/dist/esm/polyfill.js
CHANGED
package/dist/esm/polyfill.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/polyfill.ts"],
|
|
4
4
|
"sourcesContent": ["// for SSR\nif (typeof requestAnimationFrame === 'undefined') {\n globalThis['requestAnimationFrame'] = setImmediate\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AACI,OAAO,sBAA0B,MACnC,WAAW,sBAA2B",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/polyfill.mjs
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/polyfill.ts"],
|
|
4
4
|
"sourcesContent": ["// for SSR\nif (typeof requestAnimationFrame === 'undefined') {\n globalThis['requestAnimationFrame'] = setImmediate\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AACI,OAAO,sBAA0B,MACnC,WAAW,sBAA2B",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/animations-react-native",
|
|
3
|
-
"version": "1.13.
|
|
3
|
+
"version": "1.13.4",
|
|
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.13.
|
|
19
|
-
"@tamagui/web": "1.13.
|
|
18
|
+
"@tamagui/use-presence": "1.13.4",
|
|
19
|
+
"@tamagui/web": "1.13.4"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"@tamagui/build": "1.13.
|
|
22
|
+
"@tamagui/build": "1.13.4",
|
|
23
23
|
"react": "^18.2.0",
|
|
24
24
|
"react-native": "^0.71.4"
|
|
25
25
|
},
|