@lytjs/plugin-animation 6.5.0 → 6.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -353,7 +353,7 @@ function createAnimation(animateFn, options = {}) {
353
353
  delay = 0,
354
354
  iterations = 1,
355
355
  direction = "normal",
356
- fill = "none",
356
+ fill: _fill = "none",
357
357
  onStart,
358
358
  onUpdate,
359
359
  onComplete,
@@ -365,7 +365,7 @@ function createAnimation(animateFn, options = {}) {
365
365
  let state = "idle";
366
366
  let progress = 0;
367
367
  let startTime = 0;
368
- let pausedTime = 0;
368
+ let _pausedTime = 0;
369
369
  let animationFrameId = null;
370
370
  let currentIteration = 0;
371
371
  let isReversed = direction === "reverse" || direction === "alternate-reverse";
@@ -427,7 +427,7 @@ function createAnimation(animateFn, options = {}) {
427
427
  function pause() {
428
428
  if (state !== "playing") return;
429
429
  state = "paused";
430
- pausedTime = performance.now();
430
+ _pausedTime = performance.now();
431
431
  if (animationFrameId) {
432
432
  cancelAnimationFrame(animationFrameId);
433
433
  animationFrameId = null;
@@ -456,7 +456,7 @@ function createAnimation(animateFn, options = {}) {
456
456
  currentIteration = 0;
457
457
  progressSignal.set(0);
458
458
  startTime = 0;
459
- pausedTime = 0;
459
+ _pausedTime = 0;
460
460
  isReversed = direction === "reverse" || direction === "alternate-reverse";
461
461
  }
462
462
  function seek(newProgress) {
@@ -501,7 +501,7 @@ function transitionElement(element, toggle, options = {}) {
501
501
  onAfterLeave
502
502
  } = options;
503
503
  const propertyStr = Array.isArray(property) ? property.join(", ") : property;
504
- const easingFn = getEasingFunction(easing);
504
+ const _easingFn = getEasingFunction(easing);
505
505
  if (toggle) {
506
506
  if (onBeforeEnter) {
507
507
  onBeforeEnter();
@@ -715,7 +715,7 @@ function createAnimationManager(options = {}) {
715
715
  const {
716
716
  defaultDuration = 300,
717
717
  defaultEasing = "ease",
718
- autoCleanup = true
718
+ autoCleanup: _autoCleanup = true
719
719
  } = options;
720
720
  const animations = /* @__PURE__ */ new Map();
721
721
  function animate(animateFn, opts) {
@@ -764,7 +764,7 @@ function createAnimationManager(options = {}) {
764
764
  }
765
765
  }
766
766
  function clear() {
767
- for (const [id, animation] of animations) {
767
+ for (const [_id, animation] of animations) {
768
768
  animation.cancel();
769
769
  }
770
770
  animations.clear();
package/dist/index.js CHANGED
@@ -317,7 +317,7 @@ function createAnimation(animateFn, options = {}) {
317
317
  delay = 0,
318
318
  iterations = 1,
319
319
  direction = "normal",
320
- fill = "none",
320
+ fill: _fill = "none",
321
321
  onStart,
322
322
  onUpdate,
323
323
  onComplete,
@@ -329,7 +329,7 @@ function createAnimation(animateFn, options = {}) {
329
329
  let state = "idle";
330
330
  let progress = 0;
331
331
  let startTime = 0;
332
- let pausedTime = 0;
332
+ let _pausedTime = 0;
333
333
  let animationFrameId = null;
334
334
  let currentIteration = 0;
335
335
  let isReversed = direction === "reverse" || direction === "alternate-reverse";
@@ -391,7 +391,7 @@ function createAnimation(animateFn, options = {}) {
391
391
  function pause() {
392
392
  if (state !== "playing") return;
393
393
  state = "paused";
394
- pausedTime = performance.now();
394
+ _pausedTime = performance.now();
395
395
  if (animationFrameId) {
396
396
  cancelAnimationFrame(animationFrameId);
397
397
  animationFrameId = null;
@@ -420,7 +420,7 @@ function createAnimation(animateFn, options = {}) {
420
420
  currentIteration = 0;
421
421
  progressSignal.set(0);
422
422
  startTime = 0;
423
- pausedTime = 0;
423
+ _pausedTime = 0;
424
424
  isReversed = direction === "reverse" || direction === "alternate-reverse";
425
425
  }
426
426
  function seek(newProgress) {
@@ -465,7 +465,7 @@ function transitionElement(element, toggle, options = {}) {
465
465
  onAfterLeave
466
466
  } = options;
467
467
  const propertyStr = Array.isArray(property) ? property.join(", ") : property;
468
- const easingFn = getEasingFunction(easing);
468
+ const _easingFn = getEasingFunction(easing);
469
469
  if (toggle) {
470
470
  if (onBeforeEnter) {
471
471
  onBeforeEnter();
@@ -679,7 +679,7 @@ function createAnimationManager(options = {}) {
679
679
  const {
680
680
  defaultDuration = 300,
681
681
  defaultEasing = "ease",
682
- autoCleanup = true
682
+ autoCleanup: _autoCleanup = true
683
683
  } = options;
684
684
  const animations = /* @__PURE__ */ new Map();
685
685
  function animate(animateFn, opts) {
@@ -728,7 +728,7 @@ function createAnimationManager(options = {}) {
728
728
  }
729
729
  }
730
730
  function clear() {
731
- for (const [id, animation] of animations) {
731
+ for (const [_id, animation] of animations) {
732
732
  animation.cancel();
733
733
  }
734
734
  animations.clear();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lytjs/plugin-animation",
3
- "version": "6.5.0",
3
+ "version": "6.7.0",
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": "^6.0.0",
33
- "@lytjs/reactivity": "^6.0.0"
32
+ "@lytjs/core": "^6.7.0",
33
+ "@lytjs/reactivity": "^6.7.0"
34
34
  },
35
35
  "devDependencies": {
36
36
  "tsup": "^8.0.0",
package/dist/index.d.cts DELETED
@@ -1,459 +0,0 @@
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 DELETED
@@ -1,459 +0,0 @@
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 };