@lottiefiles/dotlottie-web 0.65.0 → 0.66.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/dotlottie-CasD56IP.d.cts +1741 -0
- package/dist/dotlottie-CasD56IP.d.cts.map +1 -0
- package/dist/dotlottie-CjUp7A1E.d.ts +2106 -0
- package/dist/dotlottie-CjUp7A1E.d.ts.map +1 -0
- package/dist/dotlottie-DBBPxC2A.js +6 -0
- package/dist/dotlottie-DBBPxC2A.js.map +1 -0
- package/dist/dotlottie-ls0cVLtn.cjs +6 -0
- package/dist/dotlottie-ls0cVLtn.cjs.map +1 -0
- package/dist/dotlottie-player.wasm +0 -0
- package/dist/index.cjs +1 -6
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -1513
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.ts +3 -1513
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -6
- package/dist/index.js.map +1 -1
- package/dist/webgl/dotlottie-player.wasm +0 -0
- package/dist/webgl/index.cjs +2 -0
- package/dist/webgl/index.cjs.map +1 -0
- package/dist/webgl/index.d.cts +15 -0
- package/dist/webgl/index.d.cts.map +1 -0
- package/dist/webgl/index.d.ts +15 -0
- package/dist/webgl/index.d.ts.map +1 -0
- package/dist/webgl/index.js +2 -0
- package/dist/webgl/index.js.map +1 -0
- package/dist/webgpu/dotlottie-player.wasm +0 -0
- package/dist/webgpu/index.cjs +2 -0
- package/dist/webgpu/index.cjs.map +1 -0
- package/dist/webgpu/index.d.cts +23 -0
- package/dist/webgpu/index.d.cts.map +1 -0
- package/dist/webgpu/index.d.ts +23 -0
- package/dist/webgpu/index.d.ts.map +1 -0
- package/dist/webgpu/index.js +2 -0
- package/dist/webgpu/index.js.map +1 -0
- package/package.json +37 -1
|
@@ -0,0 +1,1741 @@
|
|
|
1
|
+
//#region src/core/dotlottie-player.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* Playback direction / bounce mode.
|
|
4
|
+
*/
|
|
5
|
+
declare enum Mode$1 {
|
|
6
|
+
Forward = 0,
|
|
7
|
+
Reverse = 1,
|
|
8
|
+
Bounce = 2,
|
|
9
|
+
ReverseBounce = 3
|
|
10
|
+
}
|
|
11
|
+
declare class DotLottiePlayerWasm {
|
|
12
|
+
free(): void;
|
|
13
|
+
constructor();
|
|
14
|
+
/**
|
|
15
|
+
* Load a Lottie JSON animation. Sets up the rendering target automatically.
|
|
16
|
+
*/
|
|
17
|
+
load_animation(data: string, width: number, height: number): boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Load a .lottie archive from raw bytes.
|
|
20
|
+
*/
|
|
21
|
+
load_dotlottie_data(data: Uint8Array, width: number, height: number): boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Load an animation from an already-loaded .lottie archive by its ID.
|
|
24
|
+
*/
|
|
25
|
+
load_animation_from_id(id: string, width: number, height: number): boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Advance time and render. Call once per `requestAnimationFrame`.
|
|
28
|
+
*/
|
|
29
|
+
tick(): boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Render the current frame without advancing time.
|
|
32
|
+
*/
|
|
33
|
+
render(): boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Clear the canvas to the background colour.
|
|
36
|
+
*/
|
|
37
|
+
clear(): void;
|
|
38
|
+
/**
|
|
39
|
+
* Resize the canvas. For the SW renderer this also resizes the pixel buffer.
|
|
40
|
+
*/
|
|
41
|
+
resize(width: number, height: number): boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Zero-copy `Uint8Array` view into WASM linear memory.
|
|
44
|
+
*
|
|
45
|
+
* **Use the returned array immediately.** Do not store the reference across
|
|
46
|
+
* any call that may reallocate the buffer (e.g. `resize` / `load_animation`
|
|
47
|
+
* with different dimensions).
|
|
48
|
+
*/
|
|
49
|
+
get_pixel_buffer(): Uint8Array;
|
|
50
|
+
play(): boolean;
|
|
51
|
+
pause(): boolean;
|
|
52
|
+
stop(): boolean;
|
|
53
|
+
is_playing(): boolean;
|
|
54
|
+
is_paused(): boolean;
|
|
55
|
+
is_stopped(): boolean;
|
|
56
|
+
is_loaded(): boolean;
|
|
57
|
+
is_complete(): boolean;
|
|
58
|
+
is_tweening(): boolean;
|
|
59
|
+
current_frame(): number;
|
|
60
|
+
total_frames(): number;
|
|
61
|
+
request_frame(): number;
|
|
62
|
+
set_frame(no: number): boolean;
|
|
63
|
+
seek(no: number): boolean;
|
|
64
|
+
duration(): number;
|
|
65
|
+
segment_duration(): number;
|
|
66
|
+
current_loop_count(): number;
|
|
67
|
+
reset_current_loop_count(): void;
|
|
68
|
+
width(): number;
|
|
69
|
+
height(): number;
|
|
70
|
+
/**
|
|
71
|
+
* `[width, height]` of the animation in its native coordinate space.
|
|
72
|
+
*/
|
|
73
|
+
animation_size(): Float32Array;
|
|
74
|
+
mode(): Mode$1;
|
|
75
|
+
set_mode(mode: Mode$1): void;
|
|
76
|
+
speed(): number;
|
|
77
|
+
set_speed(speed: number): void;
|
|
78
|
+
loop_animation(): boolean;
|
|
79
|
+
set_loop(v: boolean): void;
|
|
80
|
+
loop_count(): number;
|
|
81
|
+
set_loop_count(n: number): void;
|
|
82
|
+
autoplay(): boolean;
|
|
83
|
+
set_autoplay(v: boolean): void;
|
|
84
|
+
use_frame_interpolation(): boolean;
|
|
85
|
+
set_use_frame_interpolation(v: boolean): void;
|
|
86
|
+
background_color(): number;
|
|
87
|
+
/**
|
|
88
|
+
* Set background colour (`0xAARRGGBB`).
|
|
89
|
+
*/
|
|
90
|
+
set_background_color(color: number): boolean;
|
|
91
|
+
/**
|
|
92
|
+
* Clear the background colour (transparent).
|
|
93
|
+
*/
|
|
94
|
+
clear_background_color(): boolean;
|
|
95
|
+
set_quality(quality: number): boolean;
|
|
96
|
+
has_segment(): boolean;
|
|
97
|
+
segment_start(): number;
|
|
98
|
+
segment_end(): number;
|
|
99
|
+
set_segment(start: number, end: number): boolean;
|
|
100
|
+
clear_segment(): boolean;
|
|
101
|
+
/**
|
|
102
|
+
* Set the layout.
|
|
103
|
+
*
|
|
104
|
+
* `fit` is one of `"contain"`, `"fill"`, `"cover"`, `"fit-width"`,
|
|
105
|
+
* `"fit-height"`, `"none"`. `align_x` / `align_y` are in [0, 1].
|
|
106
|
+
*/
|
|
107
|
+
set_layout(fit: string, align_x: number, align_y: number): boolean;
|
|
108
|
+
layout_fit(): string;
|
|
109
|
+
layout_align_x(): number;
|
|
110
|
+
layout_align_y(): number;
|
|
111
|
+
set_viewport(x: number, y: number, w: number, h: number): boolean;
|
|
112
|
+
/**
|
|
113
|
+
* Set a color slot (`r`, `g`, `b` in [0, 1]).
|
|
114
|
+
*/
|
|
115
|
+
set_color_slot(id: string, r: number, g: number, b: number): boolean;
|
|
116
|
+
set_scalar_slot(id: string, value: number): boolean;
|
|
117
|
+
set_text_slot(id: string, text: string): boolean;
|
|
118
|
+
set_vector_slot(id: string, x: number, y: number): boolean;
|
|
119
|
+
set_position_slot(id: string, x: number, y: number): boolean;
|
|
120
|
+
clear_slots(): boolean;
|
|
121
|
+
clear_slot(id: string): boolean;
|
|
122
|
+
/**
|
|
123
|
+
* Set multiple slots at once from a JSON string.
|
|
124
|
+
*/
|
|
125
|
+
set_slots_str(json: string): boolean;
|
|
126
|
+
/**
|
|
127
|
+
* Set a single slot by ID from a JSON value string.
|
|
128
|
+
*/
|
|
129
|
+
set_slot_str(id: string, json: string): boolean;
|
|
130
|
+
/**
|
|
131
|
+
* Get the JSON value of a single slot by ID, or `undefined` if not found.
|
|
132
|
+
*/
|
|
133
|
+
get_slot_str(id: string): string | undefined;
|
|
134
|
+
/**
|
|
135
|
+
* Get all slots as a JSON object string.
|
|
136
|
+
*/
|
|
137
|
+
get_slots_str(): string;
|
|
138
|
+
/**
|
|
139
|
+
* Get all slot IDs as a JS array.
|
|
140
|
+
*/
|
|
141
|
+
get_slot_ids(): any;
|
|
142
|
+
/**
|
|
143
|
+
* Get the type string of a slot, or `undefined` if not found.
|
|
144
|
+
*/
|
|
145
|
+
get_slot_type(id: string): string | undefined;
|
|
146
|
+
/**
|
|
147
|
+
* Reset a slot to its default value from the animation.
|
|
148
|
+
*/
|
|
149
|
+
reset_slot(id: string): boolean;
|
|
150
|
+
/**
|
|
151
|
+
* Reset all slots to their default values from the animation.
|
|
152
|
+
*/
|
|
153
|
+
reset_slots(): boolean;
|
|
154
|
+
intersect(x: number, y: number, layer_name: string): boolean;
|
|
155
|
+
/**
|
|
156
|
+
* Returns `[x, y, width, height]` of the layer's bounding box.
|
|
157
|
+
*/
|
|
158
|
+
get_layer_bounds(layer_name: string): Float32Array;
|
|
159
|
+
/**
|
|
160
|
+
* Returns the current affine transform as a flat `Float32Array`.
|
|
161
|
+
*/
|
|
162
|
+
get_transform(): Float32Array;
|
|
163
|
+
set_transform(data: Float32Array): boolean;
|
|
164
|
+
/**
|
|
165
|
+
* Tween to `to` frame. `duration` in seconds; pass `undefined` for default.
|
|
166
|
+
*/
|
|
167
|
+
tween(to: number, duration?: number | null): boolean;
|
|
168
|
+
/**
|
|
169
|
+
* Tween with a cubic-bezier easing (`e0..e3`).
|
|
170
|
+
*/
|
|
171
|
+
tween_with_easing(to: number, duration: number | null | undefined, e0: number, e1: number, e2: number, e3: number): boolean;
|
|
172
|
+
tween_stop(): boolean;
|
|
173
|
+
tween_update(progress?: number | null): boolean;
|
|
174
|
+
tween_to_marker(marker: string, duration?: number | null): boolean;
|
|
175
|
+
/**
|
|
176
|
+
* Returns an array of `{ name, time, duration }` objects.
|
|
177
|
+
*/
|
|
178
|
+
markers(): any;
|
|
179
|
+
/**
|
|
180
|
+
* Returns an array of marker name strings.
|
|
181
|
+
*/
|
|
182
|
+
marker_names(): any;
|
|
183
|
+
/**
|
|
184
|
+
* Name of the currently active marker, or `undefined` if none.
|
|
185
|
+
*/
|
|
186
|
+
current_marker(): string | undefined;
|
|
187
|
+
set_marker(name: string): void;
|
|
188
|
+
clear_marker(): void;
|
|
189
|
+
/**
|
|
190
|
+
* Poll the next player event. Returns `null` if the queue is empty,
|
|
191
|
+
* otherwise a plain JS object with a `type` string field and optional
|
|
192
|
+
* payload fields (`frameNo`, `loopCount`).
|
|
193
|
+
*/
|
|
194
|
+
poll_event(): any;
|
|
195
|
+
emit_on_loop(): void;
|
|
196
|
+
load_font(name: string, data: Uint8Array): boolean;
|
|
197
|
+
static unload_font(name: string): boolean;
|
|
198
|
+
set_theme(id: string): boolean;
|
|
199
|
+
reset_theme(): boolean;
|
|
200
|
+
set_theme_data(data: string): boolean;
|
|
201
|
+
theme_id(): string | undefined;
|
|
202
|
+
animation_id(): string | undefined;
|
|
203
|
+
/**
|
|
204
|
+
* Returns the animation manifest as a JSON string, or empty string if unavailable.
|
|
205
|
+
*/
|
|
206
|
+
manifest_string(): string;
|
|
207
|
+
/**
|
|
208
|
+
* Returns the raw JSON definition of a state machine by ID, or `undefined`.
|
|
209
|
+
*/
|
|
210
|
+
get_state_machine(id: string): string | undefined;
|
|
211
|
+
/**
|
|
212
|
+
* Returns the ID of the currently active state machine, or `undefined`.
|
|
213
|
+
*/
|
|
214
|
+
state_machine_id(): string | undefined;
|
|
215
|
+
/**
|
|
216
|
+
* Load a state machine from a JSON definition string. Returns `true` on
|
|
217
|
+
* success. The engine is kept alive inside the player and interacted
|
|
218
|
+
* with via the `sm_*` methods.
|
|
219
|
+
*/
|
|
220
|
+
state_machine_load(definition: string): boolean;
|
|
221
|
+
/**
|
|
222
|
+
* Load a state machine from a .lottie archive by state-machine ID.
|
|
223
|
+
*/
|
|
224
|
+
state_machine_load_from_id(id: string): boolean;
|
|
225
|
+
/**
|
|
226
|
+
* Unload the active state machine.
|
|
227
|
+
*/
|
|
228
|
+
state_machine_unload(): void;
|
|
229
|
+
/**
|
|
230
|
+
* Fire a named event into the state machine.
|
|
231
|
+
*/
|
|
232
|
+
sm_fire(event: string): boolean;
|
|
233
|
+
sm_set_numeric_input(key: string, value: number): boolean;
|
|
234
|
+
sm_get_numeric_input(key: string): number | undefined;
|
|
235
|
+
sm_set_string_input(key: string, value: string): boolean;
|
|
236
|
+
sm_get_string_input(key: string): string | undefined;
|
|
237
|
+
sm_set_boolean_input(key: string, value: boolean): boolean;
|
|
238
|
+
sm_get_boolean_input(key: string): boolean | undefined;
|
|
239
|
+
sm_reset_input(key: string): void;
|
|
240
|
+
/**
|
|
241
|
+
* Poll the next state machine event. Returns `null` if the queue is empty,
|
|
242
|
+
* otherwise a JS object with a `type` field and optional payload.
|
|
243
|
+
*/
|
|
244
|
+
sm_poll_event(): any;
|
|
245
|
+
/**
|
|
246
|
+
* Start the state machine with an open-URL policy.
|
|
247
|
+
*/
|
|
248
|
+
sm_start(require_user_interaction: boolean, whitelist: any[]): boolean;
|
|
249
|
+
/**
|
|
250
|
+
* Stop the state machine.
|
|
251
|
+
*/
|
|
252
|
+
sm_stop(): boolean;
|
|
253
|
+
/**
|
|
254
|
+
* Get the current status of the state machine as a string.
|
|
255
|
+
*/
|
|
256
|
+
sm_status(): string;
|
|
257
|
+
/**
|
|
258
|
+
* Get the name of the current state.
|
|
259
|
+
*/
|
|
260
|
+
sm_current_state(): string;
|
|
261
|
+
/**
|
|
262
|
+
* Override the current state.
|
|
263
|
+
*/
|
|
264
|
+
sm_override_current_state(state: string, immediate: boolean): boolean;
|
|
265
|
+
/**
|
|
266
|
+
* Returns the framework setup listeners as a JS array of strings.
|
|
267
|
+
*/
|
|
268
|
+
sm_framework_setup(): any;
|
|
269
|
+
/**
|
|
270
|
+
* Returns all state machine inputs as a JS array of strings.
|
|
271
|
+
*/
|
|
272
|
+
sm_get_inputs(): any;
|
|
273
|
+
sm_post_click(x: number, y: number): void;
|
|
274
|
+
sm_post_pointer_down(x: number, y: number): void;
|
|
275
|
+
sm_post_pointer_up(x: number, y: number): void;
|
|
276
|
+
sm_post_pointer_move(x: number, y: number): void;
|
|
277
|
+
sm_post_pointer_enter(x: number, y: number): void;
|
|
278
|
+
sm_post_pointer_exit(x: number, y: number): void;
|
|
279
|
+
/**
|
|
280
|
+
* Poll the next state machine internal event. Returns `null` if the
|
|
281
|
+
* queue is empty, otherwise a JS object `{ type: "Message", message }`.
|
|
282
|
+
*/
|
|
283
|
+
sm_poll_internal_event(): any;
|
|
284
|
+
/**
|
|
285
|
+
* Advance the state machine by one tick. Returns `false` if no state machine
|
|
286
|
+
* is loaded, otherwise `true` (even if the machine is stopped or errored).
|
|
287
|
+
*/
|
|
288
|
+
sm_tick(): boolean;
|
|
289
|
+
}
|
|
290
|
+
//#endregion
|
|
291
|
+
//#region src/event-manager.d.ts
|
|
292
|
+
/**
|
|
293
|
+
* Represents the different types of events that can be dispatched.
|
|
294
|
+
*/
|
|
295
|
+
type EventType = 'complete' | 'frame' | 'load' | 'loadError' | 'renderError' | 'loop' | 'pause' | 'play' | 'stop' | 'destroy' | 'freeze' | 'unfreeze' | 'render' | 'ready' | 'stateMachineStart' | 'stateMachineStop' | 'stateMachineTransition' | 'stateMachineStateEntered' | 'stateMachineStateExit' | 'stateMachineCustomEvent' | 'stateMachineError' | 'stateMachineBooleanInputValueChange' | 'stateMachineNumericInputValueChange' | 'stateMachineStringInputValueChange' | 'stateMachineInputFired' | 'stateMachineInternalMessage';
|
|
296
|
+
/**
|
|
297
|
+
* Maps an event type string to its respective event interface.
|
|
298
|
+
*/
|
|
299
|
+
type EventByType<T extends EventType> = Extract<Event, {
|
|
300
|
+
type: T;
|
|
301
|
+
}>;
|
|
302
|
+
/**
|
|
303
|
+
* Base interface for all events.
|
|
304
|
+
*/
|
|
305
|
+
interface BaseEvent {
|
|
306
|
+
type: EventType;
|
|
307
|
+
}
|
|
308
|
+
interface RenderEvent extends BaseEvent {
|
|
309
|
+
currentFrame: number;
|
|
310
|
+
type: 'render';
|
|
311
|
+
}
|
|
312
|
+
interface FreezeEvent extends BaseEvent {
|
|
313
|
+
type: 'freeze';
|
|
314
|
+
}
|
|
315
|
+
interface UnfreezeEvent extends BaseEvent {
|
|
316
|
+
type: 'unfreeze';
|
|
317
|
+
}
|
|
318
|
+
interface DestroyEvent extends BaseEvent {
|
|
319
|
+
type: 'destroy';
|
|
320
|
+
}
|
|
321
|
+
/**
|
|
322
|
+
* Event fired when a loop action occurs.
|
|
323
|
+
*/
|
|
324
|
+
interface LoopEvent extends BaseEvent {
|
|
325
|
+
loopCount: number;
|
|
326
|
+
type: 'loop';
|
|
327
|
+
}
|
|
328
|
+
/**
|
|
329
|
+
* Event fired during frame changes.
|
|
330
|
+
*/
|
|
331
|
+
interface FrameEvent extends BaseEvent {
|
|
332
|
+
currentFrame: number;
|
|
333
|
+
type: 'frame';
|
|
334
|
+
}
|
|
335
|
+
/**
|
|
336
|
+
* Event fired when a load action occurs.
|
|
337
|
+
*/
|
|
338
|
+
interface LoadEvent extends BaseEvent {
|
|
339
|
+
type: 'load';
|
|
340
|
+
}
|
|
341
|
+
/**
|
|
342
|
+
* Event fired when a loading error occurs.
|
|
343
|
+
*/
|
|
344
|
+
interface LoadErrorEvent extends BaseEvent {
|
|
345
|
+
error: Error;
|
|
346
|
+
type: 'loadError';
|
|
347
|
+
}
|
|
348
|
+
/**
|
|
349
|
+
* Event fired when a loading error occurs.
|
|
350
|
+
*/
|
|
351
|
+
interface RenderErrorEvent extends BaseEvent {
|
|
352
|
+
error: Error;
|
|
353
|
+
type: 'renderError';
|
|
354
|
+
}
|
|
355
|
+
/**
|
|
356
|
+
* Event fired when a completion action occurs.
|
|
357
|
+
*/
|
|
358
|
+
interface CompleteEvent extends BaseEvent {
|
|
359
|
+
type: 'complete';
|
|
360
|
+
}
|
|
361
|
+
/**
|
|
362
|
+
* Event fired when a pause action occurs.
|
|
363
|
+
*/
|
|
364
|
+
interface PauseEvent extends BaseEvent {
|
|
365
|
+
type: 'pause';
|
|
366
|
+
}
|
|
367
|
+
/**
|
|
368
|
+
* Event fired when a play action occurs.
|
|
369
|
+
*/
|
|
370
|
+
interface PlayEvent extends BaseEvent {
|
|
371
|
+
type: 'play';
|
|
372
|
+
}
|
|
373
|
+
/**
|
|
374
|
+
* Event fired when a stop action occurs.
|
|
375
|
+
*/
|
|
376
|
+
interface StopEvent extends BaseEvent {
|
|
377
|
+
type: 'stop';
|
|
378
|
+
}
|
|
379
|
+
/**
|
|
380
|
+
* Event fired when a WASM module is initialized and ready.
|
|
381
|
+
*/
|
|
382
|
+
interface ReadyEvent extends BaseEvent {
|
|
383
|
+
type: 'ready';
|
|
384
|
+
}
|
|
385
|
+
interface StateMachineStartEvent extends BaseEvent {
|
|
386
|
+
type: 'stateMachineStart';
|
|
387
|
+
}
|
|
388
|
+
interface StateMachineStopEvent extends BaseEvent {
|
|
389
|
+
type: 'stateMachineStop';
|
|
390
|
+
}
|
|
391
|
+
interface StateMachineTransitionEvent extends BaseEvent {
|
|
392
|
+
fromState: string;
|
|
393
|
+
toState: string;
|
|
394
|
+
type: 'stateMachineTransition';
|
|
395
|
+
}
|
|
396
|
+
interface StateMachineStateEnteredEvent extends BaseEvent {
|
|
397
|
+
state: string;
|
|
398
|
+
type: 'stateMachineStateEntered';
|
|
399
|
+
}
|
|
400
|
+
interface StateMachineStateExitEvent extends BaseEvent {
|
|
401
|
+
state: string;
|
|
402
|
+
type: 'stateMachineStateExit';
|
|
403
|
+
}
|
|
404
|
+
interface StateMachineCustomEvent extends BaseEvent {
|
|
405
|
+
eventName: string;
|
|
406
|
+
type: 'stateMachineCustomEvent';
|
|
407
|
+
}
|
|
408
|
+
interface StateMachineErrorEvent extends BaseEvent {
|
|
409
|
+
error: string;
|
|
410
|
+
type: 'stateMachineError';
|
|
411
|
+
}
|
|
412
|
+
interface StateMachineBooleanInputValueChangeEvent extends BaseEvent {
|
|
413
|
+
inputName: string;
|
|
414
|
+
newValue: boolean;
|
|
415
|
+
oldValue: boolean;
|
|
416
|
+
type: 'stateMachineBooleanInputValueChange';
|
|
417
|
+
}
|
|
418
|
+
interface StateMachineNumericInputValueChangeEvent extends BaseEvent {
|
|
419
|
+
inputName: string;
|
|
420
|
+
newValue: number;
|
|
421
|
+
oldValue: number;
|
|
422
|
+
type: 'stateMachineNumericInputValueChange';
|
|
423
|
+
}
|
|
424
|
+
interface StateMachineStringInputValueChangeEvent extends BaseEvent {
|
|
425
|
+
inputName: string;
|
|
426
|
+
newValue: string;
|
|
427
|
+
oldValue: string;
|
|
428
|
+
type: 'stateMachineStringInputValueChange';
|
|
429
|
+
}
|
|
430
|
+
interface StateMachineInputFiredEvent extends BaseEvent {
|
|
431
|
+
inputName: string;
|
|
432
|
+
type: 'stateMachineInputFired';
|
|
433
|
+
}
|
|
434
|
+
interface StateMachineInternalMessage extends BaseEvent {
|
|
435
|
+
message: string;
|
|
436
|
+
type: 'stateMachineInternalMessage';
|
|
437
|
+
}
|
|
438
|
+
/**
|
|
439
|
+
* Type representing all possible event types.
|
|
440
|
+
*/
|
|
441
|
+
type Event = LoopEvent | FrameEvent | LoadEvent | LoadErrorEvent | RenderErrorEvent | CompleteEvent | PauseEvent | PlayEvent | StopEvent | DestroyEvent | FreezeEvent | UnfreezeEvent | RenderEvent | ReadyEvent | StateMachineStartEvent | StateMachineStopEvent | StateMachineTransitionEvent | StateMachineStateEnteredEvent | StateMachineStateExitEvent | StateMachineCustomEvent | StateMachineErrorEvent | StateMachineBooleanInputValueChangeEvent | StateMachineNumericInputValueChangeEvent | StateMachineStringInputValueChangeEvent | StateMachineInputFiredEvent | StateMachineInternalMessage;
|
|
442
|
+
type EventListener<T extends EventType> = (event: EventByType<T>) => void;
|
|
443
|
+
/**
|
|
444
|
+
* Manages registration and dispatching of event listeners.
|
|
445
|
+
*/
|
|
446
|
+
declare class EventManager {
|
|
447
|
+
private readonly _eventListeners;
|
|
448
|
+
addEventListener<T extends EventType>(type: T, listener: EventListener<T>): void;
|
|
449
|
+
removeEventListener<T extends EventType>(type: T, listener?: EventListener<T>): void;
|
|
450
|
+
dispatch<T extends EventType>(event: EventByType<T>): void;
|
|
451
|
+
removeAllEventListeners(): void;
|
|
452
|
+
}
|
|
453
|
+
//#endregion
|
|
454
|
+
//#region src/types.d.ts
|
|
455
|
+
/**
|
|
456
|
+
* 3x3 transformation matrix for the entire animation on the canvas.
|
|
457
|
+
* Represented as a flattened 9-element tuple in row-major order: [m00, m01, m02, m10, m11, m12, m20, m21, m22].
|
|
458
|
+
* Used for affine transformations (translation, rotation, scale, skew) applied to the whole animation.
|
|
459
|
+
*/
|
|
460
|
+
type Transform = [number, number, number, number, number, number, number, number, number];
|
|
461
|
+
/**
|
|
462
|
+
* Animation marker representing a named section within a Lottie animation.
|
|
463
|
+
*/
|
|
464
|
+
interface Marker {
|
|
465
|
+
name: string;
|
|
466
|
+
time: number;
|
|
467
|
+
duration: number;
|
|
468
|
+
}
|
|
469
|
+
/**
|
|
470
|
+
* Configuration for canvas rendering behavior.
|
|
471
|
+
* Controls how the animation is rendered and when rendering is optimized.
|
|
472
|
+
*/
|
|
473
|
+
interface RenderConfig {
|
|
474
|
+
/**
|
|
475
|
+
* Automatically resize canvas when container size changes.
|
|
476
|
+
* Set to true to maintain responsiveness without manual resize calls.
|
|
477
|
+
*/
|
|
478
|
+
autoResize?: boolean;
|
|
479
|
+
/**
|
|
480
|
+
* Pixel density multiplier for high-DPI displays.
|
|
481
|
+
* Higher values increase quality but use more memory. Defaults to window.devicePixelRatio.
|
|
482
|
+
*/
|
|
483
|
+
devicePixelRatio?: number;
|
|
484
|
+
/**
|
|
485
|
+
* Pause rendering when canvas is outside the viewport.
|
|
486
|
+
* Set to true (default) to improve performance when animation isn't visible.
|
|
487
|
+
*/
|
|
488
|
+
freezeOnOffscreen?: boolean;
|
|
489
|
+
/**
|
|
490
|
+
* Rendering quality level (0-100).
|
|
491
|
+
* Lower values reduce quality but improve performance on resource-constrained devices.
|
|
492
|
+
*/
|
|
493
|
+
quality?: number;
|
|
494
|
+
}
|
|
495
|
+
/**
|
|
496
|
+
* Animation playback direction mode.
|
|
497
|
+
* Determines how frames are sequenced: forward, reverse, or alternating (bounce) modes.
|
|
498
|
+
*/
|
|
499
|
+
type Mode = 'forward' | 'reverse' | 'bounce' | 'reverse-bounce';
|
|
500
|
+
/**
|
|
501
|
+
* Animation data format accepted by the player.
|
|
502
|
+
* Can be a JSON string, binary ArrayBuffer, or parsed JSON object.
|
|
503
|
+
*/
|
|
504
|
+
type Data = string | ArrayBuffer | Record<string, unknown>;
|
|
505
|
+
/**
|
|
506
|
+
* Layout fit mode determining how animation scales to canvas.
|
|
507
|
+
* Controls scaling behavior similar to CSS object-fit property.
|
|
508
|
+
*/
|
|
509
|
+
type Fit = 'contain' | 'cover' | 'fill' | 'none' | 'fit-width' | 'fit-height';
|
|
510
|
+
/**
|
|
511
|
+
* Layout configuration for positioning and scaling animations within the canvas.
|
|
512
|
+
* Determines how the animation fits and aligns within the available space.
|
|
513
|
+
*/
|
|
514
|
+
interface Layout {
|
|
515
|
+
/**
|
|
516
|
+
* Alignment position as [x, y] coordinates in 0-1 range.
|
|
517
|
+
* [0.5, 0.5] centers the animation, [0, 0] is top-left, [1, 1] is bottom-right.
|
|
518
|
+
*/
|
|
519
|
+
align?: [number, number];
|
|
520
|
+
/**
|
|
521
|
+
* Fit mode controlling how animation scales to canvas dimensions.
|
|
522
|
+
* Defaults to 'contain' to show the full animation without cropping.
|
|
523
|
+
*/
|
|
524
|
+
fit?: Fit;
|
|
525
|
+
}
|
|
526
|
+
/**
|
|
527
|
+
* Dimensions of a rendering surface for custom canvas implementations.
|
|
528
|
+
* Used when providing a custom render surface instead of HTMLCanvasElement.
|
|
529
|
+
*/
|
|
530
|
+
interface RenderSurface {
|
|
531
|
+
/** Height of the render surface in pixels */
|
|
532
|
+
height: number;
|
|
533
|
+
/** Width of the render surface in pixels */
|
|
534
|
+
width: number;
|
|
535
|
+
}
|
|
536
|
+
/**
|
|
537
|
+
* Main configuration object for initializing a DotLottie player.
|
|
538
|
+
* Specifies the animation source, playback behavior, rendering options, and canvas target.
|
|
539
|
+
*/
|
|
540
|
+
interface Config {
|
|
541
|
+
/**
|
|
542
|
+
* ID of the specific animation to play from a multi-animation dotLottie file.
|
|
543
|
+
* Leave undefined for single-animation files or to play the default animation.
|
|
544
|
+
*/
|
|
545
|
+
animationId?: string;
|
|
546
|
+
/**
|
|
547
|
+
* Automatically start playback once the animation is loaded.
|
|
548
|
+
* Set to true for animations that should play immediately without user interaction.
|
|
549
|
+
*/
|
|
550
|
+
autoplay?: boolean;
|
|
551
|
+
/**
|
|
552
|
+
* Background color as a CSS color string (e.g., '#FFFFFF' or 'transparent').
|
|
553
|
+
* Applied to the canvas element or as a fill behind the animation.
|
|
554
|
+
*/
|
|
555
|
+
backgroundColor?: string;
|
|
556
|
+
/**
|
|
557
|
+
* Target canvas element for rendering.
|
|
558
|
+
* Can be HTMLCanvasElement, OffscreenCanvas, or custom RenderSurface with dimensions.
|
|
559
|
+
*/
|
|
560
|
+
canvas?: HTMLCanvasElement | OffscreenCanvas | RenderSurface;
|
|
561
|
+
/**
|
|
562
|
+
* Animation data to load directly.
|
|
563
|
+
* Use this to load from a string, ArrayBuffer, or parsed JSON instead of fetching from src.
|
|
564
|
+
*/
|
|
565
|
+
data?: Data;
|
|
566
|
+
/**
|
|
567
|
+
* Layout configuration for positioning and scaling the animation.
|
|
568
|
+
* Controls fit mode and alignment within the canvas.
|
|
569
|
+
*/
|
|
570
|
+
layout?: Layout;
|
|
571
|
+
/**
|
|
572
|
+
* Enable continuous looping of the animation.
|
|
573
|
+
* Set to true to repeat indefinitely, or use loopCount for a specific number of loops.
|
|
574
|
+
*/
|
|
575
|
+
loop?: boolean;
|
|
576
|
+
/**
|
|
577
|
+
* Number of additional times to replay the animation after the first play.
|
|
578
|
+
* Requires `loop` to be true. A value of 0 means infinite replays; a positive value `n` means
|
|
579
|
+
* the animation plays a total of `n + 1` times (initial play + `n` replays).
|
|
580
|
+
*/
|
|
581
|
+
loopCount?: number;
|
|
582
|
+
/**
|
|
583
|
+
* Named marker to use as the playback segment.
|
|
584
|
+
* Plays only the portion of the animation defined by this marker instead of the full animation.
|
|
585
|
+
*/
|
|
586
|
+
marker?: string;
|
|
587
|
+
/**
|
|
588
|
+
* Playback direction mode.
|
|
589
|
+
* Controls whether animation plays forward, reverse, or alternates (bounce).
|
|
590
|
+
*/
|
|
591
|
+
mode?: Mode;
|
|
592
|
+
/**
|
|
593
|
+
* Rendering configuration controlling canvas behavior.
|
|
594
|
+
* Includes autoResize, devicePixelRatio, freezeOnOffscreen, and quality settings.
|
|
595
|
+
*/
|
|
596
|
+
renderConfig?: RenderConfig;
|
|
597
|
+
/**
|
|
598
|
+
* Frame range to play as [startFrame, endFrame].
|
|
599
|
+
* Restricts playback to a specific portion of the animation instead of the full sequence.
|
|
600
|
+
*/
|
|
601
|
+
segment?: [number, number];
|
|
602
|
+
/**
|
|
603
|
+
* Playback speed multiplier.
|
|
604
|
+
* 1 is normal speed, 2 is double speed, 0.5 is half speed.
|
|
605
|
+
*/
|
|
606
|
+
speed?: number;
|
|
607
|
+
/**
|
|
608
|
+
* URL to fetch the animation from.
|
|
609
|
+
* Use this to load .lottie or .json files from a remote or local path.
|
|
610
|
+
*/
|
|
611
|
+
src?: string;
|
|
612
|
+
/**
|
|
613
|
+
* State machine security configuration.
|
|
614
|
+
* Controls URL opening policies for state machine-driven animations.
|
|
615
|
+
*/
|
|
616
|
+
stateMachineConfig?: StateMachineConfig;
|
|
617
|
+
/**
|
|
618
|
+
* ID of the state machine to load and activate.
|
|
619
|
+
* State machines enable interactive, event-driven animation behaviors.
|
|
620
|
+
*/
|
|
621
|
+
stateMachineId?: string;
|
|
622
|
+
/**
|
|
623
|
+
* ID of the theme to apply to the animation.
|
|
624
|
+
* Themes modify colors and visual properties defined in the dotLottie manifest.
|
|
625
|
+
*/
|
|
626
|
+
themeId?: string;
|
|
627
|
+
/**
|
|
628
|
+
* Enable frame interpolation for smoother playback.
|
|
629
|
+
* Set to true (default) for smoother animation, false for exact frame-by-frame playback.
|
|
630
|
+
*/
|
|
631
|
+
useFrameInterpolation?: boolean;
|
|
632
|
+
}
|
|
633
|
+
interface WebGLConfig extends Omit<Config, 'canvas'> {
|
|
634
|
+
canvas: HTMLCanvasElement;
|
|
635
|
+
}
|
|
636
|
+
interface WebGPUConfig extends Omit<Config, 'canvas'> {
|
|
637
|
+
canvas: HTMLCanvasElement;
|
|
638
|
+
device?: GPUDevice;
|
|
639
|
+
}
|
|
640
|
+
interface StateMachineConfig {
|
|
641
|
+
/**
|
|
642
|
+
* Controls whether and which URLs can be opened by a state machine.
|
|
643
|
+
*
|
|
644
|
+
* - requireUserInteraction: When true, URLs open only after an explicit user action
|
|
645
|
+
* (e.g., click/pointer down) on the animation.
|
|
646
|
+
* - whitelist: List of allowed URL patterns. An empty list blocks all URLs. Use
|
|
647
|
+
* "*" to allow all URLs. Wildcards are supported in host and path (e.g.,
|
|
648
|
+
* "*.example.com/*").
|
|
649
|
+
*
|
|
650
|
+
* @example
|
|
651
|
+
* ```typescript
|
|
652
|
+
* // Require user interaction before opening any URL
|
|
653
|
+
* openUrlPolicy: { requireUserInteraction: true, whitelist: ["*"] }
|
|
654
|
+
*
|
|
655
|
+
* // Block all URLs
|
|
656
|
+
* openUrlPolicy: { whitelist: [] }
|
|
657
|
+
*
|
|
658
|
+
* // Allow all URLs
|
|
659
|
+
* openUrlPolicy: { whitelist: ["*"] }
|
|
660
|
+
*
|
|
661
|
+
* // Allow a specific domain only
|
|
662
|
+
* openUrlPolicy: { whitelist: ["https://example.com"] }
|
|
663
|
+
*
|
|
664
|
+
* // Allow subdomains and any path under lottiefiles.com
|
|
665
|
+
* openUrlPolicy: { whitelist: ["*.lottiefiles.com/*"] }
|
|
666
|
+
* ```
|
|
667
|
+
*
|
|
668
|
+
* By default, URLs are denied and require user interaction.
|
|
669
|
+
*/
|
|
670
|
+
openUrlPolicy?: {
|
|
671
|
+
requireUserInteraction?: boolean;
|
|
672
|
+
whitelist?: string[];
|
|
673
|
+
};
|
|
674
|
+
}
|
|
675
|
+
/**
|
|
676
|
+
* dotLottie manifest containing metadata about available animations, themes, and state machines.
|
|
677
|
+
* Included in .lottie files to describe the contents and relationships between components.
|
|
678
|
+
*/
|
|
679
|
+
interface Manifest {
|
|
680
|
+
/**
|
|
681
|
+
* List of animations available in this dotLottie file.
|
|
682
|
+
* Each animation can have its own ID, themes, and background color.
|
|
683
|
+
*/
|
|
684
|
+
animations: Array<{
|
|
685
|
+
/** Background color for this animation */background?: string; /** Unique identifier for this animation */
|
|
686
|
+
id: string; /** Default theme to apply when this animation loads */
|
|
687
|
+
initialTheme?: string; /** List of theme IDs compatible with this animation */
|
|
688
|
+
themes?: string[];
|
|
689
|
+
}>;
|
|
690
|
+
/** Tool or application that created this dotLottie file */
|
|
691
|
+
generator?: string;
|
|
692
|
+
/** List of available state machines for interactive behavior */
|
|
693
|
+
stateMachines?: Array<{
|
|
694
|
+
id: string;
|
|
695
|
+
}>;
|
|
696
|
+
/** List of available themes that can modify animation appearance */
|
|
697
|
+
themes?: Array<{
|
|
698
|
+
id: string;
|
|
699
|
+
}>;
|
|
700
|
+
/** dotLottie specification version */
|
|
701
|
+
version?: string;
|
|
702
|
+
}
|
|
703
|
+
/**
|
|
704
|
+
* Bezier easing handle for keyframe interpolation
|
|
705
|
+
*/
|
|
706
|
+
interface BezierHandle {
|
|
707
|
+
x: number | number[];
|
|
708
|
+
y: number | number[];
|
|
709
|
+
}
|
|
710
|
+
/**
|
|
711
|
+
* Keyframe in Lottie native format
|
|
712
|
+
* The value type (Color, Vector, number, etc.)
|
|
713
|
+
*/
|
|
714
|
+
interface Keyframe<T> {
|
|
715
|
+
/** Hold keyframe - no interpolation to next keyframe */
|
|
716
|
+
h?: 0 | 1;
|
|
717
|
+
/** Incoming bezier handle (optional, for easing) */
|
|
718
|
+
i?: BezierHandle;
|
|
719
|
+
/** Outgoing bezier handle (optional, for easing) */
|
|
720
|
+
o?: BezierHandle;
|
|
721
|
+
/** Start value at this keyframe */
|
|
722
|
+
s: T;
|
|
723
|
+
/** Time (frame number) */
|
|
724
|
+
t: number;
|
|
725
|
+
}
|
|
726
|
+
/**
|
|
727
|
+
* Color as RGB or RGBA array with values normalized to [0, 1]
|
|
728
|
+
* @example [1, 0, 0] // red
|
|
729
|
+
* @example [1, 0, 0, 0.5] // red with 50% opacity
|
|
730
|
+
*/
|
|
731
|
+
type Color = [number, number, number] | [number, number, number, number];
|
|
732
|
+
/**
|
|
733
|
+
* Color slot value - static color or array of keyframes
|
|
734
|
+
* @example Static: [1, 0, 0, 1] // red
|
|
735
|
+
* @example Animated: [\{ t: 0, s: [1, 0, 0, 1] \}, \{ t: 60, s: [0, 0, 1, 1] \}]
|
|
736
|
+
*/
|
|
737
|
+
type ColorSlotValue = Color | Array<Keyframe<Color>>;
|
|
738
|
+
/**
|
|
739
|
+
* Scalar slot value - static number or array of keyframes (rotation, opacity, etc.)
|
|
740
|
+
* @example Static: 45
|
|
741
|
+
* @example Animated: [\{ t: 0, s: 0 \}, \{ t: 60, s: 360 \}]
|
|
742
|
+
*/
|
|
743
|
+
type ScalarSlotValue = number | Array<Keyframe<number>>;
|
|
744
|
+
/**
|
|
745
|
+
* Vector as 2D or 3D point
|
|
746
|
+
* @example [100, 100] // 2D vector
|
|
747
|
+
* @example [100, 100, 0] // 3D vector
|
|
748
|
+
*/
|
|
749
|
+
type Vector = [number, number] | [number, number, number];
|
|
750
|
+
/**
|
|
751
|
+
* Vector slot value - static vector or array of keyframes
|
|
752
|
+
* Used for both "vector" and "position" slot types
|
|
753
|
+
* @example Static: [100, 100]
|
|
754
|
+
* @example Animated: [\{ t: 0, s: [0, 0] \}, \{ t: 60, s: [100, 100] \}]
|
|
755
|
+
*/
|
|
756
|
+
type VectorSlotValue = Vector | Array<Keyframe<Vector>>;
|
|
757
|
+
/**
|
|
758
|
+
* Gradient as raw Lottie flat array format.
|
|
759
|
+
* Color stops (4 floats each): [offset, r, g, b, offset, r, g, b, ...]
|
|
760
|
+
* Opacity stops (2 floats each, appended after color stops): [...color stops, offset, alpha, offset, alpha, ...]
|
|
761
|
+
* All values are in [0, 1] range.
|
|
762
|
+
* Expected array size: 4 * colorStopCount + 2 * opacityStopCount
|
|
763
|
+
* @example Without opacity: [0, 1, 0, 0, 1, 0, 0, 1] // red to blue gradient (2 color stops)
|
|
764
|
+
* @example With opacity: [0, 1, 0, 0, 1, 0, 0, 1, 0, 0.8, 1, 1] // red to blue, 80% -> 100% opacity
|
|
765
|
+
*/
|
|
766
|
+
type Gradient = number[];
|
|
767
|
+
/**
|
|
768
|
+
* Gradient slot value - static gradient or array of keyframes
|
|
769
|
+
* @example Static without opacity: [0, 1, 0, 0, 1, 0, 0, 1]
|
|
770
|
+
* @example Static with opacity: [0, 1, 0, 0, 1, 0, 0, 1, 0, 0.8, 1, 1]
|
|
771
|
+
* @example Animated: [\{ t: 0, s: [0, 1, 0, 0, 1, 0, 0, 1] \}]
|
|
772
|
+
*/
|
|
773
|
+
type GradientSlotValue = Gradient | Array<Keyframe<Gradient>>;
|
|
774
|
+
/**
|
|
775
|
+
* Text document properties
|
|
776
|
+
* @see https://lottiefiles.github.io/lottie-docs/text/#text-document
|
|
777
|
+
*/
|
|
778
|
+
interface TextDocument {
|
|
779
|
+
/** Font family */
|
|
780
|
+
f?: string;
|
|
781
|
+
/** Fill color [r, g, b] or [r, g, b, a] in [0, 1] range */
|
|
782
|
+
fc?: Color;
|
|
783
|
+
/** Justify: 0=left, 1=right, 2=center */
|
|
784
|
+
j?: 0 | 1 | 2;
|
|
785
|
+
/** Line height */
|
|
786
|
+
lh?: number;
|
|
787
|
+
/** Font size */
|
|
788
|
+
s?: number;
|
|
789
|
+
/** Stroke color [r, g, b] or [r, g, b, a] in [0, 1] range */
|
|
790
|
+
sc?: Color;
|
|
791
|
+
/** Stroke width */
|
|
792
|
+
sw?: number;
|
|
793
|
+
/** Text content (newlines encoded with carriage return) */
|
|
794
|
+
t?: string;
|
|
795
|
+
/** Tracking (letter spacing) */
|
|
796
|
+
tr?: number;
|
|
797
|
+
}
|
|
798
|
+
/**
|
|
799
|
+
* Text slot value - always static (text documents don't support animation)
|
|
800
|
+
* @example \{ t: 'Hello', s: 24, fc: [0,0,0,1] \}
|
|
801
|
+
*/
|
|
802
|
+
type TextSlotValue = TextDocument;
|
|
803
|
+
/**
|
|
804
|
+
* Slot type string as returned by the core
|
|
805
|
+
*/
|
|
806
|
+
type SlotType = 'color' | 'gradient' | 'image' | 'text' | 'scalar' | 'vector';
|
|
807
|
+
/**
|
|
808
|
+
* Base properties shared by all theme keyframes.
|
|
809
|
+
*/
|
|
810
|
+
interface ThemeBaseKeyframe {
|
|
811
|
+
/** Timeline position in animation frames */
|
|
812
|
+
frame: number;
|
|
813
|
+
/** When true, holds value without interpolation until next keyframe */
|
|
814
|
+
hold?: boolean;
|
|
815
|
+
/** Incoming Bézier handle for easing into this keyframe */
|
|
816
|
+
inTangent?: BezierHandle;
|
|
817
|
+
/** Outgoing Bézier handle for easing out of this keyframe */
|
|
818
|
+
outTangent?: BezierHandle;
|
|
819
|
+
}
|
|
820
|
+
/**
|
|
821
|
+
* Color keyframe for animated color transitions.
|
|
822
|
+
*/
|
|
823
|
+
interface ThemeColorKeyframe extends ThemeBaseKeyframe {
|
|
824
|
+
/** Color value as normalized RGB or RGBA (0-1 range) */
|
|
825
|
+
value: Color;
|
|
826
|
+
}
|
|
827
|
+
/**
|
|
828
|
+
* Scalar keyframe for animated numeric properties.
|
|
829
|
+
*/
|
|
830
|
+
interface ThemeScalarKeyframe extends ThemeBaseKeyframe {
|
|
831
|
+
/** Numeric value at this keyframe */
|
|
832
|
+
value: number;
|
|
833
|
+
}
|
|
834
|
+
/**
|
|
835
|
+
* Position keyframe for animated position properties.
|
|
836
|
+
*/
|
|
837
|
+
interface ThemePositionKeyframe extends ThemeBaseKeyframe {
|
|
838
|
+
/** Position as 2D or 3D coordinates */
|
|
839
|
+
value: Vector;
|
|
840
|
+
/** Incoming tangent for spatial interpolation (curved paths) */
|
|
841
|
+
valueInTangent?: number[];
|
|
842
|
+
/** Outgoing tangent for spatial interpolation (curved paths) */
|
|
843
|
+
valueOutTangent?: number[];
|
|
844
|
+
}
|
|
845
|
+
/**
|
|
846
|
+
* Vector keyframe for animated vector properties (scale, size, etc.).
|
|
847
|
+
*/
|
|
848
|
+
interface ThemeVectorKeyframe extends ThemeBaseKeyframe {
|
|
849
|
+
/** Vector value as [x, y] or [x, y, z] */
|
|
850
|
+
value: Vector;
|
|
851
|
+
}
|
|
852
|
+
/**
|
|
853
|
+
* Gradient color stop definition.
|
|
854
|
+
*/
|
|
855
|
+
interface ThemeGradientStop {
|
|
856
|
+
/** Color as RGB or RGBA (0-1 range) */
|
|
857
|
+
color: Color;
|
|
858
|
+
/** Position along gradient line (0-1) */
|
|
859
|
+
offset: number;
|
|
860
|
+
}
|
|
861
|
+
/**
|
|
862
|
+
* Gradient keyframe for animated gradient transitions.
|
|
863
|
+
*/
|
|
864
|
+
interface ThemeGradientKeyframe extends ThemeBaseKeyframe {
|
|
865
|
+
/** Array of gradient stops at this keyframe */
|
|
866
|
+
value: ThemeGradientStop[];
|
|
867
|
+
}
|
|
868
|
+
/**
|
|
869
|
+
* Text justification options.
|
|
870
|
+
*/
|
|
871
|
+
type ThemeTextJustify = 'Left' | 'Right' | 'Center' | 'JustifyLastLeft' | 'JustifyLastRight' | 'JustifyLastCenter' | 'JustifyLastFull';
|
|
872
|
+
/**
|
|
873
|
+
* Text capitalization styles.
|
|
874
|
+
*/
|
|
875
|
+
type ThemeTextCaps = 'Regular' | 'AllCaps' | 'SmallCaps';
|
|
876
|
+
/**
|
|
877
|
+
* Text document properties for theme text rules.
|
|
878
|
+
* Uses descriptive property names as per dotLottie v2.0 spec.
|
|
879
|
+
* @see https://dotlottie.io/spec/2.0/#text-document
|
|
880
|
+
*/
|
|
881
|
+
interface ThemeTextDocument {
|
|
882
|
+
/** Vertical baseline offset in pixels */
|
|
883
|
+
baselineShift?: number;
|
|
884
|
+
/** Fill color as RGB or RGBA (0-1 range) */
|
|
885
|
+
fillColor?: Color;
|
|
886
|
+
/** Font family name */
|
|
887
|
+
fontName?: string;
|
|
888
|
+
/** Font size in points */
|
|
889
|
+
fontSize?: number;
|
|
890
|
+
/** Text alignment and justification */
|
|
891
|
+
justify?: ThemeTextJustify;
|
|
892
|
+
/** Line height spacing multiplier */
|
|
893
|
+
lineHeight?: number;
|
|
894
|
+
/** Stroke color as RGB or RGBA (0-1 range) */
|
|
895
|
+
strokeColor?: Color;
|
|
896
|
+
/** When true, stroke renders over fill */
|
|
897
|
+
strokeOverFill?: boolean;
|
|
898
|
+
/** Stroke width in pixels */
|
|
899
|
+
strokeWidth?: number;
|
|
900
|
+
/** Text content to display */
|
|
901
|
+
text?: string;
|
|
902
|
+
/** Text capitalization style */
|
|
903
|
+
textCaps?: ThemeTextCaps;
|
|
904
|
+
/** Letter spacing in 1/1000 em units */
|
|
905
|
+
tracking?: number;
|
|
906
|
+
/** Text wrap box position [x, y] */
|
|
907
|
+
wrapPosition?: [number, number];
|
|
908
|
+
/** Text wrap bounding box [width, height] */
|
|
909
|
+
wrapSize?: [number, number];
|
|
910
|
+
}
|
|
911
|
+
/**
|
|
912
|
+
* Text keyframe for animated text document properties.
|
|
913
|
+
*/
|
|
914
|
+
interface ThemeTextKeyframe {
|
|
915
|
+
/** Timeline position in animation frames */
|
|
916
|
+
frame: number;
|
|
917
|
+
/** Text document configuration at this keyframe */
|
|
918
|
+
value: ThemeTextDocument;
|
|
919
|
+
}
|
|
920
|
+
/**
|
|
921
|
+
* Image value for theme image rules.
|
|
922
|
+
*/
|
|
923
|
+
interface ThemeImageValue {
|
|
924
|
+
/** Display height in pixels */
|
|
925
|
+
height?: number;
|
|
926
|
+
/** Reference to image in dotLottie package (i/ folder) */
|
|
927
|
+
id?: string;
|
|
928
|
+
/** External URL or data URI (fallback if id not found) */
|
|
929
|
+
url?: string;
|
|
930
|
+
/** Display width in pixels */
|
|
931
|
+
width?: number;
|
|
932
|
+
}
|
|
933
|
+
/**
|
|
934
|
+
* Base properties shared by all theme rules.
|
|
935
|
+
*/
|
|
936
|
+
interface ThemeBaseRule {
|
|
937
|
+
/** Limit rule to specific animations (omit to apply to all) */
|
|
938
|
+
animations?: string[];
|
|
939
|
+
/** Lottie expression for dynamic values */
|
|
940
|
+
expression?: string;
|
|
941
|
+
/** Slot ID in the Lottie animation (case-sensitive) */
|
|
942
|
+
id: string;
|
|
943
|
+
}
|
|
944
|
+
/**
|
|
945
|
+
* Color rule for overriding color properties (fill, stroke, text color).
|
|
946
|
+
*/
|
|
947
|
+
interface ThemeColorRule extends ThemeBaseRule {
|
|
948
|
+
/** Animated color keyframes */
|
|
949
|
+
keyframes?: ThemeColorKeyframe[];
|
|
950
|
+
type: 'Color';
|
|
951
|
+
/** Static color value (RGB or RGBA, 0-1 range) */
|
|
952
|
+
value?: Color;
|
|
953
|
+
}
|
|
954
|
+
/**
|
|
955
|
+
* Scalar rule for overriding numeric properties (opacity, stroke width, rotation).
|
|
956
|
+
*/
|
|
957
|
+
interface ThemeScalarRule extends ThemeBaseRule {
|
|
958
|
+
/** Animated scalar keyframes */
|
|
959
|
+
keyframes?: ThemeScalarKeyframe[];
|
|
960
|
+
type: 'Scalar';
|
|
961
|
+
/** Static numeric value */
|
|
962
|
+
value?: number;
|
|
963
|
+
}
|
|
964
|
+
/**
|
|
965
|
+
* Position rule for overriding position properties.
|
|
966
|
+
*/
|
|
967
|
+
interface ThemePositionRule extends ThemeBaseRule {
|
|
968
|
+
/** Animated position keyframes */
|
|
969
|
+
keyframes?: ThemePositionKeyframe[];
|
|
970
|
+
type: 'Position';
|
|
971
|
+
/** Static position (2D or 3D coordinates) */
|
|
972
|
+
value?: Vector;
|
|
973
|
+
}
|
|
974
|
+
/**
|
|
975
|
+
* Vector rule for overriding vector properties (scale, size).
|
|
976
|
+
*/
|
|
977
|
+
interface ThemeVectorRule extends ThemeBaseRule {
|
|
978
|
+
/** Animated vector keyframes */
|
|
979
|
+
keyframes?: ThemeVectorKeyframe[];
|
|
980
|
+
type: 'Vector';
|
|
981
|
+
/** Static vector value */
|
|
982
|
+
value?: Vector;
|
|
983
|
+
}
|
|
984
|
+
/**
|
|
985
|
+
* Gradient rule for overriding gradient properties.
|
|
986
|
+
*/
|
|
987
|
+
interface ThemeGradientRule extends ThemeBaseRule {
|
|
988
|
+
/** Animated gradient keyframes */
|
|
989
|
+
keyframes?: ThemeGradientKeyframe[];
|
|
990
|
+
type: 'Gradient';
|
|
991
|
+
/** Static gradient (array of color stops) */
|
|
992
|
+
value?: ThemeGradientStop[];
|
|
993
|
+
}
|
|
994
|
+
/**
|
|
995
|
+
* Image rule for overriding image assets.
|
|
996
|
+
*/
|
|
997
|
+
interface ThemeImageRule extends ThemeBaseRule {
|
|
998
|
+
type: 'Image';
|
|
999
|
+
/** Image replacement configuration (required for Image rules) */
|
|
1000
|
+
value: ThemeImageValue;
|
|
1001
|
+
}
|
|
1002
|
+
/**
|
|
1003
|
+
* Text rule for overriding text document properties.
|
|
1004
|
+
*/
|
|
1005
|
+
interface ThemeTextRule extends ThemeBaseRule {
|
|
1006
|
+
/** Animated text keyframes */
|
|
1007
|
+
keyframes?: ThemeTextKeyframe[];
|
|
1008
|
+
type: 'Text';
|
|
1009
|
+
/** Static text document configuration */
|
|
1010
|
+
value?: ThemeTextDocument;
|
|
1011
|
+
}
|
|
1012
|
+
/**
|
|
1013
|
+
* Union of all theme rule types.
|
|
1014
|
+
*/
|
|
1015
|
+
type ThemeRule = ThemeColorRule | ThemeScalarRule | ThemePositionRule | ThemeVectorRule | ThemeGradientRule | ThemeImageRule | ThemeTextRule;
|
|
1016
|
+
/**
|
|
1017
|
+
* Theme definition for customizing Lottie animation properties.
|
|
1018
|
+
* Themes override animated properties mapped to Lottie Slots.
|
|
1019
|
+
* @see https://dotlottie.io/spec/2.0/#themes
|
|
1020
|
+
*
|
|
1021
|
+
* @example
|
|
1022
|
+
* ```typescript
|
|
1023
|
+
* const theme: Theme = {
|
|
1024
|
+
* rules: [
|
|
1025
|
+
* {
|
|
1026
|
+
* id: 'background_color',
|
|
1027
|
+
* type: 'Color',
|
|
1028
|
+
* value: [0.2, 0.4, 0.8] // Blue
|
|
1029
|
+
* },
|
|
1030
|
+
* {
|
|
1031
|
+
* id: 'title_text',
|
|
1032
|
+
* type: 'Text',
|
|
1033
|
+
* value: {
|
|
1034
|
+
* text: 'Hello World',
|
|
1035
|
+
* fontSize: 48,
|
|
1036
|
+
* fillColor: [1, 1, 1]
|
|
1037
|
+
* }
|
|
1038
|
+
* }
|
|
1039
|
+
* ]
|
|
1040
|
+
* };
|
|
1041
|
+
*
|
|
1042
|
+
* dotLottie.setThemeData(theme);
|
|
1043
|
+
* ```
|
|
1044
|
+
*/
|
|
1045
|
+
interface Theme {
|
|
1046
|
+
/** Array of rules defining property overrides */
|
|
1047
|
+
rules: ThemeRule[];
|
|
1048
|
+
}
|
|
1049
|
+
//#endregion
|
|
1050
|
+
//#region src/dotlottie.d.ts
|
|
1051
|
+
declare class DotLottie {
|
|
1052
|
+
protected _canvas: HTMLCanvasElement | OffscreenCanvas | RenderSurface | null;
|
|
1053
|
+
private _pendingLoad;
|
|
1054
|
+
protected _context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D | null;
|
|
1055
|
+
private readonly _eventManager;
|
|
1056
|
+
private _animationFrameId;
|
|
1057
|
+
private readonly _frameManager;
|
|
1058
|
+
protected _dotLottieCore: DotLottiePlayerWasm | null;
|
|
1059
|
+
private _stateMachineId;
|
|
1060
|
+
private _stateMachineConfig;
|
|
1061
|
+
private _isStateMachineRunning;
|
|
1062
|
+
protected _renderConfig: RenderConfig;
|
|
1063
|
+
private _isFrozen;
|
|
1064
|
+
private _backgroundColor;
|
|
1065
|
+
private _boundOnClick;
|
|
1066
|
+
private _boundOnPointerUp;
|
|
1067
|
+
private _boundOnPointerDown;
|
|
1068
|
+
private _boundOnPointerMove;
|
|
1069
|
+
private _boundOnPointerEnter;
|
|
1070
|
+
private _boundOnPointerLeave;
|
|
1071
|
+
private _bufferMismatchCount;
|
|
1072
|
+
private _lastExpectedBufferSize;
|
|
1073
|
+
private _marker;
|
|
1074
|
+
/**
|
|
1075
|
+
* Creates a new DotLottie player instance for rendering Lottie animations.
|
|
1076
|
+
* Initializes the WASM module, event system, and loads animation if src or data is provided in config.
|
|
1077
|
+
* @param config - Configuration object specifying animation source, playback settings, and rendering options
|
|
1078
|
+
*/
|
|
1079
|
+
constructor(config: Config);
|
|
1080
|
+
protected _initWasm(): Promise<void>;
|
|
1081
|
+
protected _createCore(): DotLottiePlayerWasm;
|
|
1082
|
+
protected _onCoreCreated(): void;
|
|
1083
|
+
private _drainPlayerEvents;
|
|
1084
|
+
private _drainSmEvents;
|
|
1085
|
+
private _dispatchError;
|
|
1086
|
+
private _fetchData;
|
|
1087
|
+
private _loadFromData;
|
|
1088
|
+
private _loadFromSrc;
|
|
1089
|
+
/**
|
|
1090
|
+
* Gets the raw pixel buffer containing the rendered animation frame.
|
|
1091
|
+
* Returns RGBA pixel data as a Uint8Array for advanced image processing or custom rendering.
|
|
1092
|
+
*/
|
|
1093
|
+
get buffer(): Uint8Array | null;
|
|
1094
|
+
/**
|
|
1095
|
+
* Gets the ID of the currently active animation from a multi-animation dotLottie file.
|
|
1096
|
+
* Returns undefined if no specific animation is active or for single-animation files.
|
|
1097
|
+
*/
|
|
1098
|
+
get activeAnimationId(): string | undefined;
|
|
1099
|
+
/**
|
|
1100
|
+
* Gets the ID of the currently active theme applied to the animation.
|
|
1101
|
+
* Returns undefined if no theme is active. Themes modify colors and visual properties.
|
|
1102
|
+
*/
|
|
1103
|
+
get activeThemeId(): string | undefined;
|
|
1104
|
+
/**
|
|
1105
|
+
* Gets the current layout configuration for positioning and scaling the animation.
|
|
1106
|
+
* Includes fit mode (contain, cover, fill, etc.) and alignment [x, y] values (0-1 range).
|
|
1107
|
+
*/
|
|
1108
|
+
get layout(): Layout | undefined;
|
|
1109
|
+
/**
|
|
1110
|
+
* Gets the currently active marker name if a marker-based segment is set.
|
|
1111
|
+
* Returns undefined if no marker is active. Use setMarker() to activate a named segment.
|
|
1112
|
+
*/
|
|
1113
|
+
get marker(): string | undefined;
|
|
1114
|
+
/**
|
|
1115
|
+
* Gets the animation manifest containing metadata about animations, themes, and states.
|
|
1116
|
+
* Returns null if no manifest is available or if the loaded animation doesn't include one.
|
|
1117
|
+
*/
|
|
1118
|
+
get manifest(): Manifest | null;
|
|
1119
|
+
/**
|
|
1120
|
+
* Gets the current rendering configuration.
|
|
1121
|
+
* Includes settings like devicePixelRatio, autoResize, and freezeOnOffscreen.
|
|
1122
|
+
*/
|
|
1123
|
+
get renderConfig(): RenderConfig;
|
|
1124
|
+
/**
|
|
1125
|
+
* Gets the currently active playback segment as [startFrame, endFrame].
|
|
1126
|
+
* If no segment is set, returns undefined and the full animation plays.
|
|
1127
|
+
*/
|
|
1128
|
+
get segment(): [number, number] | undefined;
|
|
1129
|
+
/**
|
|
1130
|
+
* Gets the current loop configuration.
|
|
1131
|
+
* Returns true if the animation is set to loop continuously.
|
|
1132
|
+
*/
|
|
1133
|
+
get loop(): boolean;
|
|
1134
|
+
/**
|
|
1135
|
+
* Gets the current playback mode.
|
|
1136
|
+
* Determines playback direction: 'forward', 'reverse', 'bounce' (forward then reverse), or 'reverse-bounce'.
|
|
1137
|
+
*/
|
|
1138
|
+
get mode(): Mode;
|
|
1139
|
+
/**
|
|
1140
|
+
* Indicates whether rendering is currently frozen.
|
|
1141
|
+
* True when freeze() has been called and the rendering loop is paused to save resources.
|
|
1142
|
+
*/
|
|
1143
|
+
get isFrozen(): boolean;
|
|
1144
|
+
/**
|
|
1145
|
+
* Indicates whether a state machine is currently active and running.
|
|
1146
|
+
* True after stateMachineStart() is called and until stateMachineStop() is called.
|
|
1147
|
+
*/
|
|
1148
|
+
get isStateMachineRunning(): boolean;
|
|
1149
|
+
/**
|
|
1150
|
+
* Gets the current background color.
|
|
1151
|
+
* Returns the background color as a string (e.g., '#FFFFFF' or 'transparent').
|
|
1152
|
+
*/
|
|
1153
|
+
get backgroundColor(): string;
|
|
1154
|
+
/**
|
|
1155
|
+
* Gets the autoplay configuration.
|
|
1156
|
+
* Returns true if the animation is configured to start playing automatically when loaded.
|
|
1157
|
+
*/
|
|
1158
|
+
get autoplay(): boolean;
|
|
1159
|
+
/**
|
|
1160
|
+
* Gets the frame interpolation setting.
|
|
1161
|
+
* Returns true if frame interpolation is enabled for smoother animation playback.
|
|
1162
|
+
*/
|
|
1163
|
+
get useFrameInterpolation(): boolean;
|
|
1164
|
+
/**
|
|
1165
|
+
* Gets the current playback speed.
|
|
1166
|
+
* Returns the speed multiplier (1 = normal speed, 2 = double speed, 0.5 = half speed).
|
|
1167
|
+
*/
|
|
1168
|
+
get speed(): number;
|
|
1169
|
+
/**
|
|
1170
|
+
* Indicates whether the WASM module and core player have been initialized.
|
|
1171
|
+
* Check this before performing operations that require the player to be ready.
|
|
1172
|
+
*/
|
|
1173
|
+
get isReady(): boolean;
|
|
1174
|
+
/**
|
|
1175
|
+
* Indicates whether an animation has been successfully loaded and is ready for playback.
|
|
1176
|
+
* Check this before calling play() or other playback methods to ensure the animation is ready.
|
|
1177
|
+
*/
|
|
1178
|
+
get isLoaded(): boolean;
|
|
1179
|
+
/**
|
|
1180
|
+
* Indicates whether the animation is currently playing.
|
|
1181
|
+
* True when animation is actively playing, false when paused, stopped, or not started.
|
|
1182
|
+
*/
|
|
1183
|
+
get isPlaying(): boolean;
|
|
1184
|
+
/**
|
|
1185
|
+
* Indicates whether the animation is currently paused.
|
|
1186
|
+
* True when pause() has been called and animation is not playing or stopped.
|
|
1187
|
+
*/
|
|
1188
|
+
get isPaused(): boolean;
|
|
1189
|
+
/**
|
|
1190
|
+
* Indicates whether the animation is currently stopped.
|
|
1191
|
+
* True when stop() has been called or animation hasn't started yet.
|
|
1192
|
+
*/
|
|
1193
|
+
get isStopped(): boolean;
|
|
1194
|
+
/**
|
|
1195
|
+
* Gets the current frame number of the animation.
|
|
1196
|
+
* Useful for tracking playback position or implementing custom frame displays. Rounded to 2 decimal places.
|
|
1197
|
+
*/
|
|
1198
|
+
get currentFrame(): number;
|
|
1199
|
+
/**
|
|
1200
|
+
* Gets the number of times the animation has completed a loop during the current playback.
|
|
1201
|
+
* Increments each time the animation completes one full cycle.
|
|
1202
|
+
*/
|
|
1203
|
+
get loopCount(): number;
|
|
1204
|
+
/**
|
|
1205
|
+
* Gets the total number of frames in the animation.
|
|
1206
|
+
* Use with currentFrame to calculate playback progress as a percentage.
|
|
1207
|
+
*/
|
|
1208
|
+
get totalFrames(): number;
|
|
1209
|
+
/**
|
|
1210
|
+
* Gets the total duration of the animation in seconds.
|
|
1211
|
+
* Represents the time to play from the first frame to the last at normal speed (speed = 1).
|
|
1212
|
+
*/
|
|
1213
|
+
get duration(): number;
|
|
1214
|
+
/**
|
|
1215
|
+
* Gets the duration of the currently active segment in seconds.
|
|
1216
|
+
* If no segment is set, returns the full animation duration.
|
|
1217
|
+
*/
|
|
1218
|
+
get segmentDuration(): number;
|
|
1219
|
+
/**
|
|
1220
|
+
* Gets the canvas element used for rendering the animation.
|
|
1221
|
+
* Returns the HTMLCanvasElement, OffscreenCanvas, or RenderSurface set during initialization.
|
|
1222
|
+
*/
|
|
1223
|
+
get canvas(): HTMLCanvasElement | OffscreenCanvas | RenderSurface | null;
|
|
1224
|
+
/**
|
|
1225
|
+
* Dynamically loads a new animation, replacing the current one if any.
|
|
1226
|
+
* Stops current playback, cleans up resources, and loads from the provided src or data.
|
|
1227
|
+
* @param config - Configuration for the new animation (all Config properties except canvas)
|
|
1228
|
+
*/
|
|
1229
|
+
load(config: Omit<Config, 'canvas'>): void;
|
|
1230
|
+
protected _draw(): void;
|
|
1231
|
+
private _cleanupCanvas;
|
|
1232
|
+
private _initializeCanvas;
|
|
1233
|
+
protected _setupRendererOnCanvas(): void;
|
|
1234
|
+
private _stopAnimationLoop;
|
|
1235
|
+
private _startAnimationLoop;
|
|
1236
|
+
private _animationLoop;
|
|
1237
|
+
/**
|
|
1238
|
+
* Starts or resumes animation playback from the current frame.
|
|
1239
|
+
* Unfreezes rendering if frozen and starts the animation loop. Updates isPlaying state to true.
|
|
1240
|
+
*/
|
|
1241
|
+
play(): void;
|
|
1242
|
+
/**
|
|
1243
|
+
* Pauses animation playback at the current frame.
|
|
1244
|
+
* Stops the animation loop while preserving the current frame position. Updates isPaused state to true.
|
|
1245
|
+
*/
|
|
1246
|
+
pause(): void;
|
|
1247
|
+
/**
|
|
1248
|
+
* Stops animation playback and resets to the start frame.
|
|
1249
|
+
* Halts the animation loop and returns to the beginning. Updates isStopped state to true.
|
|
1250
|
+
*/
|
|
1251
|
+
stop(): void;
|
|
1252
|
+
/**
|
|
1253
|
+
* Seeks to a specific frame in the animation and renders it.
|
|
1254
|
+
* Useful for implementing custom scrubbing controls or precise frame positioning.
|
|
1255
|
+
* @param frame - The target frame number to seek to
|
|
1256
|
+
*/
|
|
1257
|
+
setFrame(frame: number): void;
|
|
1258
|
+
/**
|
|
1259
|
+
* Changes the animation playback speed.
|
|
1260
|
+
* Values above 1 speed up playback, below 1 slow it down.
|
|
1261
|
+
* @param speed - Playback speed multiplier (e.g., 2 for 2x speed, 0.5 for half speed)
|
|
1262
|
+
*/
|
|
1263
|
+
setSpeed(speed: number): void;
|
|
1264
|
+
/**
|
|
1265
|
+
* Changes the background color of the canvas or animation.
|
|
1266
|
+
* For HTMLCanvasElement, sets the CSS background. For other surfaces, renders behind the animation.
|
|
1267
|
+
* @param color - CSS color string (e.g., '#FFFFFF', 'rgba(0,0,0,0.5)', 'transparent')
|
|
1268
|
+
*/
|
|
1269
|
+
setBackgroundColor(color: string): void;
|
|
1270
|
+
/**
|
|
1271
|
+
* Enables or disables continuous looping of the animation.
|
|
1272
|
+
* When enabled with loopCount set to 0, animation repeats indefinitely.
|
|
1273
|
+
* @param loop - True to enable looping, false to play once
|
|
1274
|
+
*/
|
|
1275
|
+
setLoop(loop: boolean): void;
|
|
1276
|
+
/**
|
|
1277
|
+
* Sets the number of additional times to replay the animation after the first play.
|
|
1278
|
+
* Requires loop to be true. A value of 0 means infinite replays; a positive value n means
|
|
1279
|
+
* the animation plays a total of n + 1 times (initial play + n replays).
|
|
1280
|
+
* @param loopCount - Number of additional replays (0 = infinite, 1 = plays twice, 2 = plays three times, etc.)
|
|
1281
|
+
*/
|
|
1282
|
+
setLoopCount(loopCount: number): void;
|
|
1283
|
+
/**
|
|
1284
|
+
* Enables or disables frame interpolation for smoother playback.
|
|
1285
|
+
* When enabled, interpolates between frames. When disabled, shows exact frame-by-frame animation.
|
|
1286
|
+
* @param useFrameInterpolation - True for smooth interpolation, false for exact frames
|
|
1287
|
+
*/
|
|
1288
|
+
setUseFrameInterpolation(useFrameInterpolation: boolean): void;
|
|
1289
|
+
/**
|
|
1290
|
+
* Subscribes to animation events like play, pause, frame, complete, etc.
|
|
1291
|
+
* Use this to react to animation state changes and playback progress.
|
|
1292
|
+
* @param type - Event type to listen for (e.g., 'play', 'frame', 'complete')
|
|
1293
|
+
* @param listener - Callback function invoked when the event occurs
|
|
1294
|
+
*/
|
|
1295
|
+
addEventListener<T extends EventType>(type: T, listener: EventListener<T>): void;
|
|
1296
|
+
/**
|
|
1297
|
+
* Unsubscribes from animation events.
|
|
1298
|
+
* If no listener is provided, removes all listeners for the given event type.
|
|
1299
|
+
* @param type - Event type to stop listening for
|
|
1300
|
+
* @param listener - Specific callback to remove, or undefined to remove all
|
|
1301
|
+
*/
|
|
1302
|
+
removeEventListener<T extends EventType>(type: T, listener?: EventListener<T>): void;
|
|
1303
|
+
/**
|
|
1304
|
+
* Cleans up and destroys the player instance, releasing all resources.
|
|
1305
|
+
* Stops playback, removes event listeners, and frees WASM memory. Call when the player is no longer needed.
|
|
1306
|
+
*/
|
|
1307
|
+
destroy(): void;
|
|
1308
|
+
/**
|
|
1309
|
+
* Pauses the rendering loop without changing playback state.
|
|
1310
|
+
* Useful for reducing CPU/GPU usage when the animation is offscreen or hidden. Dispatches 'freeze' event.
|
|
1311
|
+
*/
|
|
1312
|
+
freeze(): void;
|
|
1313
|
+
/**
|
|
1314
|
+
* Resumes the rendering loop after being frozen.
|
|
1315
|
+
* Restarts frame rendering while maintaining the current playback state. Dispatches 'unfreeze' event.
|
|
1316
|
+
*/
|
|
1317
|
+
unfreeze(): void;
|
|
1318
|
+
/**
|
|
1319
|
+
* Recalculates and updates canvas dimensions based on current size.
|
|
1320
|
+
* Call this when the canvas container size changes to maintain proper rendering. Usually handled by autoResize.
|
|
1321
|
+
*/
|
|
1322
|
+
resize(): void;
|
|
1323
|
+
/**
|
|
1324
|
+
* Changes the canvas element used for rendering.
|
|
1325
|
+
* Useful for moving the animation to a different canvas without recreating the player instance.
|
|
1326
|
+
* @param canvas - New HTMLCanvasElement, OffscreenCanvas, or RenderSurface to render to
|
|
1327
|
+
*/
|
|
1328
|
+
setCanvas(canvas: HTMLCanvasElement | OffscreenCanvas | RenderSurface): void;
|
|
1329
|
+
/**
|
|
1330
|
+
* Applies a 3x3 transformation matrix to the entire animation on the canvas.
|
|
1331
|
+
* Use this to translate, rotate, scale, or skew the animation rendering.
|
|
1332
|
+
* @param transform - 9-element array representing the transformation matrix in row-major order
|
|
1333
|
+
* @returns True if transformation was applied successfully, false otherwise
|
|
1334
|
+
*/
|
|
1335
|
+
setTransform(transform: Transform): boolean;
|
|
1336
|
+
/**
|
|
1337
|
+
* Gets the 3x3 transformation matrix applied to the animation.
|
|
1338
|
+
* Returns a 9-element array representing affine transformations (translation, rotation, scale, skew).
|
|
1339
|
+
* @returns Transform array of 9 numbers, or undefined if not available
|
|
1340
|
+
*/
|
|
1341
|
+
getTransform(): Transform | undefined;
|
|
1342
|
+
/**
|
|
1343
|
+
* Sets a frame range to play instead of the full animation.
|
|
1344
|
+
* Useful for playing specific sections or creating animation sequences from subsections.
|
|
1345
|
+
* @param startFrame - Starting frame number (inclusive)
|
|
1346
|
+
* @param endFrame - Ending frame number (inclusive)
|
|
1347
|
+
*/
|
|
1348
|
+
setSegment(startFrame: number, endFrame: number): void;
|
|
1349
|
+
/**
|
|
1350
|
+
* Changes the playback direction mode.
|
|
1351
|
+
* Controls whether animation plays forward, in reverse, or alternates (bounce).
|
|
1352
|
+
* @param mode - Playback mode: 'forward', 'reverse', 'bounce', or 'reverse-bounce'
|
|
1353
|
+
*/
|
|
1354
|
+
setMode(mode: Mode): void;
|
|
1355
|
+
/**
|
|
1356
|
+
* Updates rendering configuration like autoResize, devicePixelRatio, and freezeOnOffscreen.
|
|
1357
|
+
* Dynamically changes how the canvas behaves without reloading the animation.
|
|
1358
|
+
* @param config - Partial RenderConfig with properties to update
|
|
1359
|
+
*/
|
|
1360
|
+
setRenderConfig(config: RenderConfig): void;
|
|
1361
|
+
/**
|
|
1362
|
+
* Switches to a different animation within a multi-animation dotLottie file.
|
|
1363
|
+
* Use this to load a different animation by its ID without creating a new player instance.
|
|
1364
|
+
* @param animationId - ID of the animation to load (must exist in the manifest)
|
|
1365
|
+
*/
|
|
1366
|
+
loadAnimation(animationId: string): void;
|
|
1367
|
+
/**
|
|
1368
|
+
* Activates a named marker to play only that marked segment.
|
|
1369
|
+
* Markers define named sections within an animation. Use markers() to list available markers.
|
|
1370
|
+
* @param marker - Name of the marker to activate
|
|
1371
|
+
*/
|
|
1372
|
+
setMarker(marker: string): void;
|
|
1373
|
+
/**
|
|
1374
|
+
* Gets all markers defined in the animation with their time and duration.
|
|
1375
|
+
* Markers represent named sections that can be played using setMarker().
|
|
1376
|
+
* @returns Array of marker objects with name, time, and duration properties
|
|
1377
|
+
*/
|
|
1378
|
+
markers(): Marker[];
|
|
1379
|
+
/**
|
|
1380
|
+
* Applies a theme to the animation, modifying colors and visual properties.
|
|
1381
|
+
* Themes are predefined in the dotLottie manifest. Returns true if theme was successfully loaded.
|
|
1382
|
+
* @param themeId - ID of the theme to apply (must exist in manifest)
|
|
1383
|
+
* @returns True if theme loaded successfully, false otherwise
|
|
1384
|
+
*/
|
|
1385
|
+
setTheme(themeId: string): boolean;
|
|
1386
|
+
/**
|
|
1387
|
+
* Removes the currently applied theme and restores original animation colors.
|
|
1388
|
+
* Use this to revert to the default appearance after applying a theme.
|
|
1389
|
+
* @returns True if theme was reset successfully, false otherwise
|
|
1390
|
+
*/
|
|
1391
|
+
resetTheme(): boolean;
|
|
1392
|
+
/**
|
|
1393
|
+
* Applies a custom theme from theme data instead of manifest theme ID.
|
|
1394
|
+
* Useful for dynamically generated or user-created themes not in the manifest.
|
|
1395
|
+
*
|
|
1396
|
+
* @param themeData - Theme data as a JSON string or a structured Theme object
|
|
1397
|
+
* @returns True if theme loaded successfully, false otherwise
|
|
1398
|
+
*/
|
|
1399
|
+
setThemeData(themeData: Theme | string): boolean;
|
|
1400
|
+
/**
|
|
1401
|
+
* Sets multiple slot values at once for parameterized animations.
|
|
1402
|
+
* Slots allow runtime customization of colors, text, images, or other properties.
|
|
1403
|
+
* @param slots - Object mapping slot IDs to their values
|
|
1404
|
+
*/
|
|
1405
|
+
setSlots(slots: Record<string, unknown>): void;
|
|
1406
|
+
/**
|
|
1407
|
+
* Check if value is an array of keyframes (has objects with 't' and 's' properties)
|
|
1408
|
+
*/
|
|
1409
|
+
private _isKeyframeArray;
|
|
1410
|
+
/**
|
|
1411
|
+
* Get all slot IDs in the animation
|
|
1412
|
+
* @returns Array of slot ID strings
|
|
1413
|
+
*/
|
|
1414
|
+
getSlotIds(): string[];
|
|
1415
|
+
/**
|
|
1416
|
+
* Get the type of a slot
|
|
1417
|
+
* @param slotId - The slot ID to query
|
|
1418
|
+
* @returns The slot type ('color', 'gradient', 'text', 'scalar', 'vector', 'position', 'image') or undefined
|
|
1419
|
+
*/
|
|
1420
|
+
getSlotType(slotId: string): SlotType | undefined;
|
|
1421
|
+
/**
|
|
1422
|
+
* Get the current value of a slot
|
|
1423
|
+
* @param slotId - The slot ID to query
|
|
1424
|
+
* @returns The parsed slot value or undefined if not found
|
|
1425
|
+
*/
|
|
1426
|
+
getSlot(slotId: string): unknown;
|
|
1427
|
+
/**
|
|
1428
|
+
* Get all slots as an object with slot IDs as keys
|
|
1429
|
+
* @returns Object containing all slots, or empty object if not loaded
|
|
1430
|
+
*/
|
|
1431
|
+
getSlots(): Record<string, unknown>;
|
|
1432
|
+
/**
|
|
1433
|
+
* Set a color slot value
|
|
1434
|
+
* @param slotId - The slot ID to set
|
|
1435
|
+
* @param value - Static color [r, g, b, a] or array of keyframes
|
|
1436
|
+
* @returns true if successful
|
|
1437
|
+
*/
|
|
1438
|
+
setColorSlot(slotId: string, value: ColorSlotValue): boolean;
|
|
1439
|
+
/**
|
|
1440
|
+
* Set a scalar slot value (single number like rotation, opacity)
|
|
1441
|
+
* @param slotId - The slot ID to set
|
|
1442
|
+
* @param value - Static number or array of keyframes
|
|
1443
|
+
* @returns true if successful
|
|
1444
|
+
*/
|
|
1445
|
+
setScalarSlot(slotId: string, value: ScalarSlotValue): boolean;
|
|
1446
|
+
/**
|
|
1447
|
+
* Set a vector slot value (2D or 3D point for position, scale, etc.)
|
|
1448
|
+
* Handles both "vector" and "position" slot types
|
|
1449
|
+
* @param slotId - The slot ID to set
|
|
1450
|
+
* @param value - Static vector [x, y] or array of keyframes
|
|
1451
|
+
* @returns true if successful
|
|
1452
|
+
*/
|
|
1453
|
+
setVectorSlot(slotId: string, value: VectorSlotValue): boolean;
|
|
1454
|
+
/**
|
|
1455
|
+
* Set a gradient slot value
|
|
1456
|
+
* @param slotId - The slot ID to set
|
|
1457
|
+
* @param value - Static gradient or array of keyframes
|
|
1458
|
+
* @param colorStopCount - Number of color stops
|
|
1459
|
+
* @returns true if successful
|
|
1460
|
+
*/
|
|
1461
|
+
setGradientSlot(slotId: string, value: GradientSlotValue, colorStopCount: number): boolean;
|
|
1462
|
+
/**
|
|
1463
|
+
* Set a text slot value (always static - text documents don't support animation)
|
|
1464
|
+
* Supports partial updates - only provided properties will be changed, others inherit from existing value
|
|
1465
|
+
* @param slotId - The slot ID to set
|
|
1466
|
+
* @param value - Text document properties (partial allowed)
|
|
1467
|
+
* @returns true if successful
|
|
1468
|
+
*/
|
|
1469
|
+
setTextSlot(slotId: string, value: TextSlotValue): boolean;
|
|
1470
|
+
/**
|
|
1471
|
+
* Reset a slot to its original value
|
|
1472
|
+
* @param slotId - The slot ID to reset
|
|
1473
|
+
* @returns true if successful
|
|
1474
|
+
*/
|
|
1475
|
+
resetSlot(slotId: string): boolean;
|
|
1476
|
+
/**
|
|
1477
|
+
* Clear a slot's custom value
|
|
1478
|
+
* @param slotId - The slot ID to clear
|
|
1479
|
+
* @returns true if successful
|
|
1480
|
+
*/
|
|
1481
|
+
clearSlot(slotId: string): boolean;
|
|
1482
|
+
/**
|
|
1483
|
+
* Reset all slots to their original values
|
|
1484
|
+
* @returns true if successful
|
|
1485
|
+
*/
|
|
1486
|
+
resetSlots(): boolean;
|
|
1487
|
+
/**
|
|
1488
|
+
* Clear all slot custom values
|
|
1489
|
+
* @returns true if successful
|
|
1490
|
+
*/
|
|
1491
|
+
clearSlots(): boolean;
|
|
1492
|
+
/**
|
|
1493
|
+
* Updates the layout configuration for positioning and scaling the animation.
|
|
1494
|
+
* Changes how the animation fits and aligns within the canvas without requiring a reload.
|
|
1495
|
+
* @param layout - New layout configuration with fit mode and alignment values
|
|
1496
|
+
*/
|
|
1497
|
+
setLayout(layout: Layout): void;
|
|
1498
|
+
/**
|
|
1499
|
+
* Sets a custom viewport region for rendering a portion of the animation.
|
|
1500
|
+
* Defines a rectangular area to render, useful for implementing animation clipping or panning effects.
|
|
1501
|
+
* @param x - X coordinate of the viewport's top-left corner
|
|
1502
|
+
* @param y - Y coordinate of the viewport's top-left corner
|
|
1503
|
+
* @param width - Width of the viewport in pixels
|
|
1504
|
+
* @param height - Height of the viewport in pixels
|
|
1505
|
+
* @returns True if viewport was set successfully, false otherwise
|
|
1506
|
+
*/
|
|
1507
|
+
setViewport(x: number, y: number, width: number, height: number): boolean;
|
|
1508
|
+
/**
|
|
1509
|
+
* Configures the URL for loading the WASM module.
|
|
1510
|
+
* Call this before creating any player instances to load the WASM from a custom CDN or local path.
|
|
1511
|
+
* @param url - URL pointing to the dotlottie WASM file
|
|
1512
|
+
*/
|
|
1513
|
+
static setWasmUrl(url: string): void;
|
|
1514
|
+
/**
|
|
1515
|
+
* @experimental
|
|
1516
|
+
* Register a custom font for use in animations
|
|
1517
|
+
* @param fontName - The name of the font to register
|
|
1518
|
+
* @param fontSource - Either a URL string to fetch the font, or ArrayBuffer/Uint8Array of font data
|
|
1519
|
+
* @returns Promise<boolean> - true if registration succeeded, false otherwise
|
|
1520
|
+
*/
|
|
1521
|
+
static registerFont(fontName: string, fontSource: string | ArrayBuffer | Uint8Array): Promise<boolean>;
|
|
1522
|
+
/**
|
|
1523
|
+
* @experimental
|
|
1524
|
+
* Animates smoothly to a specific frame over a duration using linear easing.
|
|
1525
|
+
* Creates a tween animation transitioning from the current frame to the target frame.
|
|
1526
|
+
* @param frame - Target frame number to tween to
|
|
1527
|
+
* @param duration - Duration of the tween animation in seconds
|
|
1528
|
+
* @returns True if tween started successfully, false otherwise
|
|
1529
|
+
*/
|
|
1530
|
+
tween(frame: number, duration: number): boolean;
|
|
1531
|
+
/**
|
|
1532
|
+
* @experimental
|
|
1533
|
+
* Start a tween animation to a specific marker
|
|
1534
|
+
* @param marker - The marker name to tween to
|
|
1535
|
+
* @param duration - Duration of the tween animation in seconds
|
|
1536
|
+
* @returns true if tween was started successfully
|
|
1537
|
+
*/
|
|
1538
|
+
tweenToMarker(marker: string, duration: number): boolean;
|
|
1539
|
+
/**
|
|
1540
|
+
* Gets the original dimensions of the animation as defined in the source file.
|
|
1541
|
+
* Returns width and height in pixels representing the animation's intrinsic size.
|
|
1542
|
+
* @returns Object with width and height properties in pixels
|
|
1543
|
+
*/
|
|
1544
|
+
animationSize(): {
|
|
1545
|
+
height: number;
|
|
1546
|
+
width: number;
|
|
1547
|
+
};
|
|
1548
|
+
/**
|
|
1549
|
+
* Gets the Oriented Bounding Box (OBB) points of a layer by its name.
|
|
1550
|
+
* Returns 8 numbers representing 4 corner points (x,y) in clockwise order from top-left.
|
|
1551
|
+
* @param layerName - Name of the layer to get bounds for
|
|
1552
|
+
* @returns Array of 8 numbers representing the bounding box corners, or undefined if layer not found
|
|
1553
|
+
*/
|
|
1554
|
+
getLayerBoundingBox(layerName: string): number[] | undefined;
|
|
1555
|
+
/**
|
|
1556
|
+
* Converts theme data into Lottie slot format for dynamic content replacement.
|
|
1557
|
+
* @param _theme - Theme data as a JSON string
|
|
1558
|
+
* @param _slots - Slot definitions as a JSON string
|
|
1559
|
+
* @returns Transformed slots data as a JSON string
|
|
1560
|
+
*/
|
|
1561
|
+
static transformThemeToLottieSlots(_theme: string, _slots: string): string;
|
|
1562
|
+
/**
|
|
1563
|
+
* @experimental
|
|
1564
|
+
* Loads a state machine by its ID from the dotLottie manifest.
|
|
1565
|
+
* State machines enable interactive, event-driven animation behaviors.
|
|
1566
|
+
* @param stateMachineId - The ID of the state machine to load (must exist in manifest)
|
|
1567
|
+
* @returns True if the state machine was loaded successfully, false otherwise
|
|
1568
|
+
*/
|
|
1569
|
+
stateMachineLoad(stateMachineId: string): boolean;
|
|
1570
|
+
/**
|
|
1571
|
+
* @experimental
|
|
1572
|
+
* Load a state machine from data string
|
|
1573
|
+
* @param stateMachineData - The state machine data as a string
|
|
1574
|
+
* @returns true if the state machine was loaded successfully
|
|
1575
|
+
*/
|
|
1576
|
+
stateMachineLoadData(stateMachineData: string): boolean;
|
|
1577
|
+
/**
|
|
1578
|
+
* @experimental
|
|
1579
|
+
* Set the state machine config
|
|
1580
|
+
* @param config - The state machine config
|
|
1581
|
+
*/
|
|
1582
|
+
stateMachineSetConfig(config: StateMachineConfig | null): void;
|
|
1583
|
+
/**
|
|
1584
|
+
* @experimental
|
|
1585
|
+
* Start the state machine
|
|
1586
|
+
* @returns true if the state machine was started successfully
|
|
1587
|
+
*/
|
|
1588
|
+
stateMachineStart(): boolean;
|
|
1589
|
+
/**
|
|
1590
|
+
* @experimental
|
|
1591
|
+
* Stop the state machine
|
|
1592
|
+
* @returns true if the state machine was stopped successfully
|
|
1593
|
+
*/
|
|
1594
|
+
stateMachineStop(): boolean;
|
|
1595
|
+
/**
|
|
1596
|
+
* @experimental
|
|
1597
|
+
* Get the current status of the state machine
|
|
1598
|
+
* @returns The current status of the state machine as a string
|
|
1599
|
+
*/
|
|
1600
|
+
stateMachineGetStatus(): string;
|
|
1601
|
+
/**
|
|
1602
|
+
* @experimental
|
|
1603
|
+
* Get the current state of the state machine
|
|
1604
|
+
* @returns The current state of the state machine as a string
|
|
1605
|
+
*/
|
|
1606
|
+
stateMachineGetCurrentState(): string;
|
|
1607
|
+
/**
|
|
1608
|
+
* @experimental
|
|
1609
|
+
* Get the active state machine ID
|
|
1610
|
+
* @returns The active state machine ID as a string
|
|
1611
|
+
*/
|
|
1612
|
+
stateMachineGetActiveId(): string;
|
|
1613
|
+
/**
|
|
1614
|
+
* @experimental
|
|
1615
|
+
* Override the current state of the state machine
|
|
1616
|
+
* @param state - The state to override to
|
|
1617
|
+
* @param immediate - Whether to immediately transition to the state
|
|
1618
|
+
* @returns true if the state override was successful
|
|
1619
|
+
*/
|
|
1620
|
+
stateMachineOverrideState(state: string, immediate?: boolean): boolean;
|
|
1621
|
+
/**
|
|
1622
|
+
* @experimental
|
|
1623
|
+
* Get a specific state machine by ID
|
|
1624
|
+
* @param stateMachineId - The ID of the state machine to get
|
|
1625
|
+
* @returns The state machine data as a string
|
|
1626
|
+
*/
|
|
1627
|
+
stateMachineGet(stateMachineId: string): string;
|
|
1628
|
+
/**
|
|
1629
|
+
* @experimental
|
|
1630
|
+
* Get the list of state machine listeners
|
|
1631
|
+
* @returns Array of listener names
|
|
1632
|
+
*/
|
|
1633
|
+
stateMachineGetListeners(): string[];
|
|
1634
|
+
/**
|
|
1635
|
+
* @experimental
|
|
1636
|
+
* Set a boolean input value for the state machine
|
|
1637
|
+
* @param name - The name of the boolean input
|
|
1638
|
+
* @param value - The boolean value to set
|
|
1639
|
+
*/
|
|
1640
|
+
stateMachineSetBooleanInput(name: string, value: boolean): boolean;
|
|
1641
|
+
/**
|
|
1642
|
+
* @experimental
|
|
1643
|
+
* Set a numeric input value for the state machine
|
|
1644
|
+
* @param name - The name of the numeric input
|
|
1645
|
+
* @param value - The numeric value to set
|
|
1646
|
+
*/
|
|
1647
|
+
stateMachineSetNumericInput(name: string, value: number): boolean;
|
|
1648
|
+
/**
|
|
1649
|
+
* @experimental
|
|
1650
|
+
* Set a string input value for the state machine
|
|
1651
|
+
* @param name - The name of the string input
|
|
1652
|
+
* @param value - The string value to set
|
|
1653
|
+
*/
|
|
1654
|
+
stateMachineSetStringInput(name: string, value: string): boolean;
|
|
1655
|
+
/**
|
|
1656
|
+
* @experimental
|
|
1657
|
+
* Get a boolean input value from the state machine
|
|
1658
|
+
* @param name - The name of the boolean input
|
|
1659
|
+
* @returns The boolean value or undefined if not found
|
|
1660
|
+
*/
|
|
1661
|
+
stateMachineGetBooleanInput(name: string): boolean | undefined;
|
|
1662
|
+
/**
|
|
1663
|
+
* @experimental
|
|
1664
|
+
* Get a numeric input value from the state machine
|
|
1665
|
+
* @param name - The name of the numeric input
|
|
1666
|
+
* @returns The numeric value or undefined if not found
|
|
1667
|
+
*/
|
|
1668
|
+
stateMachineGetNumericInput(name: string): number | undefined;
|
|
1669
|
+
/**
|
|
1670
|
+
* @experimental
|
|
1671
|
+
* Get a string input value from the state machine
|
|
1672
|
+
* @param name - The name of the string input
|
|
1673
|
+
* @returns The string value or undefined if not found
|
|
1674
|
+
*/
|
|
1675
|
+
stateMachineGetStringInput(name: string): string | undefined;
|
|
1676
|
+
/**
|
|
1677
|
+
* @experimental
|
|
1678
|
+
* Get all the inputs of the current state machine.
|
|
1679
|
+
* @returns An array of input keys followed by its type at n+1.
|
|
1680
|
+
*/
|
|
1681
|
+
stateMachineGetInputs(): string[];
|
|
1682
|
+
/**
|
|
1683
|
+
* @experimental
|
|
1684
|
+
* Fire an event in the state machine
|
|
1685
|
+
* @param name - The name of the event to fire
|
|
1686
|
+
*/
|
|
1687
|
+
stateMachineFireEvent(name: string): void;
|
|
1688
|
+
/**
|
|
1689
|
+
* @experimental
|
|
1690
|
+
* Post a click event to the state machine
|
|
1691
|
+
* @param x - The x coordinate of the click
|
|
1692
|
+
* @param y - The y coordinate of the click
|
|
1693
|
+
*/
|
|
1694
|
+
stateMachinePostClickEvent(x: number, y: number): void;
|
|
1695
|
+
/**
|
|
1696
|
+
* @experimental
|
|
1697
|
+
* Post a pointer up event to the state machine
|
|
1698
|
+
* @param x - The x coordinate of the pointer
|
|
1699
|
+
* @param y - The y coordinate of the pointer
|
|
1700
|
+
*/
|
|
1701
|
+
stateMachinePostPointerUpEvent(x: number, y: number): void;
|
|
1702
|
+
/**
|
|
1703
|
+
* @experimental
|
|
1704
|
+
* Post a pointer down event to the state machine
|
|
1705
|
+
* @param x - The x coordinate of the pointer
|
|
1706
|
+
* @param y - The y coordinate of the pointer
|
|
1707
|
+
*/
|
|
1708
|
+
stateMachinePostPointerDownEvent(x: number, y: number): void;
|
|
1709
|
+
/**
|
|
1710
|
+
* @experimental
|
|
1711
|
+
* Post a pointer move event to the state machine
|
|
1712
|
+
* @param x - The x coordinate of the pointer
|
|
1713
|
+
* @param y - The y coordinate of the pointer
|
|
1714
|
+
*/
|
|
1715
|
+
stateMachinePostPointerMoveEvent(x: number, y: number): void;
|
|
1716
|
+
/**
|
|
1717
|
+
* @experimental
|
|
1718
|
+
* Post a pointer enter event to the state machine
|
|
1719
|
+
* @param x - The x coordinate of the pointer
|
|
1720
|
+
* @param y - The y coordinate of the pointer
|
|
1721
|
+
*/
|
|
1722
|
+
stateMachinePostPointerEnterEvent(x: number, y: number): void;
|
|
1723
|
+
/**
|
|
1724
|
+
* @experimental
|
|
1725
|
+
* Post a pointer exit event to the state machine
|
|
1726
|
+
* @param x - The x coordinate of the pointer
|
|
1727
|
+
* @param y - The y coordinate of the pointer
|
|
1728
|
+
*/
|
|
1729
|
+
stateMachinePostPointerExitEvent(x: number, y: number): void;
|
|
1730
|
+
private _onClick;
|
|
1731
|
+
private _onPointerUp;
|
|
1732
|
+
private _onPointerDown;
|
|
1733
|
+
private _onPointerMove;
|
|
1734
|
+
private _onPointerEnter;
|
|
1735
|
+
private _onPointerLeave;
|
|
1736
|
+
private _setupStateMachineListeners;
|
|
1737
|
+
private _cleanupStateMachineListeners;
|
|
1738
|
+
}
|
|
1739
|
+
//#endregion
|
|
1740
|
+
export { EventListener as $, ThemeImageRule as A, ThemeTextKeyframe as B, ThemeBaseKeyframe as C, StateMachineTransitionEvent as Ct, ThemeGradientKeyframe as D, ThemeColorRule as E, DotLottiePlayerWasm as Et, ThemeScalarKeyframe as F, Vector as G, ThemeVectorKeyframe as H, ThemeScalarRule as I, WebGPUConfig as J, VectorSlotValue as K, ThemeTextCaps as L, ThemePositionKeyframe as M, ThemePositionRule as N, ThemeGradientRule as O, ThemeRule as P, Event as Q, ThemeTextDocument as R, Theme as S, StateMachineStringInputValueChangeEvent as St, ThemeColorKeyframe as T, UnfreezeEvent as Tt, ThemeVectorRule as U, ThemeTextRule as V, Transform as W, CompleteEvent as X, BaseEvent as Y, DestroyEvent as Z, ScalarSlotValue as _, StateMachineNumericInputValueChangeEvent as _t, Config as a, LoadEvent as at, TextDocument as b, StateMachineStateExitEvent as bt, Gradient as c, PlayEvent as ct, Layout as d, RenderEvent as dt, EventManager as et, Manifest as f, StateMachineBooleanInputValueChangeEvent as ft, RenderSurface as g, StateMachineInternalMessage as gt, RenderConfig as h, StateMachineInputFiredEvent as ht, ColorSlotValue as i, LoadErrorEvent as it, ThemeImageValue as j, ThemeGradientStop as k, GradientSlotValue as l, ReadyEvent as lt, Mode as m, StateMachineErrorEvent as mt, BezierHandle as n, FrameEvent as nt, Data as o, LoopEvent as ot, Marker as p, StateMachineCustomEvent as pt, WebGLConfig as q, Color as r, FreezeEvent as rt, Fit as s, PauseEvent as st, DotLottie as t, EventType as tt, Keyframe as u, RenderErrorEvent as ut, SlotType as v, StateMachineStartEvent as vt, ThemeBaseRule as w, StopEvent as wt, TextSlotValue as x, StateMachineStopEvent as xt, StateMachineConfig as y, StateMachineStateEnteredEvent as yt, ThemeTextJustify as z };
|
|
1741
|
+
//# sourceMappingURL=dotlottie-CasD56IP.d.cts.map
|