@taole/giftstage 0.1.15 → 0.1.16
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/README.md +17 -3
- package/dist/gift-stage.cjs.js +71 -41
- package/dist/gift-stage.es.js +2197 -2095
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -225,6 +225,8 @@ Promise<GiftHandle>;
|
|
|
225
225
|
- `objectFit?: 'contain' | 'cover' | 'fill'`
|
|
226
226
|
- `loop?: number`
|
|
227
227
|
- `0` 表示无限循环
|
|
228
|
+
- `opacity?: number`
|
|
229
|
+
- 全局透明度，范围 `0 ~ 1`，默认 `1`
|
|
228
230
|
- `clearsAfterStop?: boolean`
|
|
229
231
|
- 播放结束后，是否自动移除礼物
|
|
230
232
|
- 默认 `true`，传 `false` 时会停留最后一帧，方便后续继续调用 `gift.animate(...).start()`
|
|
@@ -372,7 +374,7 @@ await stage.addGift({
|
|
|
372
374
|
|
|
373
375
|
### 链式动画
|
|
374
376
|
|
|
375
|
-
`addGift()` 返回的 `GiftHandle` 支持 `animate()`。一次 `to()`
|
|
377
|
+
`addGift()` 返回的 `GiftHandle` 支持 `animate()`。一次 `to()` 是组合动画，同一步里可以同时移动、缩放和改变透明度；多个 `to()` / `then()` 会按顺序播放：
|
|
376
378
|
|
|
377
379
|
```ts
|
|
378
380
|
const gift = await stage.addGift({
|
|
@@ -390,11 +392,13 @@ await gift
|
|
|
390
392
|
.to({
|
|
391
393
|
flyTo: { x: 200, y: 240 },
|
|
392
394
|
scaleTo: 0.8,
|
|
395
|
+
opacity: 0.6,
|
|
393
396
|
duration: 500,
|
|
394
397
|
})
|
|
395
398
|
.then({
|
|
396
399
|
flyTo: { x: 600, y: 320 },
|
|
397
400
|
scaleTo: 1.1,
|
|
401
|
+
opacity: 1,
|
|
398
402
|
duration: 700,
|
|
399
403
|
})
|
|
400
404
|
.onComplete((g) => {
|
|
@@ -406,12 +410,12 @@ await gift
|
|
|
406
410
|
也可以传入单步或数组：
|
|
407
411
|
|
|
408
412
|
```ts
|
|
409
|
-
gift.animate({ flyTo: { x: 300, y: 300 }, scaleTo: 0.5 }).start();
|
|
413
|
+
gift.animate({ flyTo: { x: 300, y: 300 }, scaleTo: 0.5, opacity: 0.3 }).start();
|
|
410
414
|
|
|
411
415
|
gift
|
|
412
416
|
.animate([
|
|
413
417
|
{ flyTo: { x: 300, y: 300 }, duration: 400 },
|
|
414
|
-
{ scaleTo: 1, duration: 300 },
|
|
418
|
+
{ scaleTo: 1, opacity: 1, duration: 300 },
|
|
415
419
|
])
|
|
416
420
|
.start();
|
|
417
421
|
```
|
|
@@ -435,6 +439,7 @@ await stage.addGift({
|
|
|
435
439
|
title: {
|
|
436
440
|
text: 'Hello',
|
|
437
441
|
color: '#ff0000',
|
|
442
|
+
fontSize: 28,
|
|
438
443
|
mode: 'dynamic',
|
|
439
444
|
},
|
|
440
445
|
},
|
|
@@ -447,6 +452,15 @@ await stage.addGift({
|
|
|
447
452
|
- 文本配置
|
|
448
453
|
- 图片配置
|
|
449
454
|
|
|
455
|
+
SVGA 文本配置会按目标 frame 自动适配字号，避免文字超出槽位：
|
|
456
|
+
|
|
457
|
+
- `mode: 'dynamic'`：默认行为。生成文字自身尺寸的纹理，渲染时按自身逻辑尺寸居中到 frame 内，不会被拉伸。
|
|
458
|
+
- `mode: 'replace'`：生成和 frame 一样大的纹理，按替换图逻辑铺满 frame。
|
|
459
|
+
- `fontSize?: number`：期望字号；如果文字放不下，会自动缩小。
|
|
460
|
+
- `minFontSize?: number` / `maxFontSize?: number`：限制自适应字号范围。
|
|
461
|
+
- `padding?: number`：文字纹理内边距，默认 `2`。
|
|
462
|
+
- `scale?: number`：文字纹理栅格倍率，SVGA 默认 `3`，用于保持清晰度。
|
|
463
|
+
|
|
450
464
|
### VAP / VAPX
|
|
451
465
|
|
|
452
466
|
使用 `vapSlots`：
|