@tamagui/animations-reanimated 2.7.7 → 3.0.0-beta.1093.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.cjs +928 -900
- package/dist/cjs/createAnimations.native.cjs +1176 -0
- package/dist/cjs/createAnimations.native.js +1121 -1118
- package/dist/cjs/createAnimations.native.js.map +1 -1
- package/dist/cjs/createAnimationsCompiler.cjs +64 -0
- package/dist/cjs/createAnimationsCompiler.native.cjs +68 -0
- package/dist/cjs/createAnimationsCompiler.native.js +70 -0
- package/dist/cjs/createAnimationsCompiler.native.js.map +1 -0
- package/dist/cjs/index.cjs +9 -11
- package/dist/cjs/index.compiler.cjs +24 -0
- package/dist/cjs/index.compiler.native.cjs +26 -0
- package/dist/cjs/index.compiler.native.js +28 -0
- package/dist/cjs/index.compiler.native.js.map +1 -0
- package/dist/cjs/index.native.cjs +20 -0
- package/dist/cjs/index.native.js +9 -10
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/esm/createAnimations.mjs +917 -878
- package/dist/esm/createAnimations.mjs.map +1 -1
- package/dist/esm/createAnimations.native.js +1110 -1097
- package/dist/esm/createAnimations.native.js.map +1 -1
- package/dist/esm/createAnimationsCompiler.mjs +44 -0
- package/dist/esm/createAnimationsCompiler.mjs.map +1 -0
- package/dist/esm/createAnimationsCompiler.native.js +46 -0
- package/dist/esm/createAnimationsCompiler.native.js.map +1 -0
- package/dist/esm/index.compiler.mjs +3 -0
- package/dist/esm/index.compiler.native.js +3 -0
- package/dist/esm/index.js +1 -2
- package/dist/esm/index.mjs +1 -2
- package/dist/esm/index.native.js +1 -2
- package/package.json +11 -9
- package/src/createAnimations.tsx +369 -178
- package/src/createAnimationsCompiler.ts +89 -0
- package/src/index.compiler.ts +2 -0
- package/types/createAnimations.d.ts +5 -5
- package/types/createAnimations.d.ts.map +2 -2
- package/types/createAnimationsCompiler.d.ts +5 -0
- package/types/createAnimationsCompiler.d.ts.map +11 -0
- package/types/index.compiler.d.ts +3 -0
- package/types/index.compiler.d.ts.map +11 -0
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/index.mjs.map +0 -1
- package/dist/esm/index.native.js.map +0 -1
|
@@ -5,955 +5,983 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
|
5
5
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
7
|
var __export = (target, all) => {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
for (var name in all) __defProp(target, name, {
|
|
9
|
+
get: all[name],
|
|
10
|
+
enumerable: true
|
|
11
|
+
});
|
|
12
12
|
};
|
|
13
13
|
var __copyProps = (to, from, except, desc) => {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
16
|
+
get: () => from[key],
|
|
17
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
return to;
|
|
21
21
|
};
|
|
22
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
26
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
27
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
28
|
-
value: mod,
|
|
29
|
-
enumerable: true
|
|
22
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
23
|
+
value: mod,
|
|
24
|
+
enumerable: true
|
|
30
25
|
}) : target, mod));
|
|
31
|
-
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
32
|
-
value: true
|
|
33
|
-
}), mod);
|
|
26
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
34
27
|
var createAnimations_exports = {};
|
|
35
|
-
__export(createAnimations_exports, {
|
|
36
|
-
createAnimations: () => createAnimations
|
|
37
|
-
});
|
|
28
|
+
__export(createAnimations_exports, { createAnimations: () => createAnimations });
|
|
38
29
|
module.exports = __toCommonJS(createAnimations_exports);
|
|
39
30
|
var import_animation_helpers = require("@tamagui/animation-helpers");
|
|
40
31
|
var import_core = require("@tamagui/core");
|
|
32
|
+
var import_internal_runtime = require("@tamagui/web/internal-runtime");
|
|
41
33
|
var import_use_presence = require("@tamagui/use-presence");
|
|
42
34
|
var import_normalize_colors = __toESM(require("@react-native/normalize-colors"), 1);
|
|
43
35
|
var import_react = __toESM(require("react"), 1);
|
|
44
36
|
var import_react_native_reanimated = __toESM(require("react-native-reanimated"), 1);
|
|
45
37
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
46
|
-
const getDefaultExport = module2 => {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
38
|
+
const getDefaultExport = (module2) => {
|
|
39
|
+
const mod = module2;
|
|
40
|
+
if (mod.__esModule || mod[Symbol.toStringTag] === "Module") {
|
|
41
|
+
return mod.default || mod;
|
|
42
|
+
}
|
|
43
|
+
return mod;
|
|
52
44
|
};
|
|
53
45
|
const Animated = getDefaultExport(import_react_native_reanimated.default);
|
|
54
|
-
const silenceAnimatedComponentDevCheck = style => {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
46
|
+
const silenceAnimatedComponentDevCheck = (style) => {
|
|
47
|
+
if (process.env.NODE_ENV !== "development" || import_core.isWeb || !style || typeof style !== "object") {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
Object.defineProperty(style, "_requiresAnimatedComponent", {
|
|
51
|
+
configurable: true,
|
|
52
|
+
enumerable: false,
|
|
53
|
+
value: true
|
|
54
|
+
});
|
|
63
55
|
};
|
|
64
56
|
const resolveDynamicValue = (value, isDark) => {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
57
|
+
if (value !== null && typeof value === "object" && "dynamic" in value && typeof value.dynamic === "object") {
|
|
58
|
+
const dynamic = value.dynamic;
|
|
59
|
+
return isDark ? dynamic.dark : dynamic.light;
|
|
60
|
+
}
|
|
61
|
+
return value;
|
|
70
62
|
};
|
|
71
63
|
const updateMapperState = import_core.isWeb ? (state, emitted) => {
|
|
72
|
-
|
|
64
|
+
state.value.emitted = emitted;
|
|
73
65
|
} : (state, emitted) => {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}, false);
|
|
66
|
+
"worklet";
|
|
67
|
+
if (!globalThis._WORKLET) return;
|
|
68
|
+
state.modify((current) => {
|
|
69
|
+
current.emitted = emitted;
|
|
70
|
+
return current;
|
|
71
|
+
}, false);
|
|
81
72
|
};
|
|
82
|
-
const cloneAnimationValue = value => {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
73
|
+
const cloneAnimationValue = (value) => {
|
|
74
|
+
if (Array.isArray(value)) {
|
|
75
|
+
return value.map(cloneAnimationValue);
|
|
76
|
+
}
|
|
77
|
+
if (value && typeof value === "object") {
|
|
78
|
+
const next = {};
|
|
79
|
+
for (const key in value) {
|
|
80
|
+
next[key] = cloneAnimationValue(value[key]);
|
|
81
|
+
}
|
|
82
|
+
return next;
|
|
83
|
+
}
|
|
84
|
+
return value;
|
|
94
85
|
};
|
|
95
|
-
const cloneStyleRecord = style => {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
86
|
+
const cloneStyleRecord = (style) => {
|
|
87
|
+
const next = {};
|
|
88
|
+
for (const key in style) {
|
|
89
|
+
next[key] = cloneAnimationValue(style[key]);
|
|
90
|
+
}
|
|
91
|
+
return next;
|
|
101
92
|
};
|
|
102
|
-
const cloneTransitionConfig = config => {
|
|
103
|
-
|
|
93
|
+
const cloneTransitionConfig = (config) => {
|
|
94
|
+
return cloneAnimationValue(config);
|
|
104
95
|
};
|
|
105
|
-
const getAnimatedTransforms = value => {
|
|
106
|
-
|
|
107
|
-
|
|
96
|
+
const getAnimatedTransforms = (value) => {
|
|
97
|
+
if (!Array.isArray(value)) return [];
|
|
98
|
+
return value.filter((item) => item !== null && typeof item === "object" && !Array.isArray(item));
|
|
108
99
|
};
|
|
109
100
|
const getRemovedAnimatedKeys = (current, previous) => {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
101
|
+
const removedKeys = {};
|
|
102
|
+
for (const key of previous) {
|
|
103
|
+
if (!current.has(key)) removedKeys[key] = true;
|
|
104
|
+
}
|
|
105
|
+
return removedKeys;
|
|
115
106
|
};
|
|
116
107
|
const getImplicitDefault = (key, targetValue) => {
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
return suffixIndex > 0 ? `${value}${targetValue.slice(suffixIndex)}` : value;
|
|
108
|
+
"worklet";
|
|
109
|
+
const value = key === "opacity" || key === "scale" || key === "scaleX" || key === "scaleY" ? 1 : 0;
|
|
110
|
+
if (typeof targetValue !== "string") return value;
|
|
111
|
+
let suffixIndex = 0;
|
|
112
|
+
while (suffixIndex < targetValue.length) {
|
|
113
|
+
const character = targetValue[suffixIndex];
|
|
114
|
+
const code = character.charCodeAt(0);
|
|
115
|
+
if (code >= 48 && code <= 57 || character === "." || character === "-" || character === "+") {
|
|
116
|
+
suffixIndex++;
|
|
117
|
+
} else {
|
|
118
|
+
break;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
return suffixIndex > 0 ? `${value}${targetValue.slice(suffixIndex)}` : value;
|
|
132
122
|
};
|
|
133
123
|
const COLOR_STYLE_KEYS = {
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
124
|
+
backgroundColor: true,
|
|
125
|
+
borderColor: true,
|
|
126
|
+
borderLeftColor: true,
|
|
127
|
+
borderRightColor: true,
|
|
128
|
+
borderTopColor: true,
|
|
129
|
+
borderBottomColor: true,
|
|
130
|
+
color: true
|
|
141
131
|
};
|
|
142
|
-
const toReanimatedColor = value => {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
return trimmed;
|
|
132
|
+
const toReanimatedColor = (value) => {
|
|
133
|
+
"worklet";
|
|
134
|
+
if (typeof value === "number") {
|
|
135
|
+
const color = value >>> 0;
|
|
136
|
+
const alpha = (color >>> 24 & 255) / 255;
|
|
137
|
+
const red = color >>> 16 & 255;
|
|
138
|
+
const green = color >>> 8 & 255;
|
|
139
|
+
const blue = color & 255;
|
|
140
|
+
return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
|
|
141
|
+
}
|
|
142
|
+
if (typeof value !== "string") return value;
|
|
143
|
+
const trimmed = value.trim();
|
|
144
|
+
if (trimmed === "transparent") return "rgba(0, 0, 0, 0)";
|
|
145
|
+
return trimmed;
|
|
157
146
|
};
|
|
158
|
-
const isReanimatedColorHistory = value => {
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
return typeof normalized === "string" && normalized.startsWith("rgba(");
|
|
147
|
+
const isReanimatedColorHistory = (value) => {
|
|
148
|
+
"worklet";
|
|
149
|
+
const normalized = toReanimatedColor(value);
|
|
150
|
+
return typeof normalized === "string" && normalized.startsWith("rgba(");
|
|
163
151
|
};
|
|
164
|
-
const normalizeAnimationColor = value => {
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
152
|
+
const normalizeAnimationColor = (value) => {
|
|
153
|
+
if (typeof value === "number") {
|
|
154
|
+
return toReanimatedColor(value);
|
|
155
|
+
}
|
|
156
|
+
if (typeof value !== "string") return;
|
|
157
|
+
const color = (0, import_normalize_colors.default)(value);
|
|
158
|
+
if (color == null) return;
|
|
159
|
+
const red = Math.round((color & 4278190080) >>> 24);
|
|
160
|
+
const green = Math.round((color & 16711680) >>> 16);
|
|
161
|
+
const blue = Math.round((color & 65280) >>> 8);
|
|
162
|
+
const alpha = (color & 255) / 255;
|
|
163
|
+
return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
|
|
176
164
|
};
|
|
177
165
|
const buildSnapshot = (animated, statics, transforms, previousKeys, lastPainted) => {
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
166
|
+
const snapshotAnimated = {};
|
|
167
|
+
const snapshotStatics = cloneStyleRecord(statics);
|
|
168
|
+
for (const key in snapshotStatics) {
|
|
169
|
+
if (!COLOR_STYLE_KEYS[key]) continue;
|
|
170
|
+
const normalized = normalizeAnimationColor(snapshotStatics[key]);
|
|
171
|
+
if (normalized !== void 0) snapshotStatics[key] = normalized;
|
|
172
|
+
}
|
|
173
|
+
for (const key in animated) {
|
|
174
|
+
if (key === "transform") continue;
|
|
175
|
+
const value = animated[key];
|
|
176
|
+
if (COLOR_STYLE_KEYS[key]) {
|
|
177
|
+
const normalized = normalizeAnimationColor(value);
|
|
178
|
+
if (normalized === void 0) {
|
|
179
|
+
snapshotStatics[key] = cloneAnimationValue(value);
|
|
180
|
+
continue;
|
|
181
|
+
}
|
|
182
|
+
snapshotAnimated[key] = normalized;
|
|
183
|
+
} else {
|
|
184
|
+
snapshotAnimated[key] = cloneAnimationValue(value);
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
const snapshotTransforms = transforms.map(cloneStyleRecord);
|
|
188
|
+
const keys = new Set(Object.keys(snapshotAnimated));
|
|
189
|
+
for (const transform of snapshotTransforms) {
|
|
190
|
+
const key = Object.keys(transform)[0];
|
|
191
|
+
const value = key ? transform[key] : void 0;
|
|
192
|
+
if (key && (typeof value === "number" || typeof value === "string")) {
|
|
193
|
+
keys.add(`transform:${key}`);
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
const seeds = {};
|
|
197
|
+
for (const key of keys) {
|
|
198
|
+
let value = lastPainted[key];
|
|
199
|
+
if (typeof value !== "number" && typeof value !== "string") continue;
|
|
200
|
+
if (value === "auto" || typeof value === "string" && value.startsWith("calc")) {
|
|
201
|
+
continue;
|
|
202
|
+
}
|
|
203
|
+
if (COLOR_STYLE_KEYS[key]) value = normalizeAnimationColor(value);
|
|
204
|
+
if (value !== void 0) seeds[key] = value;
|
|
205
|
+
}
|
|
206
|
+
const gatedKeys = {};
|
|
207
|
+
for (const key of keys) gatedKeys[key] = true;
|
|
208
|
+
const removedKeys = getRemovedAnimatedKeys(keys, previousKeys);
|
|
209
|
+
const painted = {
|
|
210
|
+
...snapshotStatics,
|
|
211
|
+
...snapshotAnimated
|
|
212
|
+
};
|
|
213
|
+
const staticTransforms = getAnimatedTransforms(snapshotStatics.transform);
|
|
214
|
+
delete painted.transform;
|
|
215
|
+
for (const transform of staticTransforms) {
|
|
216
|
+
const key = Object.keys(transform)[0];
|
|
217
|
+
if (key) painted[`transform:${key}`] = transform[key];
|
|
218
|
+
}
|
|
219
|
+
for (const transform of snapshotTransforms) {
|
|
220
|
+
const key = Object.keys(transform)[0];
|
|
221
|
+
if (key) painted[`transform:${key}`] = transform[key];
|
|
222
|
+
}
|
|
223
|
+
return {
|
|
224
|
+
value: {
|
|
225
|
+
animated: snapshotAnimated,
|
|
226
|
+
statics: snapshotStatics,
|
|
227
|
+
transforms: snapshotTransforms,
|
|
228
|
+
gatedKeys,
|
|
229
|
+
seeds,
|
|
230
|
+
removedKeys,
|
|
231
|
+
removeTransform: Object.keys(removedKeys).some((key) => key.startsWith("transform:")),
|
|
232
|
+
clearValue: import_core.isWeb ? "" : null
|
|
233
|
+
},
|
|
234
|
+
painted,
|
|
235
|
+
keys
|
|
236
|
+
};
|
|
249
237
|
};
|
|
250
|
-
const getGatedKeys = snapshot => Object.keys(snapshot.gatedKeys);
|
|
251
|
-
const createReanimatedConfig = config => {
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
return next;
|
|
238
|
+
const getGatedKeys = (snapshot) => Object.keys(snapshot.gatedKeys);
|
|
239
|
+
const createReanimatedConfig = (config) => {
|
|
240
|
+
"worklet";
|
|
241
|
+
const next = {};
|
|
242
|
+
const source = config;
|
|
243
|
+
for (const key in source) {
|
|
244
|
+
if (key === "type" || key === "delay") continue;
|
|
245
|
+
const value = source[key];
|
|
246
|
+
if (value !== void 0) {
|
|
247
|
+
next[key] = value;
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
return next;
|
|
264
251
|
};
|
|
265
252
|
const applyAnimation = (targetValue, config, callback, seedValue, validateStartAsColor = false) => {
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
253
|
+
"worklet";
|
|
254
|
+
const delay = config.delay;
|
|
255
|
+
const reanimatedConfig = createReanimatedConfig(config);
|
|
256
|
+
let animatedValue;
|
|
257
|
+
if (config.type === "timing") {
|
|
258
|
+
animatedValue = (0, import_react_native_reanimated.withTiming)(targetValue, reanimatedConfig, callback);
|
|
259
|
+
} else {
|
|
260
|
+
animatedValue = (0, import_react_native_reanimated.withSpring)(targetValue, reanimatedConfig, callback);
|
|
261
|
+
const innerOnFrame = animatedValue.onFrame;
|
|
262
|
+
animatedValue.onFrame = (animation, now) => {
|
|
263
|
+
"worklet";
|
|
264
|
+
return innerOnFrame(animation, now < animation.lastTimestamp ? animation.lastTimestamp : now);
|
|
265
|
+
};
|
|
266
|
+
}
|
|
267
|
+
const isAnimationDescriptor = animatedValue !== null && typeof animatedValue !== "number" && typeof animatedValue !== "string" && typeof animatedValue !== "boolean" && typeof animatedValue !== "undefined";
|
|
268
|
+
if (isAnimationDescriptor && (seedValue !== void 0 || validateStartAsColor)) {
|
|
269
|
+
const innerOnStart = animatedValue.onStart;
|
|
270
|
+
animatedValue.onStart = (animation, value, timestamp, previousAnimation) => {
|
|
271
|
+
"worklet";
|
|
272
|
+
const startValue = validateStartAsColor ? isReanimatedColorHistory(value) ? toReanimatedColor(value) : seedValue ?? targetValue : seedValue;
|
|
273
|
+
innerOnStart(animation, startValue, timestamp, previousAnimation);
|
|
274
|
+
};
|
|
275
|
+
}
|
|
276
|
+
if (isAnimationDescriptor && delay && delay > 0) {
|
|
277
|
+
animatedValue = (0, import_react_native_reanimated.withDelay)(delay, animatedValue);
|
|
278
|
+
}
|
|
279
|
+
return animatedValue;
|
|
289
280
|
};
|
|
290
|
-
const animateSnapshotValue = (key, implicitKey, targetValue, config, previouslyEmitted, seedValue, gated, currentlyExiting, exitCycleId,
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
281
|
+
const animateSnapshotValue = (key, implicitKey, targetValue, config, previouslyEmitted, seedValue, gated, currentlyExiting, exitCycleId, currentlyCompletingEnter, enterCycleId, currentlyCompletingUpdate, updateCycleId, markExitKeyDone, markEnterKeyDone, markUpdateKeyDone, validateStartAsColor = false) => {
|
|
282
|
+
"worklet";
|
|
283
|
+
const cycleGated = gated && (currentlyExiting || currentlyCompletingEnter || currentlyCompletingUpdate);
|
|
284
|
+
if (!previouslyEmitted && seedValue === void 0 && !cycleGated) {
|
|
285
|
+
return targetValue;
|
|
286
|
+
}
|
|
287
|
+
let callback;
|
|
288
|
+
if (gated && currentlyExiting) {
|
|
289
|
+
callback = (finished) => {
|
|
290
|
+
"worklet";
|
|
291
|
+
(0, import_react_native_reanimated.runOnJS)(markExitKeyDone)(key, exitCycleId, finished ?? false);
|
|
292
|
+
};
|
|
293
|
+
} else if (gated && currentlyCompletingEnter) {
|
|
294
|
+
callback = () => {
|
|
295
|
+
"worklet";
|
|
296
|
+
(0, import_react_native_reanimated.runOnJS)(markEnterKeyDone)(key, enterCycleId);
|
|
297
|
+
};
|
|
298
|
+
} else if (gated && currentlyCompletingUpdate) {
|
|
299
|
+
callback = (finished) => {
|
|
300
|
+
"worklet";
|
|
301
|
+
(0, import_react_native_reanimated.runOnJS)(markUpdateKeyDone)(key, updateCycleId, finished ?? false);
|
|
302
|
+
};
|
|
303
|
+
}
|
|
304
|
+
return applyAnimation(targetValue, config, callback, previouslyEmitted ? void 0 : seedValue ?? getImplicitDefault(implicitKey, targetValue), validateStartAsColor);
|
|
312
305
|
};
|
|
313
306
|
const ANIMATABLE_PROPERTIES = {
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
paddingBottom: true,
|
|
368
|
-
paddingLeft: true,
|
|
369
|
-
paddingRight: true,
|
|
370
|
-
paddingHorizontal: true,
|
|
371
|
-
paddingVertical: true,
|
|
372
|
-
// Flex/Gap
|
|
373
|
-
gap: true,
|
|
374
|
-
rowGap: true,
|
|
375
|
-
columnGap: true,
|
|
376
|
-
flex: true,
|
|
377
|
-
flexGrow: true,
|
|
378
|
-
flexShrink: true
|
|
307
|
+
transform: true,
|
|
308
|
+
opacity: true,
|
|
309
|
+
height: true,
|
|
310
|
+
width: true,
|
|
311
|
+
minWidth: true,
|
|
312
|
+
minHeight: true,
|
|
313
|
+
maxWidth: true,
|
|
314
|
+
maxHeight: true,
|
|
315
|
+
backgroundColor: true,
|
|
316
|
+
borderColor: true,
|
|
317
|
+
borderLeftColor: true,
|
|
318
|
+
borderRightColor: true,
|
|
319
|
+
borderTopColor: true,
|
|
320
|
+
borderBottomColor: true,
|
|
321
|
+
borderRadius: true,
|
|
322
|
+
borderTopLeftRadius: true,
|
|
323
|
+
borderTopRightRadius: true,
|
|
324
|
+
borderBottomLeftRadius: true,
|
|
325
|
+
borderBottomRightRadius: true,
|
|
326
|
+
borderWidth: true,
|
|
327
|
+
borderLeftWidth: true,
|
|
328
|
+
borderRightWidth: true,
|
|
329
|
+
borderTopWidth: true,
|
|
330
|
+
borderBottomWidth: true,
|
|
331
|
+
color: true,
|
|
332
|
+
fontSize: true,
|
|
333
|
+
fontWeight: true,
|
|
334
|
+
lineHeight: true,
|
|
335
|
+
letterSpacing: true,
|
|
336
|
+
left: true,
|
|
337
|
+
right: true,
|
|
338
|
+
top: true,
|
|
339
|
+
bottom: true,
|
|
340
|
+
margin: true,
|
|
341
|
+
marginTop: true,
|
|
342
|
+
marginBottom: true,
|
|
343
|
+
marginLeft: true,
|
|
344
|
+
marginRight: true,
|
|
345
|
+
marginHorizontal: true,
|
|
346
|
+
marginVertical: true,
|
|
347
|
+
padding: true,
|
|
348
|
+
paddingTop: true,
|
|
349
|
+
paddingBottom: true,
|
|
350
|
+
paddingLeft: true,
|
|
351
|
+
paddingRight: true,
|
|
352
|
+
paddingHorizontal: true,
|
|
353
|
+
paddingVertical: true,
|
|
354
|
+
gap: true,
|
|
355
|
+
rowGap: true,
|
|
356
|
+
columnGap: true,
|
|
357
|
+
flex: true,
|
|
358
|
+
flexGrow: true,
|
|
359
|
+
flexShrink: true
|
|
379
360
|
};
|
|
380
|
-
const canAnimateProperty = (key, value
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
return true;
|
|
361
|
+
const canAnimateProperty = (key, value) => {
|
|
362
|
+
if (!ANIMATABLE_PROPERTIES[key]) return false;
|
|
363
|
+
if (value === "auto") return false;
|
|
364
|
+
if (typeof value === "string" && value.startsWith("calc")) return false;
|
|
365
|
+
return true;
|
|
386
366
|
};
|
|
387
|
-
const splitAnimationStyles = (style, isDark, disableAnimation
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
367
|
+
const splitAnimationStyles = (style, isDark, disableAnimation) => {
|
|
368
|
+
const animated = {};
|
|
369
|
+
const statics = {};
|
|
370
|
+
for (const key in style) {
|
|
371
|
+
const value = resolveDynamicValue(style[key], isDark);
|
|
372
|
+
if (value === void 0) continue;
|
|
373
|
+
if (!disableAnimation && canAnimateProperty(key, value)) {
|
|
374
|
+
animated[key] = cloneAnimationValue(value);
|
|
375
|
+
} else {
|
|
376
|
+
statics[key] = cloneAnimationValue(value);
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
return {
|
|
380
|
+
animated,
|
|
381
|
+
statics
|
|
382
|
+
};
|
|
403
383
|
};
|
|
404
384
|
function createWebAnimatedComponent(defaultTag) {
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Element, {
|
|
430
|
-
...transformedProps,
|
|
431
|
-
ref: composedRefs
|
|
432
|
-
});
|
|
433
|
-
}));
|
|
434
|
-
Component.acceptRenderProp = true;
|
|
435
|
-
return Component;
|
|
385
|
+
const isText = defaultTag === "span";
|
|
386
|
+
const Component = Animated.createAnimatedComponent((0, import_core.createRefComponent)((propsIn, ref) => {
|
|
387
|
+
const { forwardedRef, render = defaultTag, ...rest } = propsIn;
|
|
388
|
+
const hostRef = (0, import_react.useRef)(null);
|
|
389
|
+
const composedRefs = (0, import_core.useComposedRefs)(forwardedRef, ref, hostRef);
|
|
390
|
+
const stateRef = (0, import_react.useRef)({ get host() {
|
|
391
|
+
return hostRef.current;
|
|
392
|
+
} });
|
|
393
|
+
const [, themeState] = (0, import_internal_runtime.useThemeWithState)({});
|
|
394
|
+
const result = (0, import_core.getSplitStyles)(rest, isText ? import_core.Text.staticConfig : import_core.View.staticConfig, themeState?.theme ?? {}, themeState?.name ?? "", { unmounted: false }, {
|
|
395
|
+
isAnimated: false,
|
|
396
|
+
noClass: true
|
|
397
|
+
});
|
|
398
|
+
const viewProps = result?.viewProps ?? {};
|
|
399
|
+
const Element = render;
|
|
400
|
+
const transformedProps = import_core.hooks.usePropsTransform?.(render, viewProps, stateRef, false);
|
|
401
|
+
const { nativeID, ...webProps } = transformedProps ?? viewProps;
|
|
402
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Element, {
|
|
403
|
+
...webProps,
|
|
404
|
+
ref: composedRefs
|
|
405
|
+
});
|
|
406
|
+
}));
|
|
407
|
+
Component.acceptRenderProp = true;
|
|
408
|
+
return Component;
|
|
436
409
|
}
|
|
437
410
|
const AnimatedView = createWebAnimatedComponent("div");
|
|
438
411
|
const AnimatedText = createWebAnimatedComponent("span");
|
|
412
|
+
const defaultConfig = { type: "spring" };
|
|
413
|
+
function entryToReanimated(entry) {
|
|
414
|
+
if (entry.timing.kind === "spring") {
|
|
415
|
+
return {
|
|
416
|
+
type: "spring",
|
|
417
|
+
stiffness: entry.timing.stiffness,
|
|
418
|
+
damping: entry.timing.damping,
|
|
419
|
+
mass: entry.timing.mass,
|
|
420
|
+
delay: entry.delayMs || void 0
|
|
421
|
+
};
|
|
422
|
+
}
|
|
423
|
+
const bezier = (0, import_animation_helpers.easingToBezier)(entry.timing.easing);
|
|
424
|
+
return {
|
|
425
|
+
type: "timing",
|
|
426
|
+
duration: entry.timing.durationMs,
|
|
427
|
+
easing: bezier ? import_react_native_reanimated.Easing.bezier(bezier[0], bezier[1], bezier[2], bezier[3]) : void 0,
|
|
428
|
+
delay: entry.delayMs || void 0
|
|
429
|
+
};
|
|
430
|
+
}
|
|
439
431
|
function buildTransitionConfig(transition, animations, animationState, styleKeys) {
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
}
|
|
453
|
-
if (normalized.config) {
|
|
454
|
-
base = cloneTransitionConfig({
|
|
455
|
-
...base,
|
|
456
|
-
...normalized.config
|
|
457
|
-
});
|
|
458
|
-
if (base.type !== "timing" && normalized.config.duration !== void 0 && normalized.config.damping === void 0 && normalized.config.stiffness === void 0 && normalized.config.mass === void 0) {
|
|
459
|
-
base = cloneTransitionConfig({
|
|
460
|
-
...base,
|
|
461
|
-
type: "timing"
|
|
462
|
-
});
|
|
463
|
-
}
|
|
464
|
-
}
|
|
465
|
-
const propertyConfigs = {};
|
|
466
|
-
for (const key of styleKeys) {
|
|
467
|
-
const propAnimation = normalized.properties[key];
|
|
468
|
-
if (typeof propAnimation === "string") {
|
|
469
|
-
propertyConfigs[key] = cloneTransitionConfig(animations[propAnimation] ?? base);
|
|
470
|
-
} else if (propAnimation && typeof propAnimation === "object") {
|
|
471
|
-
const configType = propAnimation.type;
|
|
472
|
-
const baseForProp = configType ? animations[configType] ?? base : base;
|
|
473
|
-
propertyConfigs[key] = cloneTransitionConfig({
|
|
474
|
-
...baseForProp,
|
|
475
|
-
...propAnimation
|
|
476
|
-
});
|
|
477
|
-
} else {
|
|
478
|
-
propertyConfigs[key] = cloneTransitionConfig(base);
|
|
479
|
-
}
|
|
480
|
-
}
|
|
481
|
-
return {
|
|
482
|
-
baseConfig: base,
|
|
483
|
-
propertyConfigs
|
|
484
|
-
};
|
|
432
|
+
const resolved = (0, import_animation_helpers.forAnimationState)((0, import_animation_helpers.resolveTransition)(transition, { animations }), animationState);
|
|
433
|
+
const base = resolved.all ? entryToReanimated(resolved.all) : { ...defaultConfig };
|
|
434
|
+
const propertyConfigs = {};
|
|
435
|
+
for (const key of styleKeys) {
|
|
436
|
+
const entry = (0, import_animation_helpers.getTransitionForKey)(resolved, key);
|
|
437
|
+
propertyConfigs[key] = entry ? entryToReanimated(entry) : instantConfig();
|
|
438
|
+
}
|
|
439
|
+
return {
|
|
440
|
+
baseConfig: base,
|
|
441
|
+
propertyConfigs,
|
|
442
|
+
resolved
|
|
443
|
+
};
|
|
485
444
|
}
|
|
445
|
+
const instantConfig = () => ({
|
|
446
|
+
type: "timing",
|
|
447
|
+
duration: 0
|
|
448
|
+
});
|
|
486
449
|
function getStyleKeys(style) {
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
450
|
+
const keys = new Set(Object.keys(style));
|
|
451
|
+
if (style.transform && Array.isArray(style.transform)) {
|
|
452
|
+
for (const t of style.transform) {
|
|
453
|
+
if (t && typeof t === "object") {
|
|
454
|
+
keys.add(Object.keys(t)[0]);
|
|
455
|
+
}
|
|
456
|
+
}
|
|
457
|
+
}
|
|
458
|
+
return keys;
|
|
459
|
+
}
|
|
460
|
+
function createAnimations(animations) {
|
|
461
|
+
return {
|
|
462
|
+
needsCustomComponent: true,
|
|
463
|
+
View: import_core.isWeb ? AnimatedView : Animated.View,
|
|
464
|
+
Text: import_core.isWeb ? AnimatedText : Animated.Text,
|
|
465
|
+
inputStyle: "value",
|
|
466
|
+
outputStyle: "inline",
|
|
467
|
+
avoidReRenders: true,
|
|
468
|
+
animations,
|
|
469
|
+
usePresence: import_use_presence.usePresence,
|
|
470
|
+
ResetPresence: import_use_presence.ResetPresence,
|
|
471
|
+
useAnimatedNumber(initial) {
|
|
472
|
+
const sharedValue = (0, import_react_native_reanimated.useSharedValue)(initial);
|
|
473
|
+
return (0, import_react.useMemo)(() => ({
|
|
474
|
+
getInstance() {
|
|
475
|
+
"worklet";
|
|
476
|
+
return sharedValue;
|
|
477
|
+
},
|
|
478
|
+
getValue() {
|
|
479
|
+
"worklet";
|
|
480
|
+
return sharedValue.value;
|
|
481
|
+
},
|
|
482
|
+
setValue(next, config = { type: "spring" }, onFinish) {
|
|
483
|
+
if (config.type === "direct") {
|
|
484
|
+
sharedValue.value = next;
|
|
485
|
+
onFinish?.();
|
|
486
|
+
} else {
|
|
487
|
+
const cb = onFinish ? (finished) => {
|
|
488
|
+
"worklet";
|
|
489
|
+
if (finished !== false) {
|
|
490
|
+
(0, import_react_native_reanimated.runOnJS)(onFinish)();
|
|
491
|
+
}
|
|
492
|
+
} : void 0;
|
|
493
|
+
const animationConfig = cloneTransitionConfig(config);
|
|
494
|
+
if (import_core.isWeb) {
|
|
495
|
+
sharedValue.value = applyAnimation(next, animationConfig, cb);
|
|
496
|
+
} else {
|
|
497
|
+
(0, import_react_native_reanimated.runOnUI)((targetValue, animationConfig2) => {
|
|
498
|
+
"worklet";
|
|
499
|
+
sharedValue.value = applyAnimation(targetValue, animationConfig2, cb);
|
|
500
|
+
})(next, animationConfig);
|
|
501
|
+
}
|
|
502
|
+
}
|
|
503
|
+
},
|
|
504
|
+
stop() {
|
|
505
|
+
(0, import_react_native_reanimated.cancelAnimation)(sharedValue);
|
|
506
|
+
}
|
|
507
|
+
}), [sharedValue]);
|
|
508
|
+
},
|
|
509
|
+
useAnimatedNumberReaction({ value }, onValue) {
|
|
510
|
+
const instance = value.getInstance();
|
|
511
|
+
return (0, import_react_native_reanimated.useAnimatedReaction)(() => instance.value, (next, prev) => {
|
|
512
|
+
if (prev !== next) {
|
|
513
|
+
(0, import_react_native_reanimated.runOnJS)(onValue)(next);
|
|
514
|
+
}
|
|
515
|
+
}, [onValue, instance]);
|
|
516
|
+
},
|
|
517
|
+
useAnimatedNumberStyle(val, getStyle) {
|
|
518
|
+
const instance = val.getInstance();
|
|
519
|
+
if (import_core.isWeb) {
|
|
520
|
+
return (0, import_react_native_reanimated.useAnimatedStyle)(() => {
|
|
521
|
+
"worklet";
|
|
522
|
+
return getStyle(instance.value);
|
|
523
|
+
}, [instance, getStyle]);
|
|
524
|
+
}
|
|
525
|
+
const styleVal = (0, import_react_native_reanimated.useDerivedValue)(() => {
|
|
526
|
+
"worklet";
|
|
527
|
+
return getStyle(instance.value);
|
|
528
|
+
});
|
|
529
|
+
const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
|
|
530
|
+
"worklet";
|
|
531
|
+
return styleVal.value;
|
|
532
|
+
});
|
|
533
|
+
silenceAnimatedComponentDevCheck(animatedStyle);
|
|
534
|
+
return animatedStyle;
|
|
535
|
+
},
|
|
536
|
+
useAnimatedNumbersStyle(vals, getStyle) {
|
|
537
|
+
const instances = vals.map((v) => v.getInstance());
|
|
538
|
+
const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
|
|
539
|
+
"worklet";
|
|
540
|
+
const currentValues = instances.map((inst) => inst.value);
|
|
541
|
+
return getStyle(...currentValues);
|
|
542
|
+
}, import_core.isWeb ? [getStyle, ...instances] : void 0);
|
|
543
|
+
silenceAnimatedComponentDevCheck(animatedStyle);
|
|
544
|
+
return animatedStyle;
|
|
545
|
+
},
|
|
546
|
+
useAnimations(animationProps) {
|
|
547
|
+
const { props, presence, style, componentState, useStyleEmitter, themeName, stateRef, styleState, onTransition } = animationProps;
|
|
548
|
+
const isHydrating = componentState.unmounted === true;
|
|
549
|
+
const isMounting = componentState.unmounted === "should-enter";
|
|
550
|
+
const isEntering = !!componentState.unmounted;
|
|
551
|
+
const isExiting = presence?.[0] === false;
|
|
552
|
+
const wasEnteringRef = (0, import_react.useRef)(isEntering);
|
|
553
|
+
const justFinishedEntering = wasEnteringRef.current && !isEntering;
|
|
554
|
+
import_react.default.useEffect(() => {
|
|
555
|
+
wasEnteringRef.current = isEntering;
|
|
556
|
+
});
|
|
557
|
+
const effectiveTransition = styleState?.effectiveTransition ?? props.transition;
|
|
558
|
+
const animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
|
|
559
|
+
const resolvedTransition = (0, import_animation_helpers.forAnimationState)((0, import_animation_helpers.resolveTransition)(effectiveTransition, { animations }), animationState);
|
|
560
|
+
const disableAnimation = isHydrating || !(0, import_animation_helpers.hasTransition)(resolvedTransition);
|
|
561
|
+
const isDark = themeName?.startsWith("dark") || false;
|
|
562
|
+
const sendExitComplete = presence?.[1];
|
|
563
|
+
const onTransitionRef = (0, import_react.useRef)(onTransition);
|
|
564
|
+
onTransitionRef.current = onTransition;
|
|
565
|
+
const emit = (phase, cause, finished) => {
|
|
566
|
+
onTransitionRef.current?.(phase === "end" ? {
|
|
567
|
+
phase,
|
|
568
|
+
cause,
|
|
569
|
+
finished
|
|
570
|
+
} : {
|
|
571
|
+
phase,
|
|
572
|
+
cause
|
|
573
|
+
});
|
|
574
|
+
};
|
|
575
|
+
const enterStartedRef = (0, import_react.useRef)(false);
|
|
576
|
+
const exitStartedRef = (0, import_react.useRef)(false);
|
|
577
|
+
const updateStartedRef = (0, import_react.useRef)(false);
|
|
578
|
+
const isExitingJSRef = (0, import_react.useRef)(false);
|
|
579
|
+
isExitingJSRef.current = isExiting;
|
|
580
|
+
const updateCycleIdRef = (0, import_react.useRef)(0);
|
|
581
|
+
const pendingUpdateKeysRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
|
|
582
|
+
const updateCompletedRef = (0, import_react.useRef)(false);
|
|
583
|
+
const isCompletingUpdateRef = (0, import_react_native_reanimated.useSharedValue)(false);
|
|
584
|
+
const updateCycleIdShared = (0, import_react_native_reanimated.useSharedValue)(0);
|
|
585
|
+
const updateInterruptedRef = (0, import_react.useRef)(false);
|
|
586
|
+
const markUpdateKeyDone = (0, import_core.useEvent)((key, cycleId, finished) => {
|
|
587
|
+
if (cycleId !== updateCycleIdRef.current) return;
|
|
588
|
+
if (updateCompletedRef.current) return;
|
|
589
|
+
if (!finished) updateInterruptedRef.current = true;
|
|
590
|
+
pendingUpdateKeysRef.current.delete(key);
|
|
591
|
+
if (pendingUpdateKeysRef.current.size === 0) {
|
|
592
|
+
updateCompletedRef.current = true;
|
|
593
|
+
isCompletingUpdateRef.value = false;
|
|
594
|
+
if (updateStartedRef.current) {
|
|
595
|
+
updateStartedRef.current = false;
|
|
596
|
+
emit("end", "update", !updateInterruptedRef.current);
|
|
597
|
+
}
|
|
598
|
+
}
|
|
599
|
+
});
|
|
600
|
+
const exitCycleIdRef = (0, import_react.useRef)(0);
|
|
601
|
+
const pendingExitKeysRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
|
|
602
|
+
const exitCompletedRef = (0, import_react.useRef)(false);
|
|
603
|
+
const wasExitingRef = (0, import_react.useRef)(false);
|
|
604
|
+
const justStartedExiting = isExiting && !wasExitingRef.current;
|
|
605
|
+
const justStoppedExiting = !isExiting && wasExitingRef.current;
|
|
606
|
+
const markExitKeyDone = (0, import_core.useEvent)((key, cycleId, finished) => {
|
|
607
|
+
if (cycleId !== exitCycleIdRef.current) return;
|
|
608
|
+
if (exitCompletedRef.current) return;
|
|
609
|
+
pendingExitKeysRef.current.delete(key);
|
|
610
|
+
if (pendingExitKeysRef.current.size === 0) {
|
|
611
|
+
exitCompletedRef.current = true;
|
|
612
|
+
if (exitStartedRef.current) {
|
|
613
|
+
exitStartedRef.current = false;
|
|
614
|
+
emit("end", "exit", true);
|
|
615
|
+
}
|
|
616
|
+
sendExitComplete?.();
|
|
617
|
+
}
|
|
618
|
+
});
|
|
619
|
+
const enterCycleIdRef = (0, import_react.useRef)(0);
|
|
620
|
+
const pendingEnterKeysRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
|
|
621
|
+
const enterCompletedRef = (0, import_react.useRef)(false);
|
|
622
|
+
const markEnterKeyDone = (0, import_core.useEvent)((key, cycleId) => {
|
|
623
|
+
if (cycleId !== enterCycleIdRef.current) return;
|
|
624
|
+
if (enterCompletedRef.current) return;
|
|
625
|
+
if (isExitingJSRef.current) return;
|
|
626
|
+
pendingEnterKeysRef.current.delete(key);
|
|
627
|
+
if (pendingEnterKeysRef.current.size === 0) {
|
|
628
|
+
enterCompletedRef.current = true;
|
|
629
|
+
if (enterStartedRef.current) {
|
|
630
|
+
enterStartedRef.current = false;
|
|
631
|
+
emit("end", "enter", true);
|
|
632
|
+
}
|
|
633
|
+
}
|
|
634
|
+
});
|
|
635
|
+
const isExitingRef = (0, import_react_native_reanimated.useSharedValue)(isExiting);
|
|
636
|
+
const exitCycleIdShared = (0, import_react_native_reanimated.useSharedValue)(exitCycleIdRef.current);
|
|
637
|
+
const isCompletingEnterRef = (0, import_react_native_reanimated.useSharedValue)(false);
|
|
638
|
+
const enterCycleIdShared = (0, import_react_native_reanimated.useSharedValue)(enterCycleIdRef.current);
|
|
639
|
+
if (justStartedExiting) {
|
|
640
|
+
exitCycleIdRef.current++;
|
|
641
|
+
exitCompletedRef.current = false;
|
|
642
|
+
pendingExitKeysRef.current.clear();
|
|
643
|
+
enterCycleIdRef.current++;
|
|
644
|
+
pendingEnterKeysRef.current.clear();
|
|
645
|
+
updateCycleIdRef.current++;
|
|
646
|
+
pendingUpdateKeysRef.current.clear();
|
|
647
|
+
updateCompletedRef.current = true;
|
|
648
|
+
}
|
|
649
|
+
if (justStoppedExiting) {
|
|
650
|
+
exitCycleIdRef.current++;
|
|
651
|
+
pendingExitKeysRef.current.clear();
|
|
652
|
+
}
|
|
653
|
+
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
654
|
+
isExitingRef.value = isExiting;
|
|
655
|
+
exitCycleIdShared.value = exitCycleIdRef.current;
|
|
656
|
+
isCompletingEnterRef.value = !isExiting && justFinishedEntering && Boolean(onTransitionRef.current);
|
|
657
|
+
enterCycleIdShared.value = enterCycleIdRef.current;
|
|
658
|
+
if (justStartedExiting) {
|
|
659
|
+
isCompletingUpdateRef.value = false;
|
|
660
|
+
updateCycleIdShared.value = updateCycleIdRef.current;
|
|
661
|
+
}
|
|
662
|
+
}, [
|
|
663
|
+
isExiting,
|
|
664
|
+
justFinishedEntering,
|
|
665
|
+
exitCycleIdRef.current,
|
|
666
|
+
enterCycleIdRef.current,
|
|
667
|
+
justStartedExiting
|
|
668
|
+
]);
|
|
669
|
+
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
670
|
+
if (justStoppedExiting && exitStartedRef.current && !exitCompletedRef.current) {
|
|
671
|
+
exitStartedRef.current = false;
|
|
672
|
+
emit("end", "exit", false);
|
|
673
|
+
}
|
|
674
|
+
}, [justStoppedExiting]);
|
|
675
|
+
import_react.default.useEffect(() => {
|
|
676
|
+
wasExitingRef.current = isExiting;
|
|
677
|
+
});
|
|
678
|
+
const committedRenderKeysRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
|
|
679
|
+
const lastPaintedRef = (0, import_react.useRef)({});
|
|
680
|
+
const carryRef = (0, import_react.useRef)({});
|
|
681
|
+
const { animatedStyles, staticStyles, nextCarry } = (0, import_react.useMemo)(() => {
|
|
682
|
+
const { animated, statics } = splitAnimationStyles(style, isDark, disableAnimation);
|
|
683
|
+
const nextCarry2 = cloneStyleRecord(carryRef.current);
|
|
684
|
+
for (const key in nextCarry2) {
|
|
685
|
+
if (!(key in animated)) delete nextCarry2[key];
|
|
686
|
+
}
|
|
687
|
+
for (const key in animated) {
|
|
688
|
+
if (!(key in nextCarry2)) {
|
|
689
|
+
nextCarry2[key] = cloneAnimationValue(animated[key]);
|
|
690
|
+
}
|
|
691
|
+
statics[key] = nextCarry2[key];
|
|
692
|
+
}
|
|
693
|
+
return {
|
|
694
|
+
animatedStyles: animated,
|
|
695
|
+
staticStyles: statics,
|
|
696
|
+
nextCarry: nextCarry2
|
|
697
|
+
};
|
|
698
|
+
}, [
|
|
699
|
+
disableAnimation,
|
|
700
|
+
style,
|
|
701
|
+
isDark
|
|
702
|
+
]);
|
|
703
|
+
const renderSnapshot = (0, import_react.useMemo)(() => buildSnapshot(animatedStyles, staticStyles, getAnimatedTransforms(animatedStyles.transform), committedRenderKeysRef.current, lastPaintedRef.current), [animatedStyles, staticStyles]);
|
|
704
|
+
const renderSnapshotRef = (0, import_react_native_reanimated.useSharedValue)({
|
|
705
|
+
animated: {},
|
|
706
|
+
statics: {},
|
|
707
|
+
transforms: [],
|
|
708
|
+
gatedKeys: {},
|
|
709
|
+
seeds: {},
|
|
710
|
+
removedKeys: {},
|
|
711
|
+
removeTransform: false,
|
|
712
|
+
clearValue: import_core.isWeb ? "" : null
|
|
713
|
+
});
|
|
714
|
+
const emitterSnapshotRef = (0, import_react_native_reanimated.useSharedValue)(null);
|
|
715
|
+
const emitterKeysRef = (0, import_react.useRef)(null);
|
|
716
|
+
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
717
|
+
carryRef.current = nextCarry;
|
|
718
|
+
committedRenderKeysRef.current = renderSnapshot.keys;
|
|
719
|
+
lastPaintedRef.current = renderSnapshot.painted;
|
|
720
|
+
}, [nextCarry, renderSnapshot]);
|
|
721
|
+
const pseudoActiveRef = (0, import_react.useRef)(false);
|
|
722
|
+
const publishedSnapshotRef = (0, import_react.useRef)(null);
|
|
723
|
+
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
724
|
+
const renderChanged = publishedSnapshotRef.current !== renderSnapshot.value;
|
|
725
|
+
const droppingLatch = (isExiting || !pseudoActiveRef.current && publishedSnapshotRef.current !== null && renderChanged) && emitterSnapshotRef.value !== null;
|
|
726
|
+
const emitterKeys = droppingLatch ? emitterKeysRef.current : null;
|
|
727
|
+
if (droppingLatch || renderChanged) {
|
|
728
|
+
const removedKeys = emitterKeys ? {
|
|
729
|
+
...renderSnapshot.value.removedKeys,
|
|
730
|
+
...getRemovedAnimatedKeys(renderSnapshot.keys, emitterKeys)
|
|
731
|
+
} : renderSnapshot.value.removedKeys;
|
|
732
|
+
renderSnapshotRef.value = {
|
|
733
|
+
...renderSnapshot.value,
|
|
734
|
+
removedKeys,
|
|
735
|
+
removeTransform: Object.keys(removedKeys).some((key) => key.startsWith("transform:"))
|
|
736
|
+
};
|
|
737
|
+
publishedSnapshotRef.current = renderSnapshot.value;
|
|
738
|
+
}
|
|
739
|
+
if (droppingLatch) {
|
|
740
|
+
emitterSnapshotRef.value = null;
|
|
741
|
+
emitterKeysRef.current = null;
|
|
742
|
+
}
|
|
743
|
+
});
|
|
744
|
+
const { baseConfig, propertyConfigs } = (0, import_react.useMemo)(() => {
|
|
745
|
+
if (isHydrating) {
|
|
746
|
+
return {
|
|
747
|
+
baseConfig: {
|
|
748
|
+
type: "timing",
|
|
749
|
+
duration: 0
|
|
750
|
+
},
|
|
751
|
+
propertyConfigs: {}
|
|
752
|
+
};
|
|
753
|
+
}
|
|
754
|
+
return buildTransitionConfig(effectiveTransition, animations, animationState, getStyleKeys(animatedStyles));
|
|
755
|
+
}, [
|
|
756
|
+
isHydrating,
|
|
757
|
+
effectiveTransition,
|
|
758
|
+
animatedStyles,
|
|
759
|
+
animationState
|
|
760
|
+
]);
|
|
761
|
+
const configRef = (0, import_react_native_reanimated.useSharedValue)({
|
|
762
|
+
baseConfig,
|
|
763
|
+
propertyConfigs,
|
|
764
|
+
disableAnimation,
|
|
765
|
+
isHydrating
|
|
766
|
+
});
|
|
767
|
+
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
768
|
+
configRef.value = {
|
|
769
|
+
baseConfig,
|
|
770
|
+
propertyConfigs,
|
|
771
|
+
disableAnimation,
|
|
772
|
+
isHydrating
|
|
773
|
+
};
|
|
774
|
+
}, [
|
|
775
|
+
baseConfig,
|
|
776
|
+
propertyConfigs,
|
|
777
|
+
disableAnimation,
|
|
778
|
+
isHydrating
|
|
779
|
+
]);
|
|
780
|
+
useStyleEmitter?.((nextStyle, effectiveTransition2, pseudoActive) => {
|
|
781
|
+
if (isExitingJSRef.current) return;
|
|
782
|
+
pseudoActiveRef.current = pseudoActive === true;
|
|
783
|
+
const transitionToUse = effectiveTransition2 ?? props.transition;
|
|
784
|
+
const { baseConfig: newBase, propertyConfigs: newPropertyConfigs } = buildTransitionConfig(transitionToUse, animations, animationState, getStyleKeys(nextStyle));
|
|
785
|
+
configRef.value = {
|
|
786
|
+
baseConfig: newBase,
|
|
787
|
+
propertyConfigs: newPropertyConfigs,
|
|
788
|
+
disableAnimation: configRef.value.disableAnimation,
|
|
789
|
+
isHydrating: configRef.value.isHydrating
|
|
790
|
+
};
|
|
791
|
+
const previousKeys = emitterKeysRef.current ?? committedRenderKeysRef.current;
|
|
792
|
+
const { animated, statics } = splitAnimationStyles(nextStyle, isDark, configRef.value.disableAnimation);
|
|
793
|
+
const snapshot = buildSnapshot(animated, statics, getAnimatedTransforms(animated.transform), previousKeys, lastPaintedRef.current);
|
|
794
|
+
emitterSnapshotRef.value = snapshot.value;
|
|
795
|
+
emitterKeysRef.current = snapshot.keys;
|
|
796
|
+
lastPaintedRef.current = snapshot.painted;
|
|
797
|
+
if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
|
|
798
|
+
console.info("[animations-reanimated] useStyleEmitter update", {
|
|
799
|
+
animated,
|
|
800
|
+
statics,
|
|
801
|
+
transforms: snapshot.value.transforms
|
|
802
|
+
});
|
|
803
|
+
}
|
|
804
|
+
});
|
|
805
|
+
const exitKeysRegistered = (0, import_react.useRef)(false);
|
|
806
|
+
const enterKeysRegistered = (0, import_react.useRef)(false);
|
|
807
|
+
if (!isExiting && justFinishedEntering && onTransition) {
|
|
808
|
+
const enterKeys = getGatedKeys(renderSnapshot.value);
|
|
809
|
+
enterCycleIdRef.current++;
|
|
810
|
+
enterCompletedRef.current = false;
|
|
811
|
+
pendingEnterKeysRef.current = new Set(enterKeys);
|
|
812
|
+
enterKeysRegistered.current = enterKeys.length > 0;
|
|
813
|
+
}
|
|
814
|
+
if (justStartedExiting && sendExitComplete) {
|
|
815
|
+
const exitKeys = getGatedKeys(renderSnapshot.value);
|
|
816
|
+
pendingExitKeysRef.current = new Set(exitKeys);
|
|
817
|
+
exitKeysRegistered.current = exitKeys.length > 0;
|
|
818
|
+
}
|
|
819
|
+
const previousUpdateStyleRef = (0, import_react.useRef)(null);
|
|
820
|
+
const updateStyle = onTransition ? JSON.stringify(style) : null;
|
|
821
|
+
const previousUpdateStyle = previousUpdateStyleRef.current;
|
|
822
|
+
const shouldRegisterUpdate = updateStyle !== null && previousUpdateStyle !== null && previousUpdateStyle !== updateStyle && !isExiting && !isEntering && !justFinishedEntering;
|
|
823
|
+
const updateKeys = shouldRegisterUpdate ? getGatedKeys(renderSnapshot.value) : [];
|
|
824
|
+
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
825
|
+
if (updateStyle === null) {
|
|
826
|
+
previousUpdateStyleRef.current = null;
|
|
827
|
+
isCompletingUpdateRef.value = false;
|
|
828
|
+
return;
|
|
829
|
+
}
|
|
830
|
+
const previousStyleStillCurrent = previousUpdateStyleRef.current === previousUpdateStyle;
|
|
831
|
+
previousUpdateStyleRef.current = updateStyle;
|
|
832
|
+
if (!shouldRegisterUpdate || !previousStyleStillCurrent) return;
|
|
833
|
+
const cycleId = ++updateCycleIdRef.current;
|
|
834
|
+
pendingUpdateKeysRef.current = new Set(updateKeys);
|
|
835
|
+
updateInterruptedRef.current = false;
|
|
836
|
+
updateCompletedRef.current = updateKeys.length === 0;
|
|
837
|
+
isCompletingUpdateRef.value = updateKeys.length > 0;
|
|
838
|
+
updateCycleIdShared.value = cycleId;
|
|
839
|
+
if (updateStartedRef.current) {
|
|
840
|
+
emit("end", "update", false);
|
|
841
|
+
}
|
|
842
|
+
updateStartedRef.current = true;
|
|
843
|
+
emit("start", "update");
|
|
844
|
+
if (updateKeys.length === 0) {
|
|
845
|
+
updateStartedRef.current = false;
|
|
846
|
+
emit("end", "update", true);
|
|
847
|
+
}
|
|
848
|
+
}, [updateStyle, shouldRegisterUpdate]);
|
|
849
|
+
import_react.default.useEffect(() => {
|
|
850
|
+
if (!justStartedExiting || !sendExitComplete) return;
|
|
851
|
+
if (enterStartedRef.current) {
|
|
852
|
+
enterStartedRef.current = false;
|
|
853
|
+
emit("end", "enter", false);
|
|
854
|
+
}
|
|
855
|
+
if (updateStartedRef.current) {
|
|
856
|
+
updateStartedRef.current = false;
|
|
857
|
+
emit("end", "update", false);
|
|
858
|
+
}
|
|
859
|
+
if (onTransitionRef.current && !exitStartedRef.current) {
|
|
860
|
+
exitStartedRef.current = true;
|
|
861
|
+
emit("start", "exit");
|
|
862
|
+
}
|
|
863
|
+
if (!exitKeysRegistered.current && pendingExitKeysRef.current.size === 0) {
|
|
864
|
+
if (!exitCompletedRef.current) {
|
|
865
|
+
exitCompletedRef.current = true;
|
|
866
|
+
if (exitStartedRef.current) {
|
|
867
|
+
exitStartedRef.current = false;
|
|
868
|
+
emit("end", "exit", true);
|
|
869
|
+
}
|
|
870
|
+
sendExitComplete();
|
|
871
|
+
}
|
|
872
|
+
}
|
|
873
|
+
}, [justStartedExiting, sendExitComplete]);
|
|
874
|
+
import_react.default.useEffect(() => {
|
|
875
|
+
if (isExiting || !justFinishedEntering || !onTransition) return;
|
|
876
|
+
if (!enterStartedRef.current) {
|
|
877
|
+
enterStartedRef.current = true;
|
|
878
|
+
emit("start", "enter");
|
|
879
|
+
}
|
|
880
|
+
if (!enterKeysRegistered.current && pendingEnterKeysRef.current.size === 0) {
|
|
881
|
+
if (!enterCompletedRef.current) {
|
|
882
|
+
enterCompletedRef.current = true;
|
|
883
|
+
if (enterStartedRef.current) {
|
|
884
|
+
enterStartedRef.current = false;
|
|
885
|
+
emit("end", "enter", true);
|
|
886
|
+
}
|
|
887
|
+
}
|
|
888
|
+
}
|
|
889
|
+
}, [
|
|
890
|
+
isExiting,
|
|
891
|
+
justFinishedEntering,
|
|
892
|
+
onTransition
|
|
893
|
+
]);
|
|
894
|
+
const mapperStateRef = (0, import_react_native_reanimated.useSharedValue)({ emitted: {} });
|
|
895
|
+
const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
|
|
896
|
+
"worklet";
|
|
897
|
+
const mapperState = mapperStateRef.value;
|
|
898
|
+
const config = configRef.value;
|
|
899
|
+
if (config.disableAnimation || config.isHydrating) {
|
|
900
|
+
updateMapperState(mapperStateRef, {});
|
|
901
|
+
return {};
|
|
902
|
+
}
|
|
903
|
+
const previouslyEmitted = mapperState.emitted;
|
|
904
|
+
const emitted = {};
|
|
905
|
+
const result = {};
|
|
906
|
+
const emitterSnapshot = emitterSnapshotRef.value;
|
|
907
|
+
const snapshot = emitterSnapshot ?? renderSnapshotRef.value;
|
|
908
|
+
const animatedValues = snapshot.animated;
|
|
909
|
+
const staticValues = snapshot.statics;
|
|
910
|
+
const currentlyExiting = isExitingRef.value;
|
|
911
|
+
const currentCycleId = exitCycleIdShared.value;
|
|
912
|
+
const currentlyCompletingEnter = isCompletingEnterRef.value;
|
|
913
|
+
const currentEnterCycleId = enterCycleIdShared.value;
|
|
914
|
+
const currentlyCompletingUpdate = isCompletingUpdateRef.value;
|
|
915
|
+
const currentUpdateCycleId = updateCycleIdShared.value;
|
|
916
|
+
for (const key in staticValues) {
|
|
917
|
+
result[key] = staticValues[key];
|
|
918
|
+
}
|
|
919
|
+
for (const key in snapshot.removedKeys) {
|
|
920
|
+
if (!key.startsWith("transform:") && !(key in staticValues)) {
|
|
921
|
+
result[key] = snapshot.clearValue;
|
|
922
|
+
}
|
|
923
|
+
}
|
|
924
|
+
for (const key in animatedValues) {
|
|
925
|
+
if (key === "transform") continue;
|
|
926
|
+
const targetValue = animatedValues[key];
|
|
927
|
+
emitted[key] = true;
|
|
928
|
+
if (typeof targetValue !== "number" && typeof targetValue !== "string") {
|
|
929
|
+
result[key] = targetValue;
|
|
930
|
+
continue;
|
|
931
|
+
}
|
|
932
|
+
result[key] = animateSnapshotValue(key, key, targetValue, config.propertyConfigs[key] ?? config.baseConfig, !!previouslyEmitted[key], snapshot.seeds[key], !!snapshot.gatedKeys[key], currentlyExiting, currentCycleId, currentlyCompletingEnter, currentEnterCycleId, currentlyCompletingUpdate, currentUpdateCycleId, markExitKeyDone, markEnterKeyDone, markUpdateKeyDone, !!COLOR_STYLE_KEYS[key]);
|
|
933
|
+
}
|
|
934
|
+
const transforms = snapshot.transforms;
|
|
935
|
+
if (transforms.length > 0 || snapshot.removeTransform) {
|
|
936
|
+
const validTransforms = [];
|
|
937
|
+
for (const t of transforms) {
|
|
938
|
+
if (!t) continue;
|
|
939
|
+
const keys = Object.keys(t);
|
|
940
|
+
if (keys.length === 0) continue;
|
|
941
|
+
const transformKey = keys[0];
|
|
942
|
+
const value = t[transformKey];
|
|
943
|
+
if (typeof value === "number" || typeof value === "string") {
|
|
944
|
+
const propConfig = config.propertyConfigs[transformKey] ?? config.baseConfig;
|
|
945
|
+
const subKey = `transform:${transformKey}`;
|
|
946
|
+
emitted[subKey] = true;
|
|
947
|
+
validTransforms.push({ [transformKey]: animateSnapshotValue(subKey, transformKey, value, propConfig, !!previouslyEmitted[subKey], snapshot.seeds[subKey], !!snapshot.gatedKeys[subKey], currentlyExiting, currentCycleId, currentlyCompletingEnter, currentEnterCycleId, currentlyCompletingUpdate, currentUpdateCycleId, markExitKeyDone, markEnterKeyDone, markUpdateKeyDone) });
|
|
948
|
+
} else {
|
|
949
|
+
validTransforms.push(t);
|
|
950
|
+
}
|
|
951
|
+
}
|
|
952
|
+
if (validTransforms.length > 0 || !("transform" in staticValues)) {
|
|
953
|
+
result.transform = validTransforms;
|
|
954
|
+
}
|
|
955
|
+
}
|
|
956
|
+
updateMapperState(mapperStateRef, emitted);
|
|
957
|
+
return result;
|
|
958
|
+
}, import_core.isWeb ? [
|
|
959
|
+
renderSnapshotRef,
|
|
960
|
+
emitterSnapshotRef,
|
|
961
|
+
configRef,
|
|
962
|
+
isExitingRef,
|
|
963
|
+
exitCycleIdShared,
|
|
964
|
+
markExitKeyDone,
|
|
965
|
+
isCompletingEnterRef,
|
|
966
|
+
enterCycleIdShared,
|
|
967
|
+
markEnterKeyDone,
|
|
968
|
+
isCompletingUpdateRef,
|
|
969
|
+
updateCycleIdShared,
|
|
970
|
+
markUpdateKeyDone
|
|
971
|
+
] : void 0);
|
|
972
|
+
silenceAnimatedComponentDevCheck(animatedStyle);
|
|
973
|
+
if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
|
|
974
|
+
console.info("[animations-reanimated] useAnimations", {
|
|
975
|
+
resolvedTransition,
|
|
976
|
+
componentState,
|
|
977
|
+
isExiting,
|
|
978
|
+
animatedStyles,
|
|
979
|
+
staticStyles,
|
|
980
|
+
baseConfig,
|
|
981
|
+
propertyConfigs
|
|
982
|
+
});
|
|
983
|
+
}
|
|
984
|
+
return { style: [staticStyles, animatedStyle] };
|
|
985
|
+
}
|
|
986
|
+
};
|
|
496
987
|
}
|
|
497
|
-
function createAnimations(animationsConfig) {
|
|
498
|
-
const animations = {};
|
|
499
|
-
for (const key in animationsConfig) {
|
|
500
|
-
animations[key] = cloneTransitionConfig({
|
|
501
|
-
type: "spring",
|
|
502
|
-
...animationsConfig[key]
|
|
503
|
-
});
|
|
504
|
-
}
|
|
505
|
-
return {
|
|
506
|
-
needsCustomComponent: true,
|
|
507
|
-
View: import_core.isWeb ? AnimatedView : Animated.View,
|
|
508
|
-
Text: import_core.isWeb ? AnimatedText : Animated.Text,
|
|
509
|
-
isReactNative: true,
|
|
510
|
-
inputStyle: "value",
|
|
511
|
-
outputStyle: "inline",
|
|
512
|
-
avoidReRenders: true,
|
|
513
|
-
animations,
|
|
514
|
-
usePresence: import_use_presence.usePresence,
|
|
515
|
-
ResetPresence: import_use_presence.ResetPresence,
|
|
516
|
-
// =========================================================================
|
|
517
|
-
// useAnimatedNumber - For imperative animated values
|
|
518
|
-
// =========================================================================
|
|
519
|
-
useAnimatedNumber(initial) {
|
|
520
|
-
const sharedValue = (0, import_react_native_reanimated.useSharedValue)(initial);
|
|
521
|
-
return (0, import_react.useMemo)(() => ({
|
|
522
|
-
getInstance() {
|
|
523
|
-
"worklet";
|
|
524
|
-
|
|
525
|
-
return sharedValue;
|
|
526
|
-
},
|
|
527
|
-
getValue() {
|
|
528
|
-
"worklet";
|
|
529
|
-
|
|
530
|
-
return sharedValue.value;
|
|
531
|
-
},
|
|
532
|
-
setValue(next, config = {
|
|
533
|
-
type: "spring"
|
|
534
|
-
}, onFinish) {
|
|
535
|
-
if (config.type === "direct") {
|
|
536
|
-
sharedValue.value = next;
|
|
537
|
-
onFinish?.();
|
|
538
|
-
} else {
|
|
539
|
-
const cb = onFinish ? finished => {
|
|
540
|
-
"worklet";
|
|
541
|
-
|
|
542
|
-
if (finished !== false) {
|
|
543
|
-
(0, import_react_native_reanimated.runOnJS)(onFinish)();
|
|
544
|
-
}
|
|
545
|
-
} : void 0;
|
|
546
|
-
const animationConfig = cloneTransitionConfig(config);
|
|
547
|
-
if (import_core.isWeb) {
|
|
548
|
-
sharedValue.value = applyAnimation(next, animationConfig, cb);
|
|
549
|
-
} else {
|
|
550
|
-
(0, import_react_native_reanimated.runOnUI)((targetValue, animationConfig2) => {
|
|
551
|
-
"worklet";
|
|
552
|
-
|
|
553
|
-
sharedValue.value = applyAnimation(targetValue, animationConfig2, cb);
|
|
554
|
-
})(next, animationConfig);
|
|
555
|
-
}
|
|
556
|
-
}
|
|
557
|
-
},
|
|
558
|
-
stop() {
|
|
559
|
-
(0, import_react_native_reanimated.cancelAnimation)(sharedValue);
|
|
560
|
-
}
|
|
561
|
-
}), [sharedValue]);
|
|
562
|
-
},
|
|
563
|
-
// =========================================================================
|
|
564
|
-
// useAnimatedNumberReaction - React to animated value changes
|
|
565
|
-
// =========================================================================
|
|
566
|
-
useAnimatedNumberReaction({
|
|
567
|
-
value
|
|
568
|
-
}, onValue) {
|
|
569
|
-
const instance = value.getInstance();
|
|
570
|
-
return (0, import_react_native_reanimated.useAnimatedReaction)(() => instance.value, (next, prev) => {
|
|
571
|
-
if (prev !== next) {
|
|
572
|
-
(0, import_react_native_reanimated.runOnJS)(onValue)(next);
|
|
573
|
-
}
|
|
574
|
-
}, [onValue, instance]);
|
|
575
|
-
},
|
|
576
|
-
// =========================================================================
|
|
577
|
-
// useAnimatedNumberStyle - Create animated styles from values
|
|
578
|
-
// =========================================================================
|
|
579
|
-
useAnimatedNumberStyle(val, getStyle) {
|
|
580
|
-
const instance = val.getInstance();
|
|
581
|
-
if (import_core.isWeb) {
|
|
582
|
-
return (0, import_react_native_reanimated.useAnimatedStyle)(() => {
|
|
583
|
-
"worklet";
|
|
584
|
-
|
|
585
|
-
return getStyle(instance.value);
|
|
586
|
-
}, [instance, getStyle]);
|
|
587
|
-
}
|
|
588
|
-
const styleVal = (0, import_react_native_reanimated.useDerivedValue)(() => {
|
|
589
|
-
"worklet";
|
|
590
|
-
|
|
591
|
-
return getStyle(instance.value);
|
|
592
|
-
});
|
|
593
|
-
const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
|
|
594
|
-
"worklet";
|
|
595
|
-
|
|
596
|
-
return styleVal.value;
|
|
597
|
-
});
|
|
598
|
-
silenceAnimatedComponentDevCheck(animatedStyle);
|
|
599
|
-
return animatedStyle;
|
|
600
|
-
},
|
|
601
|
-
useAnimatedNumbersStyle(vals, getStyle) {
|
|
602
|
-
const instances = vals.map(v => v.getInstance());
|
|
603
|
-
const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
|
|
604
|
-
"worklet";
|
|
605
|
-
|
|
606
|
-
const currentValues = instances.map(inst => inst.value);
|
|
607
|
-
return getStyle(...currentValues);
|
|
608
|
-
}, import_core.isWeb ? [getStyle, ...instances] : void 0);
|
|
609
|
-
silenceAnimatedComponentDevCheck(animatedStyle);
|
|
610
|
-
return animatedStyle;
|
|
611
|
-
},
|
|
612
|
-
// =========================================================================
|
|
613
|
-
// useAnimations - Main animation hook for components
|
|
614
|
-
// =========================================================================
|
|
615
|
-
useAnimations(animationProps) {
|
|
616
|
-
const {
|
|
617
|
-
props,
|
|
618
|
-
presence,
|
|
619
|
-
style,
|
|
620
|
-
componentState,
|
|
621
|
-
useStyleEmitter,
|
|
622
|
-
themeName,
|
|
623
|
-
stateRef,
|
|
624
|
-
styleState,
|
|
625
|
-
onDidAnimate
|
|
626
|
-
} = animationProps;
|
|
627
|
-
const isHydrating = componentState.unmounted === true;
|
|
628
|
-
const isMounting = componentState.unmounted === "should-enter";
|
|
629
|
-
const isEntering = !!componentState.unmounted;
|
|
630
|
-
const isExiting = presence?.[0] === false;
|
|
631
|
-
const wasEnteringRef = (0, import_react.useRef)(isEntering);
|
|
632
|
-
const justFinishedEntering = wasEnteringRef.current && !isEntering;
|
|
633
|
-
import_react.default.useEffect(() => {
|
|
634
|
-
wasEnteringRef.current = isEntering;
|
|
635
|
-
});
|
|
636
|
-
const effectiveTransition = styleState?.effectiveTransition ?? props.transition;
|
|
637
|
-
const normalized = (0, import_animation_helpers.normalizeTransition)(effectiveTransition);
|
|
638
|
-
const animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
|
|
639
|
-
const animationKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
|
|
640
|
-
const disableAnimation = isHydrating || !animationKey;
|
|
641
|
-
const isDark = themeName?.startsWith("dark") || false;
|
|
642
|
-
const sendExitComplete = presence?.[1];
|
|
643
|
-
const onDidAnimateRef = (0, import_react.useRef)(onDidAnimate);
|
|
644
|
-
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
645
|
-
onDidAnimateRef.current = onDidAnimate;
|
|
646
|
-
}, [onDidAnimate]);
|
|
647
|
-
const didAnimateCycleIdRef = (0, import_react.useRef)(0);
|
|
648
|
-
const pendingDidAnimateKeysRef = (0, import_react.useRef)(/* @__PURE__ */new Set());
|
|
649
|
-
const didAnimateCompletedRef = (0, import_react.useRef)(false);
|
|
650
|
-
const isCompletingAnimationRef = (0, import_react_native_reanimated.useSharedValue)(false);
|
|
651
|
-
const didAnimateCycleIdShared = (0, import_react_native_reanimated.useSharedValue)(0);
|
|
652
|
-
const markDidAnimateKeyDone = (0, import_core.useEvent)((key, cycleId, finished) => {
|
|
653
|
-
if (!finished || cycleId !== didAnimateCycleIdRef.current) return;
|
|
654
|
-
if (didAnimateCompletedRef.current) return;
|
|
655
|
-
pendingDidAnimateKeysRef.current.delete(key);
|
|
656
|
-
if (pendingDidAnimateKeysRef.current.size === 0) {
|
|
657
|
-
didAnimateCompletedRef.current = true;
|
|
658
|
-
isCompletingAnimationRef.value = false;
|
|
659
|
-
onDidAnimateRef.current?.();
|
|
660
|
-
}
|
|
661
|
-
});
|
|
662
|
-
const exitCycleIdRef = (0, import_react.useRef)(0);
|
|
663
|
-
const pendingExitKeysRef = (0, import_react.useRef)(/* @__PURE__ */new Set());
|
|
664
|
-
const exitCompletedRef = (0, import_react.useRef)(false);
|
|
665
|
-
const wasExitingRef = (0, import_react.useRef)(false);
|
|
666
|
-
const justStartedExiting = isExiting && !wasExitingRef.current;
|
|
667
|
-
const justStoppedExiting = !isExiting && wasExitingRef.current;
|
|
668
|
-
const markExitKeyDone = (0, import_core.useEvent)((key, cycleId, finished) => {
|
|
669
|
-
if (cycleId !== exitCycleIdRef.current) return;
|
|
670
|
-
if (exitCompletedRef.current) return;
|
|
671
|
-
pendingExitKeysRef.current.delete(key);
|
|
672
|
-
if (pendingExitKeysRef.current.size === 0) {
|
|
673
|
-
exitCompletedRef.current = true;
|
|
674
|
-
sendExitComplete?.();
|
|
675
|
-
}
|
|
676
|
-
});
|
|
677
|
-
const isExitingRef = (0, import_react_native_reanimated.useSharedValue)(isExiting);
|
|
678
|
-
const exitCycleIdShared = (0, import_react_native_reanimated.useSharedValue)(exitCycleIdRef.current);
|
|
679
|
-
if (justStartedExiting) {
|
|
680
|
-
exitCycleIdRef.current++;
|
|
681
|
-
exitCompletedRef.current = false;
|
|
682
|
-
pendingExitKeysRef.current.clear();
|
|
683
|
-
didAnimateCycleIdRef.current++;
|
|
684
|
-
pendingDidAnimateKeysRef.current.clear();
|
|
685
|
-
didAnimateCompletedRef.current = true;
|
|
686
|
-
}
|
|
687
|
-
if (justStoppedExiting) {
|
|
688
|
-
exitCycleIdRef.current++;
|
|
689
|
-
pendingExitKeysRef.current.clear();
|
|
690
|
-
}
|
|
691
|
-
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
692
|
-
isExitingRef.value = isExiting;
|
|
693
|
-
exitCycleIdShared.value = exitCycleIdRef.current;
|
|
694
|
-
if (justStartedExiting) {
|
|
695
|
-
isCompletingAnimationRef.value = false;
|
|
696
|
-
didAnimateCycleIdShared.value = didAnimateCycleIdRef.current;
|
|
697
|
-
}
|
|
698
|
-
}, [isExiting, exitCycleIdRef.current, justStartedExiting]);
|
|
699
|
-
import_react.default.useEffect(() => {
|
|
700
|
-
wasExitingRef.current = isExiting;
|
|
701
|
-
});
|
|
702
|
-
const committedRenderKeysRef = (0, import_react.useRef)(/* @__PURE__ */new Set());
|
|
703
|
-
const lastPaintedRef = (0, import_react.useRef)({});
|
|
704
|
-
const carryRef = (0, import_react.useRef)({});
|
|
705
|
-
const {
|
|
706
|
-
animatedStyles,
|
|
707
|
-
staticStyles,
|
|
708
|
-
nextCarry
|
|
709
|
-
} = (0, import_react.useMemo)(() => {
|
|
710
|
-
const animateOnly = props.animateOnly;
|
|
711
|
-
const {
|
|
712
|
-
animated,
|
|
713
|
-
statics
|
|
714
|
-
} = splitAnimationStyles(style, isDark, disableAnimation, animateOnly);
|
|
715
|
-
const nextCarry2 = cloneStyleRecord(carryRef.current);
|
|
716
|
-
for (const key in nextCarry2) {
|
|
717
|
-
if (!(key in animated)) delete nextCarry2[key];
|
|
718
|
-
}
|
|
719
|
-
for (const key in animated) {
|
|
720
|
-
if (!(key in nextCarry2)) {
|
|
721
|
-
nextCarry2[key] = cloneAnimationValue(animated[key]);
|
|
722
|
-
}
|
|
723
|
-
statics[key] = nextCarry2[key];
|
|
724
|
-
}
|
|
725
|
-
return {
|
|
726
|
-
animatedStyles: animated,
|
|
727
|
-
staticStyles: statics,
|
|
728
|
-
nextCarry: nextCarry2
|
|
729
|
-
};
|
|
730
|
-
}, [disableAnimation, style, isDark, props.animateOnly]);
|
|
731
|
-
const renderSnapshot = (0, import_react.useMemo)(() => buildSnapshot(animatedStyles, staticStyles, getAnimatedTransforms(animatedStyles.transform), committedRenderKeysRef.current, lastPaintedRef.current), [animatedStyles, staticStyles]);
|
|
732
|
-
const renderSnapshotRef = (0, import_react_native_reanimated.useSharedValue)({
|
|
733
|
-
animated: {},
|
|
734
|
-
statics: {},
|
|
735
|
-
transforms: [],
|
|
736
|
-
gatedKeys: {},
|
|
737
|
-
seeds: {},
|
|
738
|
-
removedKeys: {},
|
|
739
|
-
removeTransform: false,
|
|
740
|
-
clearValue: import_core.isWeb ? "" : null
|
|
741
|
-
});
|
|
742
|
-
const emitterSnapshotRef = (0, import_react_native_reanimated.useSharedValue)(null);
|
|
743
|
-
const emitterKeysRef = (0, import_react.useRef)(null);
|
|
744
|
-
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
745
|
-
carryRef.current = nextCarry;
|
|
746
|
-
committedRenderKeysRef.current = renderSnapshot.keys;
|
|
747
|
-
lastPaintedRef.current = renderSnapshot.painted;
|
|
748
|
-
}, [nextCarry, renderSnapshot]);
|
|
749
|
-
const pseudoActiveRef = (0, import_react.useRef)(false);
|
|
750
|
-
const isExitingJSRef = (0, import_react.useRef)(false);
|
|
751
|
-
isExitingJSRef.current = isExiting;
|
|
752
|
-
const publishedSnapshotRef = (0, import_react.useRef)(null);
|
|
753
|
-
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
754
|
-
const droppingLatch = (isExiting || !pseudoActiveRef.current) && emitterSnapshotRef.value !== null;
|
|
755
|
-
const emitterKeys = droppingLatch ? emitterKeysRef.current : null;
|
|
756
|
-
if (droppingLatch || publishedSnapshotRef.current !== renderSnapshot.value) {
|
|
757
|
-
const removedKeys = emitterKeys ? {
|
|
758
|
-
...renderSnapshot.value.removedKeys,
|
|
759
|
-
...getRemovedAnimatedKeys(renderSnapshot.keys, emitterKeys)
|
|
760
|
-
} : renderSnapshot.value.removedKeys;
|
|
761
|
-
renderSnapshotRef.value = {
|
|
762
|
-
...renderSnapshot.value,
|
|
763
|
-
removedKeys,
|
|
764
|
-
removeTransform: Object.keys(removedKeys).some(key => key.startsWith("transform:"))
|
|
765
|
-
};
|
|
766
|
-
publishedSnapshotRef.current = renderSnapshot.value;
|
|
767
|
-
}
|
|
768
|
-
if (droppingLatch) {
|
|
769
|
-
emitterSnapshotRef.value = null;
|
|
770
|
-
emitterKeysRef.current = null;
|
|
771
|
-
}
|
|
772
|
-
});
|
|
773
|
-
const {
|
|
774
|
-
baseConfig,
|
|
775
|
-
propertyConfigs
|
|
776
|
-
} = (0, import_react.useMemo)(() => {
|
|
777
|
-
if (isHydrating) {
|
|
778
|
-
return {
|
|
779
|
-
baseConfig: {
|
|
780
|
-
type: "timing",
|
|
781
|
-
duration: 0
|
|
782
|
-
},
|
|
783
|
-
propertyConfigs: {}
|
|
784
|
-
};
|
|
785
|
-
}
|
|
786
|
-
return buildTransitionConfig(effectiveTransition, animations, animationState, getStyleKeys(animatedStyles));
|
|
787
|
-
}, [isHydrating, effectiveTransition, animatedStyles, animationState]);
|
|
788
|
-
const configRef = (0, import_react_native_reanimated.useSharedValue)({
|
|
789
|
-
baseConfig,
|
|
790
|
-
propertyConfigs,
|
|
791
|
-
disableAnimation,
|
|
792
|
-
isHydrating
|
|
793
|
-
});
|
|
794
|
-
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
795
|
-
configRef.value = {
|
|
796
|
-
baseConfig,
|
|
797
|
-
propertyConfigs,
|
|
798
|
-
disableAnimation,
|
|
799
|
-
isHydrating
|
|
800
|
-
};
|
|
801
|
-
}, [baseConfig, propertyConfigs, disableAnimation, isHydrating]);
|
|
802
|
-
useStyleEmitter?.((nextStyle, effectiveTransition2, pseudoActive) => {
|
|
803
|
-
if (isExitingJSRef.current) return;
|
|
804
|
-
pseudoActiveRef.current = pseudoActive === true;
|
|
805
|
-
const animateOnly = props.animateOnly;
|
|
806
|
-
const transitionToUse = effectiveTransition2 ?? props.transition;
|
|
807
|
-
const {
|
|
808
|
-
baseConfig: newBase,
|
|
809
|
-
propertyConfigs: newPropertyConfigs
|
|
810
|
-
} = buildTransitionConfig(transitionToUse, animations, animationState, getStyleKeys(nextStyle));
|
|
811
|
-
configRef.value = {
|
|
812
|
-
baseConfig: newBase,
|
|
813
|
-
propertyConfigs: newPropertyConfigs,
|
|
814
|
-
disableAnimation: configRef.value.disableAnimation,
|
|
815
|
-
isHydrating: configRef.value.isHydrating
|
|
816
|
-
};
|
|
817
|
-
const previousKeys = emitterKeysRef.current ?? committedRenderKeysRef.current;
|
|
818
|
-
const {
|
|
819
|
-
animated,
|
|
820
|
-
statics
|
|
821
|
-
} = splitAnimationStyles(nextStyle, isDark, configRef.value.disableAnimation, animateOnly);
|
|
822
|
-
const snapshot = buildSnapshot(animated, statics, getAnimatedTransforms(animated.transform), previousKeys, lastPaintedRef.current);
|
|
823
|
-
emitterSnapshotRef.value = snapshot.value;
|
|
824
|
-
emitterKeysRef.current = snapshot.keys;
|
|
825
|
-
lastPaintedRef.current = snapshot.painted;
|
|
826
|
-
if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
|
|
827
|
-
console.info("[animations-reanimated] useStyleEmitter update", {
|
|
828
|
-
animated,
|
|
829
|
-
statics,
|
|
830
|
-
transforms: snapshot.value.transforms
|
|
831
|
-
});
|
|
832
|
-
}
|
|
833
|
-
});
|
|
834
|
-
const exitKeysRegistered = (0, import_react.useRef)(false);
|
|
835
|
-
if (justStartedExiting && sendExitComplete) {
|
|
836
|
-
const exitKeys = getGatedKeys(renderSnapshot.value);
|
|
837
|
-
pendingExitKeysRef.current = new Set(exitKeys);
|
|
838
|
-
exitKeysRegistered.current = exitKeys.length > 0;
|
|
839
|
-
}
|
|
840
|
-
const previousDidAnimateStyleRef = (0, import_react.useRef)(null);
|
|
841
|
-
const didAnimateStyle = onDidAnimate ? JSON.stringify(style) : null;
|
|
842
|
-
const previousDidAnimateStyle = previousDidAnimateStyleRef.current;
|
|
843
|
-
const shouldRegisterDidAnimate = didAnimateStyle !== null && previousDidAnimateStyle !== null && previousDidAnimateStyle !== didAnimateStyle && !isExiting && !isEntering && !justFinishedEntering;
|
|
844
|
-
const didAnimateKeys = shouldRegisterDidAnimate ? getGatedKeys(renderSnapshot.value) : [];
|
|
845
|
-
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
846
|
-
if (didAnimateStyle === null) {
|
|
847
|
-
previousDidAnimateStyleRef.current = null;
|
|
848
|
-
isCompletingAnimationRef.value = false;
|
|
849
|
-
return;
|
|
850
|
-
}
|
|
851
|
-
const previousStyleStillCurrent = previousDidAnimateStyleRef.current === previousDidAnimateStyle;
|
|
852
|
-
previousDidAnimateStyleRef.current = didAnimateStyle;
|
|
853
|
-
if (!shouldRegisterDidAnimate || !previousStyleStillCurrent) return;
|
|
854
|
-
const cycleId = ++didAnimateCycleIdRef.current;
|
|
855
|
-
pendingDidAnimateKeysRef.current = new Set(didAnimateKeys);
|
|
856
|
-
didAnimateCompletedRef.current = didAnimateKeys.length === 0;
|
|
857
|
-
isCompletingAnimationRef.value = didAnimateKeys.length > 0;
|
|
858
|
-
didAnimateCycleIdShared.value = cycleId;
|
|
859
|
-
if (didAnimateKeys.length === 0) {
|
|
860
|
-
onDidAnimateRef.current?.();
|
|
861
|
-
}
|
|
862
|
-
}, [didAnimateStyle, shouldRegisterDidAnimate]);
|
|
863
|
-
import_react.default.useEffect(() => {
|
|
864
|
-
if (!justStartedExiting || !sendExitComplete) return;
|
|
865
|
-
if (!exitKeysRegistered.current && pendingExitKeysRef.current.size === 0) {
|
|
866
|
-
if (!exitCompletedRef.current) {
|
|
867
|
-
exitCompletedRef.current = true;
|
|
868
|
-
sendExitComplete();
|
|
869
|
-
}
|
|
870
|
-
}
|
|
871
|
-
}, [justStartedExiting, sendExitComplete]);
|
|
872
|
-
const mapperStateRef = (0, import_react_native_reanimated.useSharedValue)({
|
|
873
|
-
emitted: {}
|
|
874
|
-
});
|
|
875
|
-
const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
|
|
876
|
-
"worklet";
|
|
877
|
-
|
|
878
|
-
const mapperState = mapperStateRef.value;
|
|
879
|
-
const config = configRef.value;
|
|
880
|
-
if (config.disableAnimation || config.isHydrating) {
|
|
881
|
-
updateMapperState(mapperStateRef, {});
|
|
882
|
-
return {};
|
|
883
|
-
}
|
|
884
|
-
const previouslyEmitted = mapperState.emitted;
|
|
885
|
-
const emitted = {};
|
|
886
|
-
const result = {};
|
|
887
|
-
const emitterSnapshot = emitterSnapshotRef.value;
|
|
888
|
-
const snapshot = emitterSnapshot ?? renderSnapshotRef.value;
|
|
889
|
-
const animatedValues = snapshot.animated;
|
|
890
|
-
const staticValues = snapshot.statics;
|
|
891
|
-
const currentlyExiting = isExitingRef.value;
|
|
892
|
-
const currentCycleId = exitCycleIdShared.value;
|
|
893
|
-
const currentlyCompletingAnimation = isCompletingAnimationRef.value;
|
|
894
|
-
const currentDidAnimateCycleId = didAnimateCycleIdShared.value;
|
|
895
|
-
for (const key in staticValues) {
|
|
896
|
-
result[key] = staticValues[key];
|
|
897
|
-
}
|
|
898
|
-
for (const key in snapshot.removedKeys) {
|
|
899
|
-
if (!key.startsWith("transform:") && !(key in staticValues)) {
|
|
900
|
-
result[key] = snapshot.clearValue;
|
|
901
|
-
}
|
|
902
|
-
}
|
|
903
|
-
for (const key in animatedValues) {
|
|
904
|
-
if (key === "transform") continue;
|
|
905
|
-
const targetValue = animatedValues[key];
|
|
906
|
-
emitted[key] = true;
|
|
907
|
-
if (typeof targetValue !== "number" && typeof targetValue !== "string") {
|
|
908
|
-
result[key] = targetValue;
|
|
909
|
-
continue;
|
|
910
|
-
}
|
|
911
|
-
result[key] = animateSnapshotValue(key, key, targetValue, config.propertyConfigs[key] ?? config.baseConfig, !!previouslyEmitted[key], snapshot.seeds[key], !!snapshot.gatedKeys[key], currentlyExiting, currentCycleId, currentlyCompletingAnimation, currentDidAnimateCycleId, markExitKeyDone, markDidAnimateKeyDone, !!COLOR_STYLE_KEYS[key]);
|
|
912
|
-
}
|
|
913
|
-
const transforms = snapshot.transforms;
|
|
914
|
-
if (transforms.length > 0 || snapshot.removeTransform) {
|
|
915
|
-
const validTransforms = [];
|
|
916
|
-
for (const t of transforms) {
|
|
917
|
-
if (!t) continue;
|
|
918
|
-
const keys = Object.keys(t);
|
|
919
|
-
if (keys.length === 0) continue;
|
|
920
|
-
const transformKey = keys[0];
|
|
921
|
-
const value = t[transformKey];
|
|
922
|
-
if (typeof value === "number" || typeof value === "string") {
|
|
923
|
-
const propConfig = config.propertyConfigs[transformKey] ?? config.baseConfig;
|
|
924
|
-
const subKey = `transform:${transformKey}`;
|
|
925
|
-
emitted[subKey] = true;
|
|
926
|
-
validTransforms.push({
|
|
927
|
-
[transformKey]: animateSnapshotValue(subKey, transformKey, value, propConfig, !!previouslyEmitted[subKey], snapshot.seeds[subKey], !!snapshot.gatedKeys[subKey], currentlyExiting, currentCycleId, currentlyCompletingAnimation, currentDidAnimateCycleId, markExitKeyDone, markDidAnimateKeyDone)
|
|
928
|
-
});
|
|
929
|
-
} else {
|
|
930
|
-
validTransforms.push(t);
|
|
931
|
-
}
|
|
932
|
-
}
|
|
933
|
-
if (validTransforms.length > 0 || !("transform" in staticValues)) {
|
|
934
|
-
result.transform = validTransforms;
|
|
935
|
-
}
|
|
936
|
-
}
|
|
937
|
-
updateMapperState(mapperStateRef, emitted);
|
|
938
|
-
return result;
|
|
939
|
-
}, import_core.isWeb ? [
|
|
940
|
-
// pass SharedValues so the stable mapper watches them on web (no babel plugin)
|
|
941
|
-
renderSnapshotRef, emitterSnapshotRef, configRef, isExitingRef, exitCycleIdShared, markExitKeyDone, isCompletingAnimationRef, didAnimateCycleIdShared, markDidAnimateKeyDone] : void 0);
|
|
942
|
-
silenceAnimatedComponentDevCheck(animatedStyle);
|
|
943
|
-
if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
|
|
944
|
-
console.info("[animations-reanimated] useAnimations", {
|
|
945
|
-
animationKey,
|
|
946
|
-
componentState,
|
|
947
|
-
isExiting,
|
|
948
|
-
animatedStyles,
|
|
949
|
-
staticStyles,
|
|
950
|
-
baseConfig,
|
|
951
|
-
propertyConfigs
|
|
952
|
-
});
|
|
953
|
-
}
|
|
954
|
-
return {
|
|
955
|
-
style: [staticStyles, animatedStyle]
|
|
956
|
-
};
|
|
957
|
-
}
|
|
958
|
-
};
|
|
959
|
-
}
|