@tamagui/animations-react-native 1.19.0 → 1.20.1
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 +73 -5
- package/dist/cjs/createAnimations.js.map +1 -1
- package/dist/esm/createAnimations.js +73 -5
- package/dist/esm/createAnimations.js.map +1 -1
- package/dist/esm/createAnimations.mjs +73 -5
- package/dist/esm/createAnimations.mjs.map +1 -1
- package/package.json +4 -4
- package/src/createAnimations.tsx +86 -7
- package/types/createAnimations.d.ts.map +1 -1
|
@@ -34,6 +34,29 @@ const animatedStyleKey = {
|
|
|
34
34
|
transform: true,
|
|
35
35
|
opacity: true
|
|
36
36
|
};
|
|
37
|
+
const colorStyleKey = {
|
|
38
|
+
backgroundColor: true,
|
|
39
|
+
color: true,
|
|
40
|
+
borderColor: true,
|
|
41
|
+
borderLeftColor: true,
|
|
42
|
+
borderRightColor: true,
|
|
43
|
+
borderTopColor: true,
|
|
44
|
+
borderBottomColor: true
|
|
45
|
+
};
|
|
46
|
+
const costlyToAnimateStyleKey = {
|
|
47
|
+
borderRadius: true,
|
|
48
|
+
borderTopLeftRadius: true,
|
|
49
|
+
borderTopRightRadius: true,
|
|
50
|
+
borderBottomLeftRadius: true,
|
|
51
|
+
borderBottomRightRadius: true,
|
|
52
|
+
borderWidth: true,
|
|
53
|
+
borderLeftWidth: true,
|
|
54
|
+
borderRightWidth: true,
|
|
55
|
+
borderTopWidth: true,
|
|
56
|
+
borderBottomWidth: true,
|
|
57
|
+
...colorStyleKey
|
|
58
|
+
// TODO for other keys like height or width, it's better to not add them here till layout animations are ready
|
|
59
|
+
};
|
|
37
60
|
const AnimatedView = import_react_native.Animated.View;
|
|
38
61
|
const AnimatedText = import_react_native.Animated.Text;
|
|
39
62
|
function useAnimatedNumber(initial) {
|
|
@@ -123,12 +146,24 @@ function createAnimations(animations) {
|
|
|
123
146
|
const animationsState = (0, import_web.useSafeRef)(
|
|
124
147
|
/* @__PURE__ */ new WeakMap()
|
|
125
148
|
);
|
|
149
|
+
const animateOnly = props.animateOnly || [];
|
|
126
150
|
const args = [
|
|
127
151
|
JSON.stringify(mergedStyles),
|
|
128
152
|
JSON.stringify(state),
|
|
129
153
|
isExiting,
|
|
130
154
|
!!onDidAnimate
|
|
131
155
|
];
|
|
156
|
+
const isThereNoNativeStyleKeys = (0, import_react.useMemo)(() => {
|
|
157
|
+
if (import_web.isWeb)
|
|
158
|
+
return true;
|
|
159
|
+
return Object.keys(mergedStyles).some((key) => {
|
|
160
|
+
if (props.animateOnly.length) {
|
|
161
|
+
return !animatedStyleKey[key] && animateOnly.indexOf(key) === -1;
|
|
162
|
+
} else {
|
|
163
|
+
return !animatedStyleKey[key];
|
|
164
|
+
}
|
|
165
|
+
});
|
|
166
|
+
}, args);
|
|
132
167
|
const res = (0, import_react.useMemo)(() => {
|
|
133
168
|
var _a;
|
|
134
169
|
const runners = [];
|
|
@@ -136,7 +171,11 @@ function createAnimations(animations) {
|
|
|
136
171
|
const nonAnimatedStyle = {};
|
|
137
172
|
for (const key in mergedStyles) {
|
|
138
173
|
const val = mergedStyles[key];
|
|
139
|
-
if (!animatedStyleKey[key]) {
|
|
174
|
+
if (!animatedStyleKey[key] && !costlyToAnimateStyleKey[key]) {
|
|
175
|
+
nonAnimatedStyle[key] = val;
|
|
176
|
+
continue;
|
|
177
|
+
}
|
|
178
|
+
if (animateOnly.length && animateOnly.indexOf(key) === -1) {
|
|
140
179
|
nonAnimatedStyle[key] = val;
|
|
141
180
|
continue;
|
|
142
181
|
}
|
|
@@ -180,7 +219,9 @@ function createAnimations(animations) {
|
|
|
180
219
|
style: [nonAnimatedStyle, animatedStyle]
|
|
181
220
|
};
|
|
182
221
|
function update(key, animated, valIn) {
|
|
183
|
-
const
|
|
222
|
+
const isColorStyleKey = colorStyleKey[key];
|
|
223
|
+
const [val, type] = isColorStyleKey ? [0, void 0] : getValue(valIn);
|
|
224
|
+
let animateToVal = val;
|
|
184
225
|
const value = animated || new import_react_native.Animated.Value(val);
|
|
185
226
|
let interpolateArgs;
|
|
186
227
|
if (type) {
|
|
@@ -195,6 +236,22 @@ function createAnimations(animations) {
|
|
|
195
236
|
current: val
|
|
196
237
|
});
|
|
197
238
|
}
|
|
239
|
+
if (isColorStyleKey) {
|
|
240
|
+
const curInterpolation = animationsState.current.get(value);
|
|
241
|
+
if ((curInterpolation == null ? void 0 : curInterpolation.current) !== valIn) {
|
|
242
|
+
interpolateArgs = getColorInterpolated(
|
|
243
|
+
curInterpolation == null ? void 0 : curInterpolation.current,
|
|
244
|
+
// valIn is the new color
|
|
245
|
+
valIn,
|
|
246
|
+
value["_value"]
|
|
247
|
+
);
|
|
248
|
+
animateToVal = value["_value"] === 1 ? 0 : 1;
|
|
249
|
+
animationsState.current.set(value, {
|
|
250
|
+
current: valIn,
|
|
251
|
+
interopolation: value.interpolate(interpolateArgs)
|
|
252
|
+
});
|
|
253
|
+
}
|
|
254
|
+
}
|
|
198
255
|
if (value) {
|
|
199
256
|
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
200
257
|
let resolve;
|
|
@@ -206,8 +263,8 @@ function createAnimations(animations) {
|
|
|
206
263
|
value.stopAnimation();
|
|
207
264
|
function getAnimation() {
|
|
208
265
|
return import_react_native.Animated[animationConfig.type || "spring"](value, {
|
|
209
|
-
toValue:
|
|
210
|
-
useNativeDriver: !import_web.isWeb,
|
|
266
|
+
toValue: animateToVal,
|
|
267
|
+
useNativeDriver: !import_web.isWeb && !isThereNoNativeStyleKeys,
|
|
211
268
|
...animationConfig
|
|
212
269
|
});
|
|
213
270
|
}
|
|
@@ -254,6 +311,17 @@ function createAnimations(animations) {
|
|
|
254
311
|
}
|
|
255
312
|
};
|
|
256
313
|
}
|
|
314
|
+
function getColorInterpolated(currentColor, nextColor, value) {
|
|
315
|
+
const inputRange = [0, 1];
|
|
316
|
+
const outputRange = [currentColor ? currentColor : nextColor, nextColor];
|
|
317
|
+
if (value === 1) {
|
|
318
|
+
outputRange.reverse();
|
|
319
|
+
}
|
|
320
|
+
return {
|
|
321
|
+
inputRange,
|
|
322
|
+
outputRange
|
|
323
|
+
};
|
|
324
|
+
}
|
|
257
325
|
function getInterpolated(current, next, postfix = "deg") {
|
|
258
326
|
if (next === current) {
|
|
259
327
|
current = next - 1e-9;
|
|
@@ -308,7 +376,7 @@ const transformShorthands = {
|
|
|
308
376
|
translateX: "x",
|
|
309
377
|
translateY: "y"
|
|
310
378
|
};
|
|
311
|
-
function getValue(input) {
|
|
379
|
+
function getValue(input, isColor = false) {
|
|
312
380
|
if (typeof input !== "string") {
|
|
313
381
|
return [input];
|
|
314
382
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"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;
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["_a", "res"]
|
|
6
6
|
}
|
|
@@ -11,6 +11,29 @@ const animatedStyleKey = {
|
|
|
11
11
|
transform: true,
|
|
12
12
|
opacity: true
|
|
13
13
|
};
|
|
14
|
+
const colorStyleKey = {
|
|
15
|
+
backgroundColor: true,
|
|
16
|
+
color: true,
|
|
17
|
+
borderColor: true,
|
|
18
|
+
borderLeftColor: true,
|
|
19
|
+
borderRightColor: true,
|
|
20
|
+
borderTopColor: true,
|
|
21
|
+
borderBottomColor: true
|
|
22
|
+
};
|
|
23
|
+
const costlyToAnimateStyleKey = {
|
|
24
|
+
borderRadius: true,
|
|
25
|
+
borderTopLeftRadius: true,
|
|
26
|
+
borderTopRightRadius: true,
|
|
27
|
+
borderBottomLeftRadius: true,
|
|
28
|
+
borderBottomRightRadius: true,
|
|
29
|
+
borderWidth: true,
|
|
30
|
+
borderLeftWidth: true,
|
|
31
|
+
borderRightWidth: true,
|
|
32
|
+
borderTopWidth: true,
|
|
33
|
+
borderBottomWidth: true,
|
|
34
|
+
...colorStyleKey
|
|
35
|
+
// TODO for other keys like height or width, it's better to not add them here till layout animations are ready
|
|
36
|
+
};
|
|
14
37
|
const AnimatedView = Animated.View;
|
|
15
38
|
const AnimatedText = Animated.Text;
|
|
16
39
|
function useAnimatedNumber(initial) {
|
|
@@ -100,12 +123,24 @@ function createAnimations(animations) {
|
|
|
100
123
|
const animationsState = useSafeRef(
|
|
101
124
|
/* @__PURE__ */ new WeakMap()
|
|
102
125
|
);
|
|
126
|
+
const animateOnly = props.animateOnly || [];
|
|
103
127
|
const args = [
|
|
104
128
|
JSON.stringify(mergedStyles),
|
|
105
129
|
JSON.stringify(state),
|
|
106
130
|
isExiting,
|
|
107
131
|
!!onDidAnimate
|
|
108
132
|
];
|
|
133
|
+
const isThereNoNativeStyleKeys = useMemo(() => {
|
|
134
|
+
if (isWeb)
|
|
135
|
+
return true;
|
|
136
|
+
return Object.keys(mergedStyles).some((key) => {
|
|
137
|
+
if (props.animateOnly.length) {
|
|
138
|
+
return !animatedStyleKey[key] && animateOnly.indexOf(key) === -1;
|
|
139
|
+
} else {
|
|
140
|
+
return !animatedStyleKey[key];
|
|
141
|
+
}
|
|
142
|
+
});
|
|
143
|
+
}, args);
|
|
109
144
|
const res = useMemo(() => {
|
|
110
145
|
var _a;
|
|
111
146
|
const runners = [];
|
|
@@ -113,7 +148,11 @@ function createAnimations(animations) {
|
|
|
113
148
|
const nonAnimatedStyle = {};
|
|
114
149
|
for (const key in mergedStyles) {
|
|
115
150
|
const val = mergedStyles[key];
|
|
116
|
-
if (!animatedStyleKey[key]) {
|
|
151
|
+
if (!animatedStyleKey[key] && !costlyToAnimateStyleKey[key]) {
|
|
152
|
+
nonAnimatedStyle[key] = val;
|
|
153
|
+
continue;
|
|
154
|
+
}
|
|
155
|
+
if (animateOnly.length && animateOnly.indexOf(key) === -1) {
|
|
117
156
|
nonAnimatedStyle[key] = val;
|
|
118
157
|
continue;
|
|
119
158
|
}
|
|
@@ -157,7 +196,9 @@ function createAnimations(animations) {
|
|
|
157
196
|
style: [nonAnimatedStyle, animatedStyle]
|
|
158
197
|
};
|
|
159
198
|
function update(key, animated, valIn) {
|
|
160
|
-
const
|
|
199
|
+
const isColorStyleKey = colorStyleKey[key];
|
|
200
|
+
const [val, type] = isColorStyleKey ? [0, void 0] : getValue(valIn);
|
|
201
|
+
let animateToVal = val;
|
|
161
202
|
const value = animated || new Animated.Value(val);
|
|
162
203
|
let interpolateArgs;
|
|
163
204
|
if (type) {
|
|
@@ -172,6 +213,22 @@ function createAnimations(animations) {
|
|
|
172
213
|
current: val
|
|
173
214
|
});
|
|
174
215
|
}
|
|
216
|
+
if (isColorStyleKey) {
|
|
217
|
+
const curInterpolation = animationsState.current.get(value);
|
|
218
|
+
if ((curInterpolation == null ? void 0 : curInterpolation.current) !== valIn) {
|
|
219
|
+
interpolateArgs = getColorInterpolated(
|
|
220
|
+
curInterpolation == null ? void 0 : curInterpolation.current,
|
|
221
|
+
// valIn is the new color
|
|
222
|
+
valIn,
|
|
223
|
+
value["_value"]
|
|
224
|
+
);
|
|
225
|
+
animateToVal = value["_value"] === 1 ? 0 : 1;
|
|
226
|
+
animationsState.current.set(value, {
|
|
227
|
+
current: valIn,
|
|
228
|
+
interopolation: value.interpolate(interpolateArgs)
|
|
229
|
+
});
|
|
230
|
+
}
|
|
231
|
+
}
|
|
175
232
|
if (value) {
|
|
176
233
|
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
177
234
|
let resolve;
|
|
@@ -183,8 +240,8 @@ function createAnimations(animations) {
|
|
|
183
240
|
value.stopAnimation();
|
|
184
241
|
function getAnimation() {
|
|
185
242
|
return Animated[animationConfig.type || "spring"](value, {
|
|
186
|
-
toValue:
|
|
187
|
-
useNativeDriver: !isWeb,
|
|
243
|
+
toValue: animateToVal,
|
|
244
|
+
useNativeDriver: !isWeb && !isThereNoNativeStyleKeys,
|
|
188
245
|
...animationConfig
|
|
189
246
|
});
|
|
190
247
|
}
|
|
@@ -231,6 +288,17 @@ function createAnimations(animations) {
|
|
|
231
288
|
}
|
|
232
289
|
};
|
|
233
290
|
}
|
|
291
|
+
function getColorInterpolated(currentColor, nextColor, value) {
|
|
292
|
+
const inputRange = [0, 1];
|
|
293
|
+
const outputRange = [currentColor ? currentColor : nextColor, nextColor];
|
|
294
|
+
if (value === 1) {
|
|
295
|
+
outputRange.reverse();
|
|
296
|
+
}
|
|
297
|
+
return {
|
|
298
|
+
inputRange,
|
|
299
|
+
outputRange
|
|
300
|
+
};
|
|
301
|
+
}
|
|
234
302
|
function getInterpolated(current, next, postfix = "deg") {
|
|
235
303
|
if (next === current) {
|
|
236
304
|
current = next - 1e-9;
|
|
@@ -285,7 +353,7 @@ const transformShorthands = {
|
|
|
285
353
|
translateX: "x",
|
|
286
354
|
translateY: "y"
|
|
287
355
|
};
|
|
288
|
-
function getValue(input) {
|
|
356
|
+
function getValue(input, isColor = false) {
|
|
289
357
|
if (typeof input !== "string") {
|
|
290
358
|
return [input];
|
|
291
359
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"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;
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["_a", "res"]
|
|
6
6
|
}
|
|
@@ -11,6 +11,29 @@ const animatedStyleKey = {
|
|
|
11
11
|
transform: true,
|
|
12
12
|
opacity: true
|
|
13
13
|
};
|
|
14
|
+
const colorStyleKey = {
|
|
15
|
+
backgroundColor: true,
|
|
16
|
+
color: true,
|
|
17
|
+
borderColor: true,
|
|
18
|
+
borderLeftColor: true,
|
|
19
|
+
borderRightColor: true,
|
|
20
|
+
borderTopColor: true,
|
|
21
|
+
borderBottomColor: true
|
|
22
|
+
};
|
|
23
|
+
const costlyToAnimateStyleKey = {
|
|
24
|
+
borderRadius: true,
|
|
25
|
+
borderTopLeftRadius: true,
|
|
26
|
+
borderTopRightRadius: true,
|
|
27
|
+
borderBottomLeftRadius: true,
|
|
28
|
+
borderBottomRightRadius: true,
|
|
29
|
+
borderWidth: true,
|
|
30
|
+
borderLeftWidth: true,
|
|
31
|
+
borderRightWidth: true,
|
|
32
|
+
borderTopWidth: true,
|
|
33
|
+
borderBottomWidth: true,
|
|
34
|
+
...colorStyleKey
|
|
35
|
+
// TODO for other keys like height or width, it's better to not add them here till layout animations are ready
|
|
36
|
+
};
|
|
14
37
|
const AnimatedView = Animated.View;
|
|
15
38
|
const AnimatedText = Animated.Text;
|
|
16
39
|
function useAnimatedNumber(initial) {
|
|
@@ -100,12 +123,24 @@ function createAnimations(animations) {
|
|
|
100
123
|
const animationsState = useSafeRef(
|
|
101
124
|
/* @__PURE__ */ new WeakMap()
|
|
102
125
|
);
|
|
126
|
+
const animateOnly = props.animateOnly || [];
|
|
103
127
|
const args = [
|
|
104
128
|
JSON.stringify(mergedStyles),
|
|
105
129
|
JSON.stringify(state),
|
|
106
130
|
isExiting,
|
|
107
131
|
!!onDidAnimate
|
|
108
132
|
];
|
|
133
|
+
const isThereNoNativeStyleKeys = useMemo(() => {
|
|
134
|
+
if (isWeb)
|
|
135
|
+
return true;
|
|
136
|
+
return Object.keys(mergedStyles).some((key) => {
|
|
137
|
+
if (props.animateOnly.length) {
|
|
138
|
+
return !animatedStyleKey[key] && animateOnly.indexOf(key) === -1;
|
|
139
|
+
} else {
|
|
140
|
+
return !animatedStyleKey[key];
|
|
141
|
+
}
|
|
142
|
+
});
|
|
143
|
+
}, args);
|
|
109
144
|
const res = useMemo(() => {
|
|
110
145
|
var _a;
|
|
111
146
|
const runners = [];
|
|
@@ -113,7 +148,11 @@ function createAnimations(animations) {
|
|
|
113
148
|
const nonAnimatedStyle = {};
|
|
114
149
|
for (const key in mergedStyles) {
|
|
115
150
|
const val = mergedStyles[key];
|
|
116
|
-
if (!animatedStyleKey[key]) {
|
|
151
|
+
if (!animatedStyleKey[key] && !costlyToAnimateStyleKey[key]) {
|
|
152
|
+
nonAnimatedStyle[key] = val;
|
|
153
|
+
continue;
|
|
154
|
+
}
|
|
155
|
+
if (animateOnly.length && animateOnly.indexOf(key) === -1) {
|
|
117
156
|
nonAnimatedStyle[key] = val;
|
|
118
157
|
continue;
|
|
119
158
|
}
|
|
@@ -157,7 +196,9 @@ function createAnimations(animations) {
|
|
|
157
196
|
style: [nonAnimatedStyle, animatedStyle]
|
|
158
197
|
};
|
|
159
198
|
function update(key, animated, valIn) {
|
|
160
|
-
const
|
|
199
|
+
const isColorStyleKey = colorStyleKey[key];
|
|
200
|
+
const [val, type] = isColorStyleKey ? [0, void 0] : getValue(valIn);
|
|
201
|
+
let animateToVal = val;
|
|
161
202
|
const value = animated || new Animated.Value(val);
|
|
162
203
|
let interpolateArgs;
|
|
163
204
|
if (type) {
|
|
@@ -172,6 +213,22 @@ function createAnimations(animations) {
|
|
|
172
213
|
current: val
|
|
173
214
|
});
|
|
174
215
|
}
|
|
216
|
+
if (isColorStyleKey) {
|
|
217
|
+
const curInterpolation = animationsState.current.get(value);
|
|
218
|
+
if ((curInterpolation == null ? void 0 : curInterpolation.current) !== valIn) {
|
|
219
|
+
interpolateArgs = getColorInterpolated(
|
|
220
|
+
curInterpolation == null ? void 0 : curInterpolation.current,
|
|
221
|
+
// valIn is the new color
|
|
222
|
+
valIn,
|
|
223
|
+
value["_value"]
|
|
224
|
+
);
|
|
225
|
+
animateToVal = value["_value"] === 1 ? 0 : 1;
|
|
226
|
+
animationsState.current.set(value, {
|
|
227
|
+
current: valIn,
|
|
228
|
+
interopolation: value.interpolate(interpolateArgs)
|
|
229
|
+
});
|
|
230
|
+
}
|
|
231
|
+
}
|
|
175
232
|
if (value) {
|
|
176
233
|
const animationConfig = getAnimationConfig(key, animations, props.animation);
|
|
177
234
|
let resolve;
|
|
@@ -183,8 +240,8 @@ function createAnimations(animations) {
|
|
|
183
240
|
value.stopAnimation();
|
|
184
241
|
function getAnimation() {
|
|
185
242
|
return Animated[animationConfig.type || "spring"](value, {
|
|
186
|
-
toValue:
|
|
187
|
-
useNativeDriver: !isWeb,
|
|
243
|
+
toValue: animateToVal,
|
|
244
|
+
useNativeDriver: !isWeb && !isThereNoNativeStyleKeys,
|
|
188
245
|
...animationConfig
|
|
189
246
|
});
|
|
190
247
|
}
|
|
@@ -231,6 +288,17 @@ function createAnimations(animations) {
|
|
|
231
288
|
}
|
|
232
289
|
};
|
|
233
290
|
}
|
|
291
|
+
function getColorInterpolated(currentColor, nextColor, value) {
|
|
292
|
+
const inputRange = [0, 1];
|
|
293
|
+
const outputRange = [currentColor ? currentColor : nextColor, nextColor];
|
|
294
|
+
if (value === 1) {
|
|
295
|
+
outputRange.reverse();
|
|
296
|
+
}
|
|
297
|
+
return {
|
|
298
|
+
inputRange,
|
|
299
|
+
outputRange
|
|
300
|
+
};
|
|
301
|
+
}
|
|
234
302
|
function getInterpolated(current, next, postfix = "deg") {
|
|
235
303
|
if (next === current) {
|
|
236
304
|
current = next - 1e-9;
|
|
@@ -285,7 +353,7 @@ const transformShorthands = {
|
|
|
285
353
|
translateX: "x",
|
|
286
354
|
translateY: "y"
|
|
287
355
|
};
|
|
288
|
-
function getValue(input) {
|
|
356
|
+
function getValue(input, isColor = false) {
|
|
289
357
|
if (typeof input !== "string") {
|
|
290
358
|
return [input];
|
|
291
359
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"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;
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["_a", "res"]
|
|
6
6
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/animations-react-native",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.20.1",
|
|
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.
|
|
19
|
-
"@tamagui/web": "1.
|
|
18
|
+
"@tamagui/use-presence": "1.20.1",
|
|
19
|
+
"@tamagui/web": "1.20.1"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"@tamagui/build": "1.
|
|
22
|
+
"@tamagui/build": "1.20.1",
|
|
23
23
|
"react": "^18.2.0",
|
|
24
24
|
"react-native": "^0.71.4"
|
|
25
25
|
},
|
package/src/createAnimations.tsx
CHANGED
|
@@ -41,6 +41,31 @@ const animatedStyleKey = {
|
|
|
41
41
|
opacity: true,
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
+
const colorStyleKey = {
|
|
45
|
+
backgroundColor: true,
|
|
46
|
+
color: true,
|
|
47
|
+
borderColor: true,
|
|
48
|
+
borderLeftColor: true,
|
|
49
|
+
borderRightColor: true,
|
|
50
|
+
borderTopColor: true,
|
|
51
|
+
borderBottomColor: true,
|
|
52
|
+
}
|
|
53
|
+
// these are the styles that are costly to animate because they don't support useNativeDriver and some of them are changing layout
|
|
54
|
+
const costlyToAnimateStyleKey = {
|
|
55
|
+
borderRadius: true,
|
|
56
|
+
borderTopLeftRadius: true,
|
|
57
|
+
borderTopRightRadius: true,
|
|
58
|
+
borderBottomLeftRadius: true,
|
|
59
|
+
borderBottomRightRadius: true,
|
|
60
|
+
borderWidth: true,
|
|
61
|
+
borderLeftWidth: true,
|
|
62
|
+
borderRightWidth: true,
|
|
63
|
+
borderTopWidth: true,
|
|
64
|
+
borderBottomWidth: true,
|
|
65
|
+
...colorStyleKey,
|
|
66
|
+
// TODO for other keys like height or width, it's better to not add them here till layout animations are ready
|
|
67
|
+
}
|
|
68
|
+
|
|
44
69
|
export const AnimatedView = Animated.View
|
|
45
70
|
export const AnimatedText = Animated.Text
|
|
46
71
|
|
|
@@ -146,6 +171,7 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
146
171
|
const isExiting = presence?.[0] === false
|
|
147
172
|
const sendExitComplete = presence?.[1]
|
|
148
173
|
const mergedStyles = style
|
|
174
|
+
/** store Animated value of each key e.g: color: AnimatedValue */
|
|
149
175
|
const animateStyles = useSafeRef<Record<string, Animated.Value>>({})
|
|
150
176
|
const animatedTranforms = useSafeRef<{ [key: string]: Animated.Value }[]>([])
|
|
151
177
|
const animationsState = useSafeRef(
|
|
@@ -153,10 +179,11 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
153
179
|
Animated.Value,
|
|
154
180
|
{
|
|
155
181
|
interopolation: Animated.AnimatedInterpolation<any>
|
|
156
|
-
current?: number | undefined
|
|
182
|
+
current?: number | string | undefined
|
|
157
183
|
}
|
|
158
184
|
>()
|
|
159
185
|
)
|
|
186
|
+
const animateOnly = props.animateOnly || []
|
|
160
187
|
|
|
161
188
|
const args = [
|
|
162
189
|
JSON.stringify(mergedStyles),
|
|
@@ -165,6 +192,18 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
165
192
|
!!onDidAnimate,
|
|
166
193
|
]
|
|
167
194
|
|
|
195
|
+
const isThereNoNativeStyleKeys = useMemo(() => {
|
|
196
|
+
if (isWeb) return true
|
|
197
|
+
|
|
198
|
+
return Object.keys(mergedStyles).some((key) => {
|
|
199
|
+
if (props.animateOnly.length) {
|
|
200
|
+
return !animatedStyleKey[key] && animateOnly.indexOf(key) === -1
|
|
201
|
+
} else {
|
|
202
|
+
return !animatedStyleKey[key]
|
|
203
|
+
}
|
|
204
|
+
})
|
|
205
|
+
}, args)
|
|
206
|
+
|
|
168
207
|
const res = useMemo(() => {
|
|
169
208
|
const runners: Function[] = []
|
|
170
209
|
const completions: Promise<void>[] = []
|
|
@@ -172,7 +211,11 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
172
211
|
const nonAnimatedStyle = {}
|
|
173
212
|
for (const key in mergedStyles) {
|
|
174
213
|
const val = mergedStyles[key]
|
|
175
|
-
if (!animatedStyleKey[key]) {
|
|
214
|
+
if (!animatedStyleKey[key] && !costlyToAnimateStyleKey[key]) {
|
|
215
|
+
nonAnimatedStyle[key] = val
|
|
216
|
+
continue
|
|
217
|
+
}
|
|
218
|
+
if (animateOnly.length && animateOnly.indexOf(key) === -1) {
|
|
176
219
|
nonAnimatedStyle[key] = val
|
|
177
220
|
continue
|
|
178
221
|
}
|
|
@@ -186,6 +229,7 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
186
229
|
|
|
187
230
|
for (const [index, transform] of val.entries()) {
|
|
188
231
|
if (!transform) continue
|
|
232
|
+
// tkey: e.g: 'translateX'
|
|
189
233
|
const tkey = Object.keys(transform)[0]
|
|
190
234
|
const currentTransform = animatedTranforms.current[index]?.[tkey]
|
|
191
235
|
animatedTranforms.current[index] = {
|
|
@@ -220,7 +264,9 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
220
264
|
animated: Animated.Value | undefined,
|
|
221
265
|
valIn: string | number
|
|
222
266
|
) {
|
|
223
|
-
const
|
|
267
|
+
const isColorStyleKey = colorStyleKey[key]
|
|
268
|
+
const [val, type] = isColorStyleKey ? [0, undefined] : getValue(valIn)
|
|
269
|
+
let animateToVal = val
|
|
224
270
|
const value = animated || new Animated.Value(val)
|
|
225
271
|
|
|
226
272
|
let interpolateArgs: any
|
|
@@ -237,6 +283,23 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
237
283
|
})
|
|
238
284
|
}
|
|
239
285
|
|
|
286
|
+
if (isColorStyleKey) {
|
|
287
|
+
const curInterpolation = animationsState.current.get(value)
|
|
288
|
+
if (curInterpolation?.current !== valIn) {
|
|
289
|
+
interpolateArgs = getColorInterpolated(
|
|
290
|
+
curInterpolation?.current as string,
|
|
291
|
+
// valIn is the new color
|
|
292
|
+
valIn as string,
|
|
293
|
+
value['_value']
|
|
294
|
+
)
|
|
295
|
+
animateToVal = value['_value'] === 1 ? 0 : 1
|
|
296
|
+
animationsState.current!.set(value, {
|
|
297
|
+
current: valIn,
|
|
298
|
+
interopolation: value.interpolate(interpolateArgs),
|
|
299
|
+
})
|
|
300
|
+
}
|
|
301
|
+
}
|
|
302
|
+
|
|
240
303
|
if (value) {
|
|
241
304
|
const animationConfig = getAnimationConfig(key, animations, props.animation)
|
|
242
305
|
|
|
@@ -251,8 +314,8 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
251
314
|
|
|
252
315
|
function getAnimation() {
|
|
253
316
|
return Animated[animationConfig.type || 'spring'](value, {
|
|
254
|
-
toValue:
|
|
255
|
-
useNativeDriver: !isWeb,
|
|
317
|
+
toValue: animateToVal,
|
|
318
|
+
useNativeDriver: !isWeb && !isThereNoNativeStyleKeys,
|
|
256
319
|
...animationConfig,
|
|
257
320
|
})
|
|
258
321
|
}
|
|
@@ -263,7 +326,6 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
263
326
|
getAnimation(),
|
|
264
327
|
])
|
|
265
328
|
: getAnimation()
|
|
266
|
-
|
|
267
329
|
animation.start(({ finished }) => {
|
|
268
330
|
if (finished) {
|
|
269
331
|
resolve()
|
|
@@ -311,6 +373,23 @@ export function createAnimations<A extends AnimationsConfig>(
|
|
|
311
373
|
}
|
|
312
374
|
}
|
|
313
375
|
|
|
376
|
+
function getColorInterpolated(
|
|
377
|
+
currentColor: string | undefined,
|
|
378
|
+
nextColor: string,
|
|
379
|
+
value: number
|
|
380
|
+
) {
|
|
381
|
+
const inputRange = [0, 1]
|
|
382
|
+
const outputRange = [currentColor ? currentColor : nextColor, nextColor]
|
|
383
|
+
if (value === 1) {
|
|
384
|
+
// because current value is 1, then we need to animate from 1 to 0, so we need to reverse the outputRange
|
|
385
|
+
outputRange.reverse()
|
|
386
|
+
}
|
|
387
|
+
return {
|
|
388
|
+
inputRange,
|
|
389
|
+
outputRange,
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
|
|
314
393
|
function getInterpolated(current: number, next: number, postfix = 'deg') {
|
|
315
394
|
if (next === current) {
|
|
316
395
|
current = next - 0.000000001
|
|
@@ -372,7 +451,7 @@ const transformShorthands = {
|
|
|
372
451
|
translateY: 'y',
|
|
373
452
|
}
|
|
374
453
|
|
|
375
|
-
function getValue(input: number | string) {
|
|
454
|
+
function getValue(input: number | string, isColor = false) {
|
|
376
455
|
if (typeof input !== 'string') {
|
|
377
456
|
return [input] as const
|
|
378
457
|
}
|
|
@@ -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;
|
|
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;AAgClD,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,EACE,KAAK,GACN,EAAE;IACD,KAAK,EAAE,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;CAC/C,EACD,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,QAYnC;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,CAyNpB"}
|