@tamagui/animations-react-native 3.0.0-beta.922.1 → 3.0.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.native.cjs +243 -74
- package/dist/cjs/createAnimations.native.js +243 -74
- package/dist/cjs/createAnimations.native.js.map +1 -1
- package/dist/cjs/index.cjs +1 -1
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/cjs/types.cjs +16 -0
- package/dist/cjs/types.native.cjs +18 -0
- package/dist/cjs/types.native.js +20 -0
- package/dist/cjs/types.native.js.map +1 -0
- package/dist/esm/createAnimations.native.js +242 -73
- package/dist/esm/createAnimations.native.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.mjs +1 -1
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/types.mjs +0 -0
- package/dist/esm/types.native.js +0 -0
- package/package.json +9 -8
- package/src/{createAnimations.tsx → createAnimations.native.tsx} +524 -132
- package/src/index.native.ts +1 -1
- package/src/index.ts +15 -2
- package/src/types.ts +4 -0
- package/types/{createAnimations.d.ts → createAnimations.native.d.ts} +6 -15
- package/types/createAnimations.native.d.ts.map +11 -0
- package/types/index.d.ts +10 -2
- package/types/index.d.ts.map +2 -2
- package/types/index.native.d.ts +1 -1
- package/types/index.native.d.ts.map +1 -1
- package/types/types.d.ts +5 -0
- package/types/types.d.ts.map +11 -0
- package/dist/cjs/createAnimations.cjs +0 -617
- package/dist/esm/createAnimations.mjs +0 -584
- package/dist/esm/createAnimations.mjs.map +0 -1
- package/types/createAnimations.d.ts.map +0 -11
|
@@ -1,18 +1,14 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { easingToBezier, forAnimationState, getTransitionForKey, resolveTransition } from "@tamagui/animation-helpers";
|
|
2
2
|
import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
|
|
3
3
|
import { ResetPresence, usePresence } from "@tamagui/use-presence";
|
|
4
4
|
import { useEvent } from "@tamagui/web";
|
|
5
5
|
import { useThemeWithState } from "@tamagui/web/internal-runtime";
|
|
6
6
|
import React from "react";
|
|
7
|
-
import { Animated, processColor } from "react-native";
|
|
7
|
+
import { Animated, Easing, TextInput, processColor } from "react-native";
|
|
8
8
|
|
|
9
|
-
function _type_of(obj) {
|
|
10
|
-
"@swc/helpers - typeof";
|
|
11
|
-
return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
|
|
12
|
-
}
|
|
13
9
|
var isFabric = !isWeb && typeof global !== "undefined" && !!global.__nativeFabricUIManager;
|
|
14
10
|
var resolveDynamicValue = function(value, isDark) {
|
|
15
|
-
if (value &&
|
|
11
|
+
if (value && typeof value === "object" && "dynamic" in value) {
|
|
16
12
|
var dynamicValue = isDark ? value.dynamic.dark : value.dynamic.light;
|
|
17
13
|
return dynamicValue;
|
|
18
14
|
}
|
|
@@ -39,13 +35,31 @@ var layoutStyleKey = {
|
|
|
39
35
|
minWidth: true,
|
|
40
36
|
maxWidth: true
|
|
41
37
|
};
|
|
42
|
-
|
|
38
|
+
var textMetricStyleKey = {
|
|
39
|
+
fontSize: true,
|
|
40
|
+
lineHeight: true
|
|
41
|
+
};
|
|
42
|
+
var jsDriverStyleKey = {
|
|
43
|
+
...layoutStyleKey,
|
|
44
|
+
...textMetricStyleKey
|
|
45
|
+
};
|
|
46
|
+
function hasAnimatedLayoutKey(style, isDark, resolved) {
|
|
43
47
|
for (var key in layoutStyleKey) {
|
|
44
|
-
if (
|
|
48
|
+
if (!getTransitionForKey(resolved, key)) continue;
|
|
45
49
|
if (typeof resolveDynamicValue(style[key], isDark) === "number") return true;
|
|
46
50
|
}
|
|
47
51
|
return false;
|
|
48
52
|
}
|
|
53
|
+
var getLeadingRatio = function(metrics) {
|
|
54
|
+
var ratio = metrics === null || metrics === void 0 ? void 0 : metrics.lineHeight;
|
|
55
|
+
return typeof ratio === "number" && Number.isFinite(ratio) && ratio >= 0 ? ratio : void 0;
|
|
56
|
+
};
|
|
57
|
+
var paintsLeadingProduct = function(style, ratio) {
|
|
58
|
+
return ratio !== void 0 && typeof style.fontSize === "number" && typeof style.lineHeight === "number";
|
|
59
|
+
};
|
|
60
|
+
var inheritedFontSizeNode = function(style, ratio, inheritedText) {
|
|
61
|
+
return ratio !== void 0 && typeof style.fontSize !== "number" && (inheritedText === null || inheritedText === void 0 ? void 0 : inheritedText.driver) === "react-native" ? inheritedText.fontSize : void 0;
|
|
62
|
+
};
|
|
49
63
|
function isAnimatableColor(value) {
|
|
50
64
|
return typeof value === "string" && processColor(value) != null;
|
|
51
65
|
}
|
|
@@ -64,6 +78,7 @@ var costlyToAnimateStyleKey = {
|
|
|
64
78
|
};
|
|
65
79
|
var AnimatedView = Animated.View;
|
|
66
80
|
var AnimatedText = Animated.Text;
|
|
81
|
+
var animatedTextInput;
|
|
67
82
|
function useAnimatedNumber(initial) {
|
|
68
83
|
var state = React.useRef(null);
|
|
69
84
|
if (!state.current) {
|
|
@@ -93,10 +108,14 @@ function useAnimatedNumber(initial) {
|
|
|
93
108
|
return finished ? onFinish() : null;
|
|
94
109
|
} : void 0;
|
|
95
110
|
if (type === "direct") {
|
|
96
|
-
val.setValue(next);
|
|
97
|
-
} else if (type === "spring") {
|
|
98
111
|
var _state_current_composite;
|
|
99
112
|
(_state_current_composite = state.current.composite) === null || _state_current_composite === void 0 ? void 0 : _state_current_composite.stop();
|
|
113
|
+
state.current.composite = null;
|
|
114
|
+
val.setValue(next);
|
|
115
|
+
onFinish === null || onFinish === void 0 ? void 0 : onFinish();
|
|
116
|
+
} else if (type === "spring") {
|
|
117
|
+
var _state_current_composite1;
|
|
118
|
+
(_state_current_composite1 = state.current.composite) === null || _state_current_composite1 === void 0 ? void 0 : _state_current_composite1.stop();
|
|
100
119
|
var composite = Animated.spring(val, {
|
|
101
120
|
...config,
|
|
102
121
|
toValue: next,
|
|
@@ -105,8 +124,8 @@ function useAnimatedNumber(initial) {
|
|
|
105
124
|
composite.start(handleFinish);
|
|
106
125
|
state.current.composite = composite;
|
|
107
126
|
} else {
|
|
108
|
-
var
|
|
109
|
-
(
|
|
127
|
+
var _state_current_composite2;
|
|
128
|
+
(_state_current_composite2 = state.current.composite) === null || _state_current_composite2 === void 0 ? void 0 : _state_current_composite2.stop();
|
|
110
129
|
var composite1 = Animated.timing(val, {
|
|
111
130
|
...config,
|
|
112
131
|
toValue: next,
|
|
@@ -148,7 +167,7 @@ var useAnimatedNumberStyle = function(value, getStyle) {
|
|
|
148
167
|
return usesAnimatedNode ? animatedStyle : getStyle(current);
|
|
149
168
|
};
|
|
150
169
|
function hasAnimatedNode(value) {
|
|
151
|
-
if (!value ||
|
|
170
|
+
if (!value || typeof value !== "object") return false;
|
|
152
171
|
if (typeof value.__getValue === "function") return true;
|
|
153
172
|
if (Array.isArray(value)) return value.some(hasAnimatedNode);
|
|
154
173
|
return Object.values(value).some(hasAnimatedNode);
|
|
@@ -175,8 +194,31 @@ function createAnimations(animations, options) {
|
|
|
175
194
|
useAnimatedNumbersStyle,
|
|
176
195
|
usePresence,
|
|
177
196
|
ResetPresence,
|
|
197
|
+
useTextMetrics: function(param) {
|
|
198
|
+
var { inheritedText, lineHeight } = param;
|
|
199
|
+
var node = (inheritedText === null || inheritedText === void 0 ? void 0 : inheritedText.driver) === "react-native" ? inheritedText.fontSize : null;
|
|
200
|
+
var ratio = typeof lineHeight === "number" ? lineHeight : null;
|
|
201
|
+
var style = React.useMemo(function() {
|
|
202
|
+
return node ? ratio === null ? { fontSize: node } : {
|
|
203
|
+
fontSize: node,
|
|
204
|
+
lineHeight: Animated.multiply(node, ratio)
|
|
205
|
+
} : null;
|
|
206
|
+
}, [node, ratio]);
|
|
207
|
+
var textChannel = inheritedText !== null && inheritedText !== void 0 ? inheritedText : null;
|
|
208
|
+
if (!style) return {
|
|
209
|
+
style: null,
|
|
210
|
+
textChannel
|
|
211
|
+
};
|
|
212
|
+
animatedTextInput || (animatedTextInput = Animated.createAnimatedComponent(TextInput));
|
|
213
|
+
return {
|
|
214
|
+
style,
|
|
215
|
+
textChannel,
|
|
216
|
+
Text: AnimatedText,
|
|
217
|
+
TextInput: animatedTextInput
|
|
218
|
+
};
|
|
219
|
+
},
|
|
178
220
|
useAnimations: function(param) {
|
|
179
|
-
var { props, onTransition, style, componentState, presence, stateRef, useStyleEmitter } = param;
|
|
221
|
+
var { props, onTransition, style, componentState, presence, stateRef, styleState, useStyleEmitter, inheritedText } = param;
|
|
180
222
|
var _themeState_name;
|
|
181
223
|
var isDisabled = isWeb && componentState.unmounted === true;
|
|
182
224
|
var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
|
|
@@ -194,9 +236,41 @@ function createAnimations(animations, options) {
|
|
|
194
236
|
cause
|
|
195
237
|
});
|
|
196
238
|
};
|
|
239
|
+
var _styleState_effectiveTransition;
|
|
240
|
+
var effectiveTransition = (_styleState_effectiveTransition = styleState === null || styleState === void 0 ? void 0 : styleState.effectiveTransition) !== null && _styleState_effectiveTransition !== void 0 ? _styleState_effectiveTransition : props.transition;
|
|
197
241
|
var [, themeState] = useThemeWithState({});
|
|
198
242
|
var isDark = (themeState === null || themeState === void 0 ? void 0 : themeState.scheme) === "dark" || (themeState === null || themeState === void 0 ? void 0 : (_themeState_name = themeState.name) === null || _themeState_name === void 0 ? void 0 : _themeState_name.startsWith("dark"));
|
|
199
243
|
var animateStyles = React.useRef({});
|
|
244
|
+
var leadingRatioValue = React.useRef(null);
|
|
245
|
+
var leadingRatioRef = React.useRef(void 0);
|
|
246
|
+
var paintsDerivedLeading = React.useRef(false);
|
|
247
|
+
var textChannelRef = React.useRef(null);
|
|
248
|
+
leadingRatioRef.current = getLeadingRatio(styleState === null || styleState === void 0 ? void 0 : styleState.nativeTextMetrics);
|
|
249
|
+
var paintedTextRef = React.useRef({});
|
|
250
|
+
var movesTextValue = function(key, target) {
|
|
251
|
+
if (typeof target !== "number") return false;
|
|
252
|
+
var node = animateStyles.current[key];
|
|
253
|
+
var last = node ? node["_value"] : paintedTextRef.current[key];
|
|
254
|
+
return last !== void 0 && last !== target;
|
|
255
|
+
};
|
|
256
|
+
var movesLeadingRatio = function(ratio) {
|
|
257
|
+
if (ratio === void 0) return false;
|
|
258
|
+
var node = leadingRatioValue.current;
|
|
259
|
+
var last = node ? node["_value"] : paintedTextRef.current.ratio;
|
|
260
|
+
return last !== void 0 && last !== ratio;
|
|
261
|
+
};
|
|
262
|
+
var fontSizeNode = React.useRef(null);
|
|
263
|
+
var animatedValueFor = function(key) {
|
|
264
|
+
var painted = animateStyles.current[key];
|
|
265
|
+
if (painted) return painted;
|
|
266
|
+
if (key === "fontSize" && fontSizeNode.current) return fontSizeNode.current;
|
|
267
|
+
if (textMetricStyleKey[key]) return new Animated.Value(paintedTextRef.current[key]);
|
|
268
|
+
return void 0;
|
|
269
|
+
};
|
|
270
|
+
var leadingRatioValueFrom = function() {
|
|
271
|
+
var _leadingRatioValue_current;
|
|
272
|
+
return (_leadingRatioValue_current = leadingRatioValue.current) !== null && _leadingRatioValue_current !== void 0 ? _leadingRatioValue_current : new Animated.Value(paintedTextRef.current.ratio);
|
|
273
|
+
};
|
|
200
274
|
var animatedTranforms = React.useRef([]);
|
|
201
275
|
var animationsState = React.useRef(/* @__PURE__ */ new WeakMap());
|
|
202
276
|
var pseudoActiveRef = React.useRef(false);
|
|
@@ -217,8 +291,6 @@ function createAnimations(animations, options) {
|
|
|
217
291
|
if (justStoppedExiting) {
|
|
218
292
|
exitCycleIdRef.current++;
|
|
219
293
|
}
|
|
220
|
-
var animateOnly = props.animateOnly || [];
|
|
221
|
-
var hasTransitionOnly = !!props.animateOnly;
|
|
222
294
|
var isEntering = !!componentState.unmounted;
|
|
223
295
|
var wasEnteringRef = React.useRef(isEntering);
|
|
224
296
|
var justFinishedEntering = wasEnteringRef.current && !isEntering;
|
|
@@ -227,22 +299,43 @@ function createAnimations(animations, options) {
|
|
|
227
299
|
});
|
|
228
300
|
var args = [
|
|
229
301
|
JSON.stringify(style),
|
|
302
|
+
JSON.stringify(effectiveTransition),
|
|
230
303
|
componentState,
|
|
231
304
|
isExiting,
|
|
232
305
|
!!onTransition,
|
|
233
306
|
isDark,
|
|
234
307
|
justFinishedEntering,
|
|
235
|
-
|
|
308
|
+
leadingRatioRef.current,
|
|
309
|
+
inheritedText
|
|
236
310
|
];
|
|
237
311
|
var res = React.useMemo(function() {
|
|
312
|
+
var _textChannelRef_current;
|
|
238
313
|
var runners = [];
|
|
239
314
|
var completions = [];
|
|
240
315
|
var animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
|
|
316
|
+
var resolved = forAnimationState(resolveTransition(effectiveTransition, { animations }), animationState);
|
|
241
317
|
var nonAnimatedStyle = {};
|
|
242
|
-
var
|
|
318
|
+
var paintedRatio = leadingRatioRef.current;
|
|
319
|
+
var paintsProduct = paintsLeadingProduct(style, paintedRatio);
|
|
320
|
+
var movesFontSize = movesTextValue("fontSize", style.fontSize);
|
|
321
|
+
var movesLeading = paintsProduct ? movesLeadingRatio(paintedRatio) : movesTextValue("lineHeight", style.lineHeight);
|
|
322
|
+
if (!isExiting && !isDisabled && !pseudoActiveRef.current) {
|
|
323
|
+
if (!movesFontSize) delete animateStyles.current.fontSize;
|
|
324
|
+
if (!movesLeading) delete animateStyles.current.lineHeight;
|
|
325
|
+
}
|
|
326
|
+
if (isDisabled || typeof style.fontSize !== "number" || !getTransitionForKey(resolved, "fontSize")) {
|
|
327
|
+
fontSizeNode.current = null;
|
|
328
|
+
} else if (!fontSizeNode.current) {
|
|
329
|
+
fontSizeNode.current = new Animated.Value(style.fontSize);
|
|
330
|
+
}
|
|
243
331
|
var seenAnimateKeys = /* @__PURE__ */ new Set();
|
|
244
332
|
var sawTransform = false;
|
|
245
333
|
var transformCount = 0;
|
|
334
|
+
var derivesLeading = !isDisabled && paintsProduct && (movesFontSize || movesLeading) && (!!getTransitionForKey(resolved, "fontSize") || !!getTransitionForKey(resolved, "lineHeight"));
|
|
335
|
+
var inheritedFontSize = isDisabled ? void 0 : inheritedFontSizeNode(style, paintedRatio, inheritedText);
|
|
336
|
+
var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(style, isDark, resolved) && !movesFontSize && !movesLeading && !inheritedFontSize && !Object.keys(animateStyles.current).some(function(key2) {
|
|
337
|
+
return jsDriverStyleKey[key2];
|
|
338
|
+
});
|
|
246
339
|
for (var key in style) {
|
|
247
340
|
var rawVal = style[key];
|
|
248
341
|
var val = resolveDynamicValue(rawVal, isDark);
|
|
@@ -250,15 +343,25 @@ function createAnimations(animations, options) {
|
|
|
250
343
|
if (isDisabled) {
|
|
251
344
|
continue;
|
|
252
345
|
}
|
|
253
|
-
if (
|
|
346
|
+
if ((derivesLeading || inheritedFontSize) && (key === "fontSize" || key === "lineHeight")) {
|
|
347
|
+
if (key === "fontSize" && derivesLeading && !movesFontSize) {
|
|
348
|
+
nonAnimatedStyle[key] = val;
|
|
349
|
+
}
|
|
350
|
+
continue;
|
|
351
|
+
}
|
|
352
|
+
if (textMetricStyleKey[key] && !(key === "fontSize" ? movesFontSize : movesLeading)) {
|
|
254
353
|
nonAnimatedStyle[key] = val;
|
|
255
354
|
continue;
|
|
256
355
|
}
|
|
257
|
-
if (
|
|
356
|
+
if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key] && !jsDriverStyleKey[key]) {
|
|
258
357
|
nonAnimatedStyle[key] = val;
|
|
259
358
|
continue;
|
|
260
359
|
}
|
|
261
|
-
if (
|
|
360
|
+
if (key !== "transform" && !getTransitionForKey(resolved, key)) {
|
|
361
|
+
nonAnimatedStyle[key] = val;
|
|
362
|
+
continue;
|
|
363
|
+
}
|
|
364
|
+
if (jsDriverStyleKey[key] && typeof val !== "number") {
|
|
262
365
|
nonAnimatedStyle[key] = val;
|
|
263
366
|
continue;
|
|
264
367
|
}
|
|
@@ -267,7 +370,7 @@ function createAnimations(animations, options) {
|
|
|
267
370
|
continue;
|
|
268
371
|
}
|
|
269
372
|
if (key !== "transform") {
|
|
270
|
-
animateStyles.current[key] = update(key,
|
|
373
|
+
animateStyles.current[key] = update(key, animatedValueFor(key), val);
|
|
271
374
|
seenAnimateKeys.add(key);
|
|
272
375
|
continue;
|
|
273
376
|
}
|
|
@@ -304,6 +407,35 @@ function createAnimations(animations, options) {
|
|
|
304
407
|
}
|
|
305
408
|
}
|
|
306
409
|
}
|
|
410
|
+
var ratioFactor = function() {
|
|
411
|
+
if (!movesLeading) {
|
|
412
|
+
leadingRatioValue.current = null;
|
|
413
|
+
return paintedRatio;
|
|
414
|
+
}
|
|
415
|
+
leadingRatioValue.current = update("lineHeight", leadingRatioValueFrom(), paintedRatio);
|
|
416
|
+
return leadingRatioValue.current;
|
|
417
|
+
};
|
|
418
|
+
var derivedLeading;
|
|
419
|
+
if (derivesLeading) {
|
|
420
|
+
var fontSizeFactor = style.fontSize;
|
|
421
|
+
if (movesFontSize) {
|
|
422
|
+
fontSizeFactor = update("fontSize", animatedValueFor("fontSize"), style.fontSize);
|
|
423
|
+
animateStyles.current.fontSize = fontSizeFactor;
|
|
424
|
+
seenAnimateKeys.add("fontSize");
|
|
425
|
+
}
|
|
426
|
+
derivedLeading = Animated.multiply(fontSizeFactor, ratioFactor());
|
|
427
|
+
} else if (inheritedFontSize) {
|
|
428
|
+
derivedLeading = Animated.multiply(inheritedFontSize, ratioFactor());
|
|
429
|
+
} else if (!isDisabled) {
|
|
430
|
+
leadingRatioValue.current = null;
|
|
431
|
+
}
|
|
432
|
+
paintsDerivedLeading.current = !!derivedLeading;
|
|
433
|
+
var ownFontSizeNode = fontSizeNode.current;
|
|
434
|
+
var textChannel = ownFontSizeNode ? ((_textChannelRef_current = textChannelRef.current) === null || _textChannelRef_current === void 0 ? void 0 : _textChannelRef_current.fontSize) === ownFontSizeNode ? textChannelRef.current : {
|
|
435
|
+
fontSize: ownFontSizeNode,
|
|
436
|
+
driver: "react-native"
|
|
437
|
+
} : typeof style.fontSize === "number" ? null : inheritedText !== null && inheritedText !== void 0 ? inheritedText : null;
|
|
438
|
+
textChannelRef.current = textChannel;
|
|
307
439
|
if (!isExiting && !isDisabled && !pseudoActiveRef.current) {
|
|
308
440
|
for (var k in animateStyles.current) {
|
|
309
441
|
if (!seenAnimateKeys.has(k)) delete animateStyles.current[k];
|
|
@@ -326,11 +458,20 @@ function createAnimations(animations, options) {
|
|
|
326
458
|
var _animationsState_current_get;
|
|
327
459
|
return [k2, ((_animationsState_current_get = animationsState.current.get(v)) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || v];
|
|
328
460
|
})),
|
|
461
|
+
...derivedLeading ? { lineHeight: derivedLeading } : null,
|
|
329
462
|
...animatedTransformStyle
|
|
330
463
|
};
|
|
464
|
+
if (!isDisabled) {
|
|
465
|
+
paintedTextRef.current = {
|
|
466
|
+
fontSize: style.fontSize,
|
|
467
|
+
lineHeight: style.lineHeight,
|
|
468
|
+
ratio: paintedRatio
|
|
469
|
+
};
|
|
470
|
+
}
|
|
331
471
|
return {
|
|
332
472
|
runners,
|
|
333
473
|
completions,
|
|
474
|
+
textChannel,
|
|
334
475
|
style: [nonAnimatedStyle, animatedStyle]
|
|
335
476
|
};
|
|
336
477
|
function update(key2, animated, valIn) {
|
|
@@ -358,7 +499,7 @@ function createAnimations(animations, options) {
|
|
|
358
499
|
});
|
|
359
500
|
}
|
|
360
501
|
if (value) {
|
|
361
|
-
var animationConfig = getAnimationConfig(key2, animations,
|
|
502
|
+
var animationConfig = getAnimationConfig(key2, animations, effectiveTransition, animationState);
|
|
362
503
|
var resolve;
|
|
363
504
|
var promise = new Promise(function(res2) {
|
|
364
505
|
resolve = res2;
|
|
@@ -366,15 +507,14 @@ function createAnimations(animations, options) {
|
|
|
366
507
|
completions.push(promise);
|
|
367
508
|
runners.push(function() {
|
|
368
509
|
value.stopAnimation();
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
animation.start(function(param2) {
|
|
510
|
+
var { type: type2, delay, ...config } = animationConfig;
|
|
511
|
+
var animation = Animated[type2 || "spring"](value, {
|
|
512
|
+
toValue: animateToValue,
|
|
513
|
+
...config,
|
|
514
|
+
useNativeDriver: useNativeDriverForNode
|
|
515
|
+
});
|
|
516
|
+
var animation2 = delay ? Animated.sequence([Animated.delay(delay), animation]) : animation;
|
|
517
|
+
animation2.start(function(param2) {
|
|
378
518
|
var { finished } = param2;
|
|
379
519
|
if (finished || isExiting) {
|
|
380
520
|
resolve();
|
|
@@ -471,19 +611,31 @@ function createAnimations(animations, options) {
|
|
|
471
611
|
}
|
|
472
612
|
});
|
|
473
613
|
}, args);
|
|
474
|
-
|
|
614
|
+
var onEmittedStyle = function(nextStyle, emittedTransition, pseudoActive, nextMetrics) {
|
|
475
615
|
pseudoActiveRef.current = pseudoActive === true;
|
|
476
616
|
var runners = [];
|
|
477
617
|
var seenAnimateKeys = /* @__PURE__ */ new Set();
|
|
478
618
|
var transformCount = 0;
|
|
479
619
|
var animatedShapeChanged = false;
|
|
480
|
-
var
|
|
481
|
-
|
|
620
|
+
var emittedResolved = forAnimationState(resolveTransition(emittedTransition !== null && emittedTransition !== void 0 ? emittedTransition : effectiveTransition, { animations }), "default");
|
|
621
|
+
var emittedRatio = getLeadingRatio(nextMetrics);
|
|
622
|
+
var emitterPaintsProduct = paintsLeadingProduct(nextStyle, emittedRatio);
|
|
623
|
+
var emitterMovesFontSize = movesTextValue("fontSize", nextStyle.fontSize);
|
|
624
|
+
var emitterMovesLeading = emitterPaintsProduct ? movesLeadingRatio(emittedRatio) : movesTextValue("lineHeight", nextStyle.lineHeight);
|
|
625
|
+
var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(nextStyle, isDark, emittedResolved) && !emitterMovesFontSize && !emitterMovesLeading && !inheritedFontSizeNode(nextStyle, emittedRatio, inheritedText) && !Object.keys(animateStyles.current).some(function(key2) {
|
|
626
|
+
return jsDriverStyleKey[key2];
|
|
482
627
|
});
|
|
628
|
+
var emitterDerivesLeading = emitterPaintsProduct && (emitterMovesFontSize || emitterMovesLeading) && (!!getTransitionForKey(emittedResolved, "fontSize") || !!getTransitionForKey(emittedResolved, "lineHeight"));
|
|
483
629
|
for (var key in nextStyle) {
|
|
484
630
|
var rawVal = nextStyle[key];
|
|
485
631
|
var val = resolveDynamicValue(rawVal, isDark);
|
|
486
632
|
if (val === void 0) continue;
|
|
633
|
+
if (emitterDerivesLeading && (key === "fontSize" || key === "lineHeight")) {
|
|
634
|
+
continue;
|
|
635
|
+
}
|
|
636
|
+
if (textMetricStyleKey[key] && !(key === "fontSize" ? emitterMovesFontSize : emitterMovesLeading)) {
|
|
637
|
+
continue;
|
|
638
|
+
}
|
|
487
639
|
if (key === "transform" && Array.isArray(val)) {
|
|
488
640
|
var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
|
|
489
641
|
try {
|
|
@@ -511,14 +663,28 @@ function createAnimations(animations, options) {
|
|
|
511
663
|
}
|
|
512
664
|
}
|
|
513
665
|
}
|
|
514
|
-
} else if (animatedStyleKey[key] != null || costlyToAnimateStyleKey[key] ||
|
|
515
|
-
if (
|
|
666
|
+
} else if (animatedStyleKey[key] != null || costlyToAnimateStyleKey[key] || jsDriverStyleKey[key]) {
|
|
667
|
+
if (jsDriverStyleKey[key] && typeof val !== "number") continue;
|
|
516
668
|
if (colorStyleKey[key] && !isAnimatableColor(val)) continue;
|
|
517
669
|
if (!animateStyles.current[key]) animatedShapeChanged = true;
|
|
518
|
-
animateStyles.current[key] = update(key,
|
|
670
|
+
animateStyles.current[key] = update(key, animatedValueFor(key), val);
|
|
519
671
|
seenAnimateKeys.add(key);
|
|
520
672
|
}
|
|
521
673
|
}
|
|
674
|
+
if (emitterDerivesLeading) {
|
|
675
|
+
if (emitterMovesFontSize) {
|
|
676
|
+
if (!animateStyles.current.fontSize) animatedShapeChanged = true;
|
|
677
|
+
animateStyles.current.fontSize = update("fontSize", animatedValueFor("fontSize"), nextStyle.fontSize);
|
|
678
|
+
seenAnimateKeys.add("fontSize");
|
|
679
|
+
}
|
|
680
|
+
if (emitterMovesLeading) {
|
|
681
|
+
if (!leadingRatioValue.current) animatedShapeChanged = true;
|
|
682
|
+
leadingRatioValue.current = update("lineHeight", leadingRatioValueFrom(), emittedRatio);
|
|
683
|
+
}
|
|
684
|
+
}
|
|
685
|
+
if (emitterDerivesLeading !== paintsDerivedLeading.current) {
|
|
686
|
+
animatedShapeChanged = true;
|
|
687
|
+
}
|
|
522
688
|
for (var key1 in animateStyles.current) {
|
|
523
689
|
if (!seenAnimateKeys.has(key1)) {
|
|
524
690
|
delete animateStyles.current[key1];
|
|
@@ -529,6 +695,11 @@ function createAnimations(animations, options) {
|
|
|
529
695
|
animatedTranforms.current = animatedTranforms.current.slice(0, transformCount);
|
|
530
696
|
animatedShapeChanged = true;
|
|
531
697
|
}
|
|
698
|
+
paintedTextRef.current = {
|
|
699
|
+
fontSize: nextStyle.fontSize,
|
|
700
|
+
lineHeight: nextStyle.lineHeight,
|
|
701
|
+
ratio: emittedRatio
|
|
702
|
+
};
|
|
532
703
|
runners.forEach(function(r) {
|
|
533
704
|
return r();
|
|
534
705
|
});
|
|
@@ -557,19 +728,21 @@ function createAnimations(animations, options) {
|
|
|
557
728
|
animateToValue: (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1
|
|
558
729
|
});
|
|
559
730
|
}
|
|
560
|
-
var animationConfig = getAnimationConfig(key2, animations,
|
|
731
|
+
var animationConfig = getAnimationConfig(key2, animations, emittedTransition !== null && emittedTransition !== void 0 ? emittedTransition : effectiveTransition, "default");
|
|
561
732
|
runners.push(function() {
|
|
562
733
|
value.stopAnimation();
|
|
563
|
-
var
|
|
734
|
+
var { type: type2, delay, ...config } = animationConfig;
|
|
735
|
+
var anim = Animated[type2 || "spring"](value, {
|
|
564
736
|
toValue: animateToValue,
|
|
565
|
-
...
|
|
737
|
+
...config,
|
|
566
738
|
useNativeDriver: useNativeDriverForNode
|
|
567
739
|
});
|
|
568
|
-
(
|
|
740
|
+
(delay ? Animated.sequence([Animated.delay(delay), anim]) : anim).start();
|
|
569
741
|
});
|
|
570
742
|
return value;
|
|
571
743
|
}
|
|
572
|
-
}
|
|
744
|
+
};
|
|
745
|
+
useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(onEmittedStyle);
|
|
573
746
|
if (process.env.NODE_ENV === "development") {
|
|
574
747
|
if (props["debug"] === "verbose") {
|
|
575
748
|
console.info(`Animated`, {
|
|
@@ -610,41 +783,37 @@ function getInterpolated(current, next) {
|
|
|
610
783
|
outputRange
|
|
611
784
|
};
|
|
612
785
|
}
|
|
613
|
-
function
|
|
614
|
-
var
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
animationType = propAnimation.type || getEffectiveAnimation(normalized, animationState);
|
|
625
|
-
extraConf = propAnimation;
|
|
626
|
-
} else {
|
|
627
|
-
animationType = getEffectiveAnimation(normalized, animationState);
|
|
628
|
-
}
|
|
629
|
-
if (normalized.delay && !extraConf.delay) {
|
|
630
|
-
extraConf = {
|
|
631
|
-
...extraConf,
|
|
632
|
-
delay: normalized.delay
|
|
786
|
+
function entryToRN(entry) {
|
|
787
|
+
var extra = entry.timing.kind === "spring" ? entry.timing.extra : void 0;
|
|
788
|
+
if (entry.timing.kind === "spring") {
|
|
789
|
+
return {
|
|
790
|
+
type: "spring",
|
|
791
|
+
stiffness: entry.timing.stiffness,
|
|
792
|
+
damping: entry.timing.damping,
|
|
793
|
+
mass: entry.timing.mass,
|
|
794
|
+
...typeof (extra === null || extra === void 0 ? void 0 : extra.velocity) === "number" ? { velocity: extra.velocity } : null,
|
|
795
|
+
...typeof (extra === null || extra === void 0 ? void 0 : extra.overshootClamping) === "boolean" ? { overshootClamping: extra.overshootClamping } : null,
|
|
796
|
+
...entry.delayMs ? { delay: entry.delayMs } : null
|
|
633
797
|
};
|
|
634
798
|
}
|
|
635
|
-
var
|
|
799
|
+
var bezier = easingToBezier(entry.timing.easing);
|
|
636
800
|
return {
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
...
|
|
801
|
+
type: "timing",
|
|
802
|
+
duration: entry.timing.durationMs,
|
|
803
|
+
...bezier ? { easing: Easing.bezier(bezier[0], bezier[1], bezier[2], bezier[3]) } : null,
|
|
804
|
+
...entry.delayMs ? { delay: entry.delayMs } : null
|
|
640
805
|
};
|
|
641
806
|
}
|
|
642
|
-
var
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
translateX: "x",
|
|
646
|
-
translateY: "y"
|
|
807
|
+
var snapConfig = {
|
|
808
|
+
type: "timing",
|
|
809
|
+
duration: 0
|
|
647
810
|
};
|
|
811
|
+
function getAnimationConfig(key, animations, transition) {
|
|
812
|
+
var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default";
|
|
813
|
+
var resolved = forAnimationState(resolveTransition(transition, { animations }), animationState);
|
|
814
|
+
var entry = getTransitionForKey(resolved, key);
|
|
815
|
+
return entry ? entryToRN(entry) : snapConfig;
|
|
816
|
+
}
|
|
648
817
|
function getValue(input) {
|
|
649
818
|
var isColor = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
|
|
650
819
|
if (typeof input !== "string") {
|