@lytjs/plugin-animation 6.9.1 → 6.9.3
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/index.d.cts +459 -0
- package/dist/index.d.ts +459 -0
- package/package.json +3 -3
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,459 @@
|
|
|
1
|
+
import * as _lytjs_core from '@lytjs/core';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @lytjs/plugin-animation - 类型定义
|
|
5
|
+
*/
|
|
6
|
+
type EasingFunction = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'ease-in-quad' | 'ease-out-quad' | 'ease-in-out-quad' | 'ease-in-cubic' | 'ease-out-cubic' | 'ease-in-out-cubic' | 'ease-in-quart' | 'ease-out-quart' | 'ease-in-out-quart' | 'ease-in-quint' | 'ease-out-quint' | 'ease-in-out-quint' | 'ease-in-sine' | 'ease-out-sine' | 'ease-in-out-sine' | 'ease-in-expo' | 'ease-out-expo' | 'ease-in-out-expo' | 'ease-in-circ' | 'ease-out-circ' | 'ease-in-out-circ' | 'ease-in-back' | 'ease-out-back' | 'ease-in-out-back' | 'spring' | ((t: number) => number);
|
|
7
|
+
interface AnimationOptions {
|
|
8
|
+
/** 动画时长（毫秒） */
|
|
9
|
+
duration?: number;
|
|
10
|
+
/** 缓动函数 */
|
|
11
|
+
easing?: EasingFunction;
|
|
12
|
+
/** 动画延迟（毫秒） */
|
|
13
|
+
delay?: number;
|
|
14
|
+
/** 动画次数，-1 表示无限循环 */
|
|
15
|
+
iterations?: number;
|
|
16
|
+
/** 动画方向 */
|
|
17
|
+
direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
|
|
18
|
+
/** 动画填充模式 */
|
|
19
|
+
fill?: 'none' | 'forwards' | 'backwards' | 'both' | 'auto';
|
|
20
|
+
/** 动画开始前的回调 */
|
|
21
|
+
onStart?: () => void;
|
|
22
|
+
/** 动画更新时的回调 */
|
|
23
|
+
onUpdate?: (progress: number) => void;
|
|
24
|
+
/** 动画完成时的回调 */
|
|
25
|
+
onComplete?: () => void;
|
|
26
|
+
/** 动画暂停时的回调 */
|
|
27
|
+
onPause?: () => void;
|
|
28
|
+
/** 动画取消时的回调 */
|
|
29
|
+
onCancel?: () => void;
|
|
30
|
+
}
|
|
31
|
+
interface TransitionOptions {
|
|
32
|
+
/** 过渡属性，默认 all */
|
|
33
|
+
property?: string | string[];
|
|
34
|
+
/** 过渡时长（毫秒） */
|
|
35
|
+
duration?: number;
|
|
36
|
+
/** 缓动函数 */
|
|
37
|
+
easing?: EasingFunction;
|
|
38
|
+
/** 过渡延迟（毫秒） */
|
|
39
|
+
delay?: number;
|
|
40
|
+
/** 过渡开始前的回调 */
|
|
41
|
+
onBeforeEnter?: () => void;
|
|
42
|
+
/** 过渡进入中回调 */
|
|
43
|
+
onEnter?: () => void;
|
|
44
|
+
/** 过渡进入完成回调 */
|
|
45
|
+
onAfterEnter?: () => void;
|
|
46
|
+
/** 过渡离开前回调 */
|
|
47
|
+
onBeforeLeave?: () => void;
|
|
48
|
+
/** 过渡离开中回调 */
|
|
49
|
+
onLeave?: () => void;
|
|
50
|
+
/** 过渡离开完成回调 */
|
|
51
|
+
onAfterLeave?: () => void;
|
|
52
|
+
}
|
|
53
|
+
interface Keyframe {
|
|
54
|
+
/** 进度百分比 */
|
|
55
|
+
offset: number;
|
|
56
|
+
/** CSS 属性 */
|
|
57
|
+
[property: string]: string | number;
|
|
58
|
+
}
|
|
59
|
+
interface AnimationPluginOptions {
|
|
60
|
+
/** 默认动画时长 */
|
|
61
|
+
defaultDuration?: number;
|
|
62
|
+
/** 默认缓动函数 */
|
|
63
|
+
defaultEasing?: EasingFunction;
|
|
64
|
+
/** 是否启用自动清理 */
|
|
65
|
+
autoCleanup?: boolean;
|
|
66
|
+
}
|
|
67
|
+
interface AnimationInstance {
|
|
68
|
+
/** 动画 ID */
|
|
69
|
+
id: string;
|
|
70
|
+
/** 动画状态 */
|
|
71
|
+
state: 'idle' | 'playing' | 'paused' | 'completed' | 'cancelled';
|
|
72
|
+
/** 当前进度 0-1 */
|
|
73
|
+
progress: number;
|
|
74
|
+
/** 播放动画 */
|
|
75
|
+
play: () => void;
|
|
76
|
+
/** 暂停动画 */
|
|
77
|
+
pause: () => void;
|
|
78
|
+
/** 取消动画 */
|
|
79
|
+
cancel: () => void;
|
|
80
|
+
/** 重置动画 */
|
|
81
|
+
reset: () => void;
|
|
82
|
+
/** 跳转到指定进度 */
|
|
83
|
+
seek: (progress: number) => void;
|
|
84
|
+
/** 反转动画方向 */
|
|
85
|
+
reverse: () => void;
|
|
86
|
+
}
|
|
87
|
+
interface AnimationInstance {
|
|
88
|
+
/** 动画 ID */
|
|
89
|
+
id: string;
|
|
90
|
+
/** 动画状态 */
|
|
91
|
+
state: 'idle' | 'playing' | 'paused' | 'completed' | 'cancelled';
|
|
92
|
+
/** 当前进度 0-1 */
|
|
93
|
+
progress: number;
|
|
94
|
+
/** 播放动画 */
|
|
95
|
+
play: () => void;
|
|
96
|
+
/** 暂停动画 */
|
|
97
|
+
pause: () => void;
|
|
98
|
+
/** 取消动画 */
|
|
99
|
+
cancel: () => void;
|
|
100
|
+
/** 重置动画 */
|
|
101
|
+
reset: () => void;
|
|
102
|
+
/** 跳转到指定进度 */
|
|
103
|
+
seek: (progress: number) => void;
|
|
104
|
+
/** 反转动画方向 */
|
|
105
|
+
reverse: () => void;
|
|
106
|
+
}
|
|
107
|
+
interface AnimationInstance {
|
|
108
|
+
/** 动画 ID */
|
|
109
|
+
id: string;
|
|
110
|
+
/** 动画状态 */
|
|
111
|
+
state: 'idle' | 'playing' | 'paused' | 'completed' | 'cancelled';
|
|
112
|
+
/** 当前进度 0-1 */
|
|
113
|
+
progress: number;
|
|
114
|
+
/** 播放动画 */
|
|
115
|
+
play: () => void;
|
|
116
|
+
/** 暂停动画 */
|
|
117
|
+
pause: () => void;
|
|
118
|
+
/** 取消动画 */
|
|
119
|
+
cancel: () => void;
|
|
120
|
+
/** 重置动画 */
|
|
121
|
+
reset: () => void;
|
|
122
|
+
/** 跳转到指定进度 */
|
|
123
|
+
seek: (progress: number) => void;
|
|
124
|
+
/** 反转动画方向 */
|
|
125
|
+
reverse: () => void;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/**
|
|
129
|
+
* @lytjs/plugin-animation - GPU 加速增强
|
|
130
|
+
*
|
|
131
|
+
* 提供高性能的 GPU 加速动画支持
|
|
132
|
+
*/
|
|
133
|
+
/**
|
|
134
|
+
* GPU 加速配置
|
|
135
|
+
*/
|
|
136
|
+
interface GPUAccelerationOptions {
|
|
137
|
+
enable3D?: boolean;
|
|
138
|
+
willChange?: 'auto' | 'transform' | 'opacity' | 'scroll-position';
|
|
139
|
+
force3D?: boolean;
|
|
140
|
+
compositorThreshold?: number;
|
|
141
|
+
}
|
|
142
|
+
/**
|
|
143
|
+
* 将 2D transform 转换为 3D（启用 GPU 加速）
|
|
144
|
+
*/
|
|
145
|
+
declare function to3DTransform(transform: string): string;
|
|
146
|
+
/**
|
|
147
|
+
* 检测元素是否支持 GPU 加速
|
|
148
|
+
*/
|
|
149
|
+
declare function canUseGPU(element: Element): boolean;
|
|
150
|
+
/**
|
|
151
|
+
* 为元素启用 GPU 加速
|
|
152
|
+
*/
|
|
153
|
+
declare function enableGPUAcceleration(element: HTMLElement, options?: GPUAccelerationOptions): void;
|
|
154
|
+
/**
|
|
155
|
+
* 禁用元素的 GPU 加速
|
|
156
|
+
*/
|
|
157
|
+
declare function disableGPUAcceleration(element: HTMLElement): void;
|
|
158
|
+
/**
|
|
159
|
+
* GPU 加速的预设动画
|
|
160
|
+
*/
|
|
161
|
+
declare const GPU_PRESETS: {
|
|
162
|
+
/**
|
|
163
|
+
* 快速滑入（GPU 加速）
|
|
164
|
+
*/
|
|
165
|
+
gpuSlideIn: {
|
|
166
|
+
from: {
|
|
167
|
+
transform: string;
|
|
168
|
+
opacity: number;
|
|
169
|
+
};
|
|
170
|
+
to: {
|
|
171
|
+
transform: string;
|
|
172
|
+
opacity: number;
|
|
173
|
+
};
|
|
174
|
+
};
|
|
175
|
+
/**
|
|
176
|
+
* 快速滑出（GPU 加速）
|
|
177
|
+
*/
|
|
178
|
+
gpuSlideOut: {
|
|
179
|
+
from: {
|
|
180
|
+
transform: string;
|
|
181
|
+
opacity: number;
|
|
182
|
+
};
|
|
183
|
+
to: {
|
|
184
|
+
transform: string;
|
|
185
|
+
opacity: number;
|
|
186
|
+
};
|
|
187
|
+
};
|
|
188
|
+
/**
|
|
189
|
+
* 缩放进入（GPU 加速）
|
|
190
|
+
*/
|
|
191
|
+
gpuZoomIn: {
|
|
192
|
+
from: {
|
|
193
|
+
transform: string;
|
|
194
|
+
opacity: number;
|
|
195
|
+
};
|
|
196
|
+
to: {
|
|
197
|
+
transform: string;
|
|
198
|
+
opacity: number;
|
|
199
|
+
};
|
|
200
|
+
};
|
|
201
|
+
/**
|
|
202
|
+
* 缩放离开（GPU 加速）
|
|
203
|
+
*/
|
|
204
|
+
gpuZoomOut: {
|
|
205
|
+
from: {
|
|
206
|
+
transform: string;
|
|
207
|
+
opacity: number;
|
|
208
|
+
};
|
|
209
|
+
to: {
|
|
210
|
+
transform: string;
|
|
211
|
+
opacity: number;
|
|
212
|
+
};
|
|
213
|
+
};
|
|
214
|
+
/**
|
|
215
|
+
* 3D 旋转进入
|
|
216
|
+
*/
|
|
217
|
+
rotate3dIn: {
|
|
218
|
+
from: {
|
|
219
|
+
transform: string;
|
|
220
|
+
opacity: number;
|
|
221
|
+
};
|
|
222
|
+
to: {
|
|
223
|
+
transform: string;
|
|
224
|
+
opacity: number;
|
|
225
|
+
};
|
|
226
|
+
};
|
|
227
|
+
/**
|
|
228
|
+
* 3D 旋转离开
|
|
229
|
+
*/
|
|
230
|
+
rotate3dOut: {
|
|
231
|
+
from: {
|
|
232
|
+
transform: string;
|
|
233
|
+
opacity: number;
|
|
234
|
+
};
|
|
235
|
+
to: {
|
|
236
|
+
transform: string;
|
|
237
|
+
opacity: number;
|
|
238
|
+
};
|
|
239
|
+
};
|
|
240
|
+
/**
|
|
241
|
+
* 弹性弹跳（GPU 加速）
|
|
242
|
+
*/
|
|
243
|
+
elasticBounce: {
|
|
244
|
+
'0%': {
|
|
245
|
+
transform: string;
|
|
246
|
+
opacity: number;
|
|
247
|
+
};
|
|
248
|
+
'30%': {
|
|
249
|
+
transform: string;
|
|
250
|
+
opacity: number;
|
|
251
|
+
};
|
|
252
|
+
'50%': {
|
|
253
|
+
transform: string;
|
|
254
|
+
opacity: number;
|
|
255
|
+
};
|
|
256
|
+
'70%': {
|
|
257
|
+
transform: string;
|
|
258
|
+
opacity: number;
|
|
259
|
+
};
|
|
260
|
+
'100%': {
|
|
261
|
+
transform: string;
|
|
262
|
+
opacity: number;
|
|
263
|
+
};
|
|
264
|
+
};
|
|
265
|
+
/**
|
|
266
|
+
* 翻转进入
|
|
267
|
+
*/
|
|
268
|
+
flipIn: {
|
|
269
|
+
from: {
|
|
270
|
+
transform: string;
|
|
271
|
+
opacity: number;
|
|
272
|
+
};
|
|
273
|
+
'40%': {
|
|
274
|
+
transform: string;
|
|
275
|
+
opacity: number;
|
|
276
|
+
};
|
|
277
|
+
'100%': {
|
|
278
|
+
transform: string;
|
|
279
|
+
opacity: number;
|
|
280
|
+
};
|
|
281
|
+
};
|
|
282
|
+
/**
|
|
283
|
+
* 翻转离开
|
|
284
|
+
*/
|
|
285
|
+
flipOut: {
|
|
286
|
+
from: {
|
|
287
|
+
transform: string;
|
|
288
|
+
opacity: number;
|
|
289
|
+
};
|
|
290
|
+
'30%': {
|
|
291
|
+
transform: string;
|
|
292
|
+
opacity: number;
|
|
293
|
+
};
|
|
294
|
+
'100%': {
|
|
295
|
+
transform: string;
|
|
296
|
+
opacity: number;
|
|
297
|
+
};
|
|
298
|
+
};
|
|
299
|
+
};
|
|
300
|
+
/**
|
|
301
|
+
* 性能优化工具
|
|
302
|
+
*/
|
|
303
|
+
declare class PerformanceOptimizer {
|
|
304
|
+
private gpuEnabled;
|
|
305
|
+
private options;
|
|
306
|
+
private activeAnimations;
|
|
307
|
+
private rafId;
|
|
308
|
+
private batchedUpdates;
|
|
309
|
+
constructor(options?: GPUAccelerationOptions);
|
|
310
|
+
private checkGPUAvailability;
|
|
311
|
+
isGPUAvailable(): boolean;
|
|
312
|
+
shouldUseGPU(properties: string[]): boolean;
|
|
313
|
+
optimizeElement(element: HTMLElement): void;
|
|
314
|
+
batchAnimation(id: string, update: () => void): void;
|
|
315
|
+
private flushBatchedUpdates;
|
|
316
|
+
trackAnimation(id: string): void;
|
|
317
|
+
untrackAnimation(id: string): void;
|
|
318
|
+
getActiveAnimationCount(): number;
|
|
319
|
+
cleanup(): void;
|
|
320
|
+
}
|
|
321
|
+
declare function getGlobalOptimizer(): PerformanceOptimizer;
|
|
322
|
+
declare function resetGlobalOptimizer(options?: GPUAccelerationOptions): void;
|
|
323
|
+
|
|
324
|
+
/**
|
|
325
|
+
* 创建动画实例
|
|
326
|
+
*/
|
|
327
|
+
declare function createAnimation(animateFn: (progress: number) => void, options?: AnimationOptions): AnimationInstance;
|
|
328
|
+
/**
|
|
329
|
+
* 元素过渡动画
|
|
330
|
+
*/
|
|
331
|
+
declare function transitionElement(element: Element, toggle: boolean, options?: TransitionOptions): void;
|
|
332
|
+
/**
|
|
333
|
+
* 创建 CSS 关键帧动画
|
|
334
|
+
*/
|
|
335
|
+
declare function createKeyframeAnimation(element: Element, keyframes: Keyframe[] | PropertyIndexedKeyframes, options?: AnimationOptions): AnimationInstance;
|
|
336
|
+
/**
|
|
337
|
+
* 预设动画集合
|
|
338
|
+
*/
|
|
339
|
+
declare const PRESETS: {
|
|
340
|
+
/** 淡入 */
|
|
341
|
+
fadeIn: {
|
|
342
|
+
from: {
|
|
343
|
+
opacity: number;
|
|
344
|
+
};
|
|
345
|
+
to: {
|
|
346
|
+
opacity: number;
|
|
347
|
+
};
|
|
348
|
+
};
|
|
349
|
+
/** 淡出 */
|
|
350
|
+
fadeOut: {
|
|
351
|
+
from: {
|
|
352
|
+
opacity: number;
|
|
353
|
+
};
|
|
354
|
+
to: {
|
|
355
|
+
opacity: number;
|
|
356
|
+
};
|
|
357
|
+
};
|
|
358
|
+
/** 滑入（上方） */
|
|
359
|
+
slideInUp: {
|
|
360
|
+
from: {
|
|
361
|
+
transform: string;
|
|
362
|
+
opacity: number;
|
|
363
|
+
};
|
|
364
|
+
to: {
|
|
365
|
+
transform: string;
|
|
366
|
+
opacity: number;
|
|
367
|
+
};
|
|
368
|
+
};
|
|
369
|
+
/** 滑入（下方） */
|
|
370
|
+
slideInDown: {
|
|
371
|
+
from: {
|
|
372
|
+
transform: string;
|
|
373
|
+
opacity: number;
|
|
374
|
+
};
|
|
375
|
+
to: {
|
|
376
|
+
transform: string;
|
|
377
|
+
opacity: number;
|
|
378
|
+
};
|
|
379
|
+
};
|
|
380
|
+
/** 滑入（左侧） */
|
|
381
|
+
slideInLeft: {
|
|
382
|
+
from: {
|
|
383
|
+
transform: string;
|
|
384
|
+
opacity: number;
|
|
385
|
+
};
|
|
386
|
+
to: {
|
|
387
|
+
transform: string;
|
|
388
|
+
opacity: number;
|
|
389
|
+
};
|
|
390
|
+
};
|
|
391
|
+
/** 滑入（右侧） */
|
|
392
|
+
slideInRight: {
|
|
393
|
+
from: {
|
|
394
|
+
transform: string;
|
|
395
|
+
opacity: number;
|
|
396
|
+
};
|
|
397
|
+
to: {
|
|
398
|
+
transform: string;
|
|
399
|
+
opacity: number;
|
|
400
|
+
};
|
|
401
|
+
};
|
|
402
|
+
/** 缩放进入 */
|
|
403
|
+
zoomIn: {
|
|
404
|
+
from: {
|
|
405
|
+
transform: string;
|
|
406
|
+
opacity: number;
|
|
407
|
+
};
|
|
408
|
+
to: {
|
|
409
|
+
transform: string;
|
|
410
|
+
opacity: number;
|
|
411
|
+
};
|
|
412
|
+
};
|
|
413
|
+
/** 缩放离开 */
|
|
414
|
+
zoomOut: {
|
|
415
|
+
from: {
|
|
416
|
+
transform: string;
|
|
417
|
+
opacity: number;
|
|
418
|
+
};
|
|
419
|
+
to: {
|
|
420
|
+
transform: string;
|
|
421
|
+
opacity: number;
|
|
422
|
+
};
|
|
423
|
+
};
|
|
424
|
+
/** 弹跳进入 */
|
|
425
|
+
bounceIn: {
|
|
426
|
+
from: {
|
|
427
|
+
transform: string;
|
|
428
|
+
opacity: number;
|
|
429
|
+
};
|
|
430
|
+
'40%': {
|
|
431
|
+
transform: string;
|
|
432
|
+
};
|
|
433
|
+
'70%': {
|
|
434
|
+
transform: string;
|
|
435
|
+
};
|
|
436
|
+
to: {
|
|
437
|
+
transform: string;
|
|
438
|
+
opacity: number;
|
|
439
|
+
};
|
|
440
|
+
};
|
|
441
|
+
/** 摇摆进入 */
|
|
442
|
+
shake: {
|
|
443
|
+
'10%, 90%': {
|
|
444
|
+
transform: string;
|
|
445
|
+
};
|
|
446
|
+
'20%, 80%': {
|
|
447
|
+
transform: string;
|
|
448
|
+
};
|
|
449
|
+
'30%, 50%, 70%': {
|
|
450
|
+
transform: string;
|
|
451
|
+
};
|
|
452
|
+
'40%, 60%': {
|
|
453
|
+
transform: string;
|
|
454
|
+
};
|
|
455
|
+
};
|
|
456
|
+
};
|
|
457
|
+
declare const pluginAnimation: _lytjs_core.PluginDefinition<unknown>;
|
|
458
|
+
|
|
459
|
+
export { type AnimationInstance, type AnimationOptions, type AnimationPluginOptions, type EasingFunction, type GPUAccelerationOptions, GPU_PRESETS, type Keyframe, PRESETS, PerformanceOptimizer, type TransitionOptions, canUseGPU, createAnimation, createKeyframeAnimation, pluginAnimation as default, disableGPUAcceleration, enableGPUAcceleration, getGlobalOptimizer, resetGlobalOptimizer, to3DTransform, transitionElement };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,459 @@
|
|
|
1
|
+
import * as _lytjs_core from '@lytjs/core';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @lytjs/plugin-animation - 类型定义
|
|
5
|
+
*/
|
|
6
|
+
type EasingFunction = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'ease-in-quad' | 'ease-out-quad' | 'ease-in-out-quad' | 'ease-in-cubic' | 'ease-out-cubic' | 'ease-in-out-cubic' | 'ease-in-quart' | 'ease-out-quart' | 'ease-in-out-quart' | 'ease-in-quint' | 'ease-out-quint' | 'ease-in-out-quint' | 'ease-in-sine' | 'ease-out-sine' | 'ease-in-out-sine' | 'ease-in-expo' | 'ease-out-expo' | 'ease-in-out-expo' | 'ease-in-circ' | 'ease-out-circ' | 'ease-in-out-circ' | 'ease-in-back' | 'ease-out-back' | 'ease-in-out-back' | 'spring' | ((t: number) => number);
|
|
7
|
+
interface AnimationOptions {
|
|
8
|
+
/** 动画时长（毫秒） */
|
|
9
|
+
duration?: number;
|
|
10
|
+
/** 缓动函数 */
|
|
11
|
+
easing?: EasingFunction;
|
|
12
|
+
/** 动画延迟（毫秒） */
|
|
13
|
+
delay?: number;
|
|
14
|
+
/** 动画次数，-1 表示无限循环 */
|
|
15
|
+
iterations?: number;
|
|
16
|
+
/** 动画方向 */
|
|
17
|
+
direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
|
|
18
|
+
/** 动画填充模式 */
|
|
19
|
+
fill?: 'none' | 'forwards' | 'backwards' | 'both' | 'auto';
|
|
20
|
+
/** 动画开始前的回调 */
|
|
21
|
+
onStart?: () => void;
|
|
22
|
+
/** 动画更新时的回调 */
|
|
23
|
+
onUpdate?: (progress: number) => void;
|
|
24
|
+
/** 动画完成时的回调 */
|
|
25
|
+
onComplete?: () => void;
|
|
26
|
+
/** 动画暂停时的回调 */
|
|
27
|
+
onPause?: () => void;
|
|
28
|
+
/** 动画取消时的回调 */
|
|
29
|
+
onCancel?: () => void;
|
|
30
|
+
}
|
|
31
|
+
interface TransitionOptions {
|
|
32
|
+
/** 过渡属性，默认 all */
|
|
33
|
+
property?: string | string[];
|
|
34
|
+
/** 过渡时长（毫秒） */
|
|
35
|
+
duration?: number;
|
|
36
|
+
/** 缓动函数 */
|
|
37
|
+
easing?: EasingFunction;
|
|
38
|
+
/** 过渡延迟（毫秒） */
|
|
39
|
+
delay?: number;
|
|
40
|
+
/** 过渡开始前的回调 */
|
|
41
|
+
onBeforeEnter?: () => void;
|
|
42
|
+
/** 过渡进入中回调 */
|
|
43
|
+
onEnter?: () => void;
|
|
44
|
+
/** 过渡进入完成回调 */
|
|
45
|
+
onAfterEnter?: () => void;
|
|
46
|
+
/** 过渡离开前回调 */
|
|
47
|
+
onBeforeLeave?: () => void;
|
|
48
|
+
/** 过渡离开中回调 */
|
|
49
|
+
onLeave?: () => void;
|
|
50
|
+
/** 过渡离开完成回调 */
|
|
51
|
+
onAfterLeave?: () => void;
|
|
52
|
+
}
|
|
53
|
+
interface Keyframe {
|
|
54
|
+
/** 进度百分比 */
|
|
55
|
+
offset: number;
|
|
56
|
+
/** CSS 属性 */
|
|
57
|
+
[property: string]: string | number;
|
|
58
|
+
}
|
|
59
|
+
interface AnimationPluginOptions {
|
|
60
|
+
/** 默认动画时长 */
|
|
61
|
+
defaultDuration?: number;
|
|
62
|
+
/** 默认缓动函数 */
|
|
63
|
+
defaultEasing?: EasingFunction;
|
|
64
|
+
/** 是否启用自动清理 */
|
|
65
|
+
autoCleanup?: boolean;
|
|
66
|
+
}
|
|
67
|
+
interface AnimationInstance {
|
|
68
|
+
/** 动画 ID */
|
|
69
|
+
id: string;
|
|
70
|
+
/** 动画状态 */
|
|
71
|
+
state: 'idle' | 'playing' | 'paused' | 'completed' | 'cancelled';
|
|
72
|
+
/** 当前进度 0-1 */
|
|
73
|
+
progress: number;
|
|
74
|
+
/** 播放动画 */
|
|
75
|
+
play: () => void;
|
|
76
|
+
/** 暂停动画 */
|
|
77
|
+
pause: () => void;
|
|
78
|
+
/** 取消动画 */
|
|
79
|
+
cancel: () => void;
|
|
80
|
+
/** 重置动画 */
|
|
81
|
+
reset: () => void;
|
|
82
|
+
/** 跳转到指定进度 */
|
|
83
|
+
seek: (progress: number) => void;
|
|
84
|
+
/** 反转动画方向 */
|
|
85
|
+
reverse: () => void;
|
|
86
|
+
}
|
|
87
|
+
interface AnimationInstance {
|
|
88
|
+
/** 动画 ID */
|
|
89
|
+
id: string;
|
|
90
|
+
/** 动画状态 */
|
|
91
|
+
state: 'idle' | 'playing' | 'paused' | 'completed' | 'cancelled';
|
|
92
|
+
/** 当前进度 0-1 */
|
|
93
|
+
progress: number;
|
|
94
|
+
/** 播放动画 */
|
|
95
|
+
play: () => void;
|
|
96
|
+
/** 暂停动画 */
|
|
97
|
+
pause: () => void;
|
|
98
|
+
/** 取消动画 */
|
|
99
|
+
cancel: () => void;
|
|
100
|
+
/** 重置动画 */
|
|
101
|
+
reset: () => void;
|
|
102
|
+
/** 跳转到指定进度 */
|
|
103
|
+
seek: (progress: number) => void;
|
|
104
|
+
/** 反转动画方向 */
|
|
105
|
+
reverse: () => void;
|
|
106
|
+
}
|
|
107
|
+
interface AnimationInstance {
|
|
108
|
+
/** 动画 ID */
|
|
109
|
+
id: string;
|
|
110
|
+
/** 动画状态 */
|
|
111
|
+
state: 'idle' | 'playing' | 'paused' | 'completed' | 'cancelled';
|
|
112
|
+
/** 当前进度 0-1 */
|
|
113
|
+
progress: number;
|
|
114
|
+
/** 播放动画 */
|
|
115
|
+
play: () => void;
|
|
116
|
+
/** 暂停动画 */
|
|
117
|
+
pause: () => void;
|
|
118
|
+
/** 取消动画 */
|
|
119
|
+
cancel: () => void;
|
|
120
|
+
/** 重置动画 */
|
|
121
|
+
reset: () => void;
|
|
122
|
+
/** 跳转到指定进度 */
|
|
123
|
+
seek: (progress: number) => void;
|
|
124
|
+
/** 反转动画方向 */
|
|
125
|
+
reverse: () => void;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/**
|
|
129
|
+
* @lytjs/plugin-animation - GPU 加速增强
|
|
130
|
+
*
|
|
131
|
+
* 提供高性能的 GPU 加速动画支持
|
|
132
|
+
*/
|
|
133
|
+
/**
|
|
134
|
+
* GPU 加速配置
|
|
135
|
+
*/
|
|
136
|
+
interface GPUAccelerationOptions {
|
|
137
|
+
enable3D?: boolean;
|
|
138
|
+
willChange?: 'auto' | 'transform' | 'opacity' | 'scroll-position';
|
|
139
|
+
force3D?: boolean;
|
|
140
|
+
compositorThreshold?: number;
|
|
141
|
+
}
|
|
142
|
+
/**
|
|
143
|
+
* 将 2D transform 转换为 3D（启用 GPU 加速）
|
|
144
|
+
*/
|
|
145
|
+
declare function to3DTransform(transform: string): string;
|
|
146
|
+
/**
|
|
147
|
+
* 检测元素是否支持 GPU 加速
|
|
148
|
+
*/
|
|
149
|
+
declare function canUseGPU(element: Element): boolean;
|
|
150
|
+
/**
|
|
151
|
+
* 为元素启用 GPU 加速
|
|
152
|
+
*/
|
|
153
|
+
declare function enableGPUAcceleration(element: HTMLElement, options?: GPUAccelerationOptions): void;
|
|
154
|
+
/**
|
|
155
|
+
* 禁用元素的 GPU 加速
|
|
156
|
+
*/
|
|
157
|
+
declare function disableGPUAcceleration(element: HTMLElement): void;
|
|
158
|
+
/**
|
|
159
|
+
* GPU 加速的预设动画
|
|
160
|
+
*/
|
|
161
|
+
declare const GPU_PRESETS: {
|
|
162
|
+
/**
|
|
163
|
+
* 快速滑入（GPU 加速）
|
|
164
|
+
*/
|
|
165
|
+
gpuSlideIn: {
|
|
166
|
+
from: {
|
|
167
|
+
transform: string;
|
|
168
|
+
opacity: number;
|
|
169
|
+
};
|
|
170
|
+
to: {
|
|
171
|
+
transform: string;
|
|
172
|
+
opacity: number;
|
|
173
|
+
};
|
|
174
|
+
};
|
|
175
|
+
/**
|
|
176
|
+
* 快速滑出（GPU 加速）
|
|
177
|
+
*/
|
|
178
|
+
gpuSlideOut: {
|
|
179
|
+
from: {
|
|
180
|
+
transform: string;
|
|
181
|
+
opacity: number;
|
|
182
|
+
};
|
|
183
|
+
to: {
|
|
184
|
+
transform: string;
|
|
185
|
+
opacity: number;
|
|
186
|
+
};
|
|
187
|
+
};
|
|
188
|
+
/**
|
|
189
|
+
* 缩放进入（GPU 加速）
|
|
190
|
+
*/
|
|
191
|
+
gpuZoomIn: {
|
|
192
|
+
from: {
|
|
193
|
+
transform: string;
|
|
194
|
+
opacity: number;
|
|
195
|
+
};
|
|
196
|
+
to: {
|
|
197
|
+
transform: string;
|
|
198
|
+
opacity: number;
|
|
199
|
+
};
|
|
200
|
+
};
|
|
201
|
+
/**
|
|
202
|
+
* 缩放离开（GPU 加速）
|
|
203
|
+
*/
|
|
204
|
+
gpuZoomOut: {
|
|
205
|
+
from: {
|
|
206
|
+
transform: string;
|
|
207
|
+
opacity: number;
|
|
208
|
+
};
|
|
209
|
+
to: {
|
|
210
|
+
transform: string;
|
|
211
|
+
opacity: number;
|
|
212
|
+
};
|
|
213
|
+
};
|
|
214
|
+
/**
|
|
215
|
+
* 3D 旋转进入
|
|
216
|
+
*/
|
|
217
|
+
rotate3dIn: {
|
|
218
|
+
from: {
|
|
219
|
+
transform: string;
|
|
220
|
+
opacity: number;
|
|
221
|
+
};
|
|
222
|
+
to: {
|
|
223
|
+
transform: string;
|
|
224
|
+
opacity: number;
|
|
225
|
+
};
|
|
226
|
+
};
|
|
227
|
+
/**
|
|
228
|
+
* 3D 旋转离开
|
|
229
|
+
*/
|
|
230
|
+
rotate3dOut: {
|
|
231
|
+
from: {
|
|
232
|
+
transform: string;
|
|
233
|
+
opacity: number;
|
|
234
|
+
};
|
|
235
|
+
to: {
|
|
236
|
+
transform: string;
|
|
237
|
+
opacity: number;
|
|
238
|
+
};
|
|
239
|
+
};
|
|
240
|
+
/**
|
|
241
|
+
* 弹性弹跳（GPU 加速）
|
|
242
|
+
*/
|
|
243
|
+
elasticBounce: {
|
|
244
|
+
'0%': {
|
|
245
|
+
transform: string;
|
|
246
|
+
opacity: number;
|
|
247
|
+
};
|
|
248
|
+
'30%': {
|
|
249
|
+
transform: string;
|
|
250
|
+
opacity: number;
|
|
251
|
+
};
|
|
252
|
+
'50%': {
|
|
253
|
+
transform: string;
|
|
254
|
+
opacity: number;
|
|
255
|
+
};
|
|
256
|
+
'70%': {
|
|
257
|
+
transform: string;
|
|
258
|
+
opacity: number;
|
|
259
|
+
};
|
|
260
|
+
'100%': {
|
|
261
|
+
transform: string;
|
|
262
|
+
opacity: number;
|
|
263
|
+
};
|
|
264
|
+
};
|
|
265
|
+
/**
|
|
266
|
+
* 翻转进入
|
|
267
|
+
*/
|
|
268
|
+
flipIn: {
|
|
269
|
+
from: {
|
|
270
|
+
transform: string;
|
|
271
|
+
opacity: number;
|
|
272
|
+
};
|
|
273
|
+
'40%': {
|
|
274
|
+
transform: string;
|
|
275
|
+
opacity: number;
|
|
276
|
+
};
|
|
277
|
+
'100%': {
|
|
278
|
+
transform: string;
|
|
279
|
+
opacity: number;
|
|
280
|
+
};
|
|
281
|
+
};
|
|
282
|
+
/**
|
|
283
|
+
* 翻转离开
|
|
284
|
+
*/
|
|
285
|
+
flipOut: {
|
|
286
|
+
from: {
|
|
287
|
+
transform: string;
|
|
288
|
+
opacity: number;
|
|
289
|
+
};
|
|
290
|
+
'30%': {
|
|
291
|
+
transform: string;
|
|
292
|
+
opacity: number;
|
|
293
|
+
};
|
|
294
|
+
'100%': {
|
|
295
|
+
transform: string;
|
|
296
|
+
opacity: number;
|
|
297
|
+
};
|
|
298
|
+
};
|
|
299
|
+
};
|
|
300
|
+
/**
|
|
301
|
+
* 性能优化工具
|
|
302
|
+
*/
|
|
303
|
+
declare class PerformanceOptimizer {
|
|
304
|
+
private gpuEnabled;
|
|
305
|
+
private options;
|
|
306
|
+
private activeAnimations;
|
|
307
|
+
private rafId;
|
|
308
|
+
private batchedUpdates;
|
|
309
|
+
constructor(options?: GPUAccelerationOptions);
|
|
310
|
+
private checkGPUAvailability;
|
|
311
|
+
isGPUAvailable(): boolean;
|
|
312
|
+
shouldUseGPU(properties: string[]): boolean;
|
|
313
|
+
optimizeElement(element: HTMLElement): void;
|
|
314
|
+
batchAnimation(id: string, update: () => void): void;
|
|
315
|
+
private flushBatchedUpdates;
|
|
316
|
+
trackAnimation(id: string): void;
|
|
317
|
+
untrackAnimation(id: string): void;
|
|
318
|
+
getActiveAnimationCount(): number;
|
|
319
|
+
cleanup(): void;
|
|
320
|
+
}
|
|
321
|
+
declare function getGlobalOptimizer(): PerformanceOptimizer;
|
|
322
|
+
declare function resetGlobalOptimizer(options?: GPUAccelerationOptions): void;
|
|
323
|
+
|
|
324
|
+
/**
|
|
325
|
+
* 创建动画实例
|
|
326
|
+
*/
|
|
327
|
+
declare function createAnimation(animateFn: (progress: number) => void, options?: AnimationOptions): AnimationInstance;
|
|
328
|
+
/**
|
|
329
|
+
* 元素过渡动画
|
|
330
|
+
*/
|
|
331
|
+
declare function transitionElement(element: Element, toggle: boolean, options?: TransitionOptions): void;
|
|
332
|
+
/**
|
|
333
|
+
* 创建 CSS 关键帧动画
|
|
334
|
+
*/
|
|
335
|
+
declare function createKeyframeAnimation(element: Element, keyframes: Keyframe[] | PropertyIndexedKeyframes, options?: AnimationOptions): AnimationInstance;
|
|
336
|
+
/**
|
|
337
|
+
* 预设动画集合
|
|
338
|
+
*/
|
|
339
|
+
declare const PRESETS: {
|
|
340
|
+
/** 淡入 */
|
|
341
|
+
fadeIn: {
|
|
342
|
+
from: {
|
|
343
|
+
opacity: number;
|
|
344
|
+
};
|
|
345
|
+
to: {
|
|
346
|
+
opacity: number;
|
|
347
|
+
};
|
|
348
|
+
};
|
|
349
|
+
/** 淡出 */
|
|
350
|
+
fadeOut: {
|
|
351
|
+
from: {
|
|
352
|
+
opacity: number;
|
|
353
|
+
};
|
|
354
|
+
to: {
|
|
355
|
+
opacity: number;
|
|
356
|
+
};
|
|
357
|
+
};
|
|
358
|
+
/** 滑入（上方） */
|
|
359
|
+
slideInUp: {
|
|
360
|
+
from: {
|
|
361
|
+
transform: string;
|
|
362
|
+
opacity: number;
|
|
363
|
+
};
|
|
364
|
+
to: {
|
|
365
|
+
transform: string;
|
|
366
|
+
opacity: number;
|
|
367
|
+
};
|
|
368
|
+
};
|
|
369
|
+
/** 滑入（下方） */
|
|
370
|
+
slideInDown: {
|
|
371
|
+
from: {
|
|
372
|
+
transform: string;
|
|
373
|
+
opacity: number;
|
|
374
|
+
};
|
|
375
|
+
to: {
|
|
376
|
+
transform: string;
|
|
377
|
+
opacity: number;
|
|
378
|
+
};
|
|
379
|
+
};
|
|
380
|
+
/** 滑入（左侧） */
|
|
381
|
+
slideInLeft: {
|
|
382
|
+
from: {
|
|
383
|
+
transform: string;
|
|
384
|
+
opacity: number;
|
|
385
|
+
};
|
|
386
|
+
to: {
|
|
387
|
+
transform: string;
|
|
388
|
+
opacity: number;
|
|
389
|
+
};
|
|
390
|
+
};
|
|
391
|
+
/** 滑入（右侧） */
|
|
392
|
+
slideInRight: {
|
|
393
|
+
from: {
|
|
394
|
+
transform: string;
|
|
395
|
+
opacity: number;
|
|
396
|
+
};
|
|
397
|
+
to: {
|
|
398
|
+
transform: string;
|
|
399
|
+
opacity: number;
|
|
400
|
+
};
|
|
401
|
+
};
|
|
402
|
+
/** 缩放进入 */
|
|
403
|
+
zoomIn: {
|
|
404
|
+
from: {
|
|
405
|
+
transform: string;
|
|
406
|
+
opacity: number;
|
|
407
|
+
};
|
|
408
|
+
to: {
|
|
409
|
+
transform: string;
|
|
410
|
+
opacity: number;
|
|
411
|
+
};
|
|
412
|
+
};
|
|
413
|
+
/** 缩放离开 */
|
|
414
|
+
zoomOut: {
|
|
415
|
+
from: {
|
|
416
|
+
transform: string;
|
|
417
|
+
opacity: number;
|
|
418
|
+
};
|
|
419
|
+
to: {
|
|
420
|
+
transform: string;
|
|
421
|
+
opacity: number;
|
|
422
|
+
};
|
|
423
|
+
};
|
|
424
|
+
/** 弹跳进入 */
|
|
425
|
+
bounceIn: {
|
|
426
|
+
from: {
|
|
427
|
+
transform: string;
|
|
428
|
+
opacity: number;
|
|
429
|
+
};
|
|
430
|
+
'40%': {
|
|
431
|
+
transform: string;
|
|
432
|
+
};
|
|
433
|
+
'70%': {
|
|
434
|
+
transform: string;
|
|
435
|
+
};
|
|
436
|
+
to: {
|
|
437
|
+
transform: string;
|
|
438
|
+
opacity: number;
|
|
439
|
+
};
|
|
440
|
+
};
|
|
441
|
+
/** 摇摆进入 */
|
|
442
|
+
shake: {
|
|
443
|
+
'10%, 90%': {
|
|
444
|
+
transform: string;
|
|
445
|
+
};
|
|
446
|
+
'20%, 80%': {
|
|
447
|
+
transform: string;
|
|
448
|
+
};
|
|
449
|
+
'30%, 50%, 70%': {
|
|
450
|
+
transform: string;
|
|
451
|
+
};
|
|
452
|
+
'40%, 60%': {
|
|
453
|
+
transform: string;
|
|
454
|
+
};
|
|
455
|
+
};
|
|
456
|
+
};
|
|
457
|
+
declare const pluginAnimation: _lytjs_core.PluginDefinition<unknown>;
|
|
458
|
+
|
|
459
|
+
export { type AnimationInstance, type AnimationOptions, type AnimationPluginOptions, type EasingFunction, type GPUAccelerationOptions, GPU_PRESETS, type Keyframe, PRESETS, PerformanceOptimizer, type TransitionOptions, canUseGPU, createAnimation, createKeyframeAnimation, pluginAnimation as default, disableGPUAcceleration, enableGPUAcceleration, getGlobalOptimizer, resetGlobalOptimizer, to3DTransform, transitionElement };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lytjs/plugin-animation",
|
|
3
|
-
"version": "6.9.
|
|
3
|
+
"version": "6.9.3",
|
|
4
4
|
"description": "LytJS official animation plugin with CSS transitions and animations",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"clean": "rm -rf dist"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@lytjs/core": "
|
|
33
|
-
"@lytjs/reactivity": "
|
|
32
|
+
"@lytjs/core": "^6.9.3",
|
|
33
|
+
"@lytjs/reactivity": "^6.9.3"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"tsup": "^8.0.0",
|