@visactor/vrender-animate 1.0.0-alpha.2 → 1.0.0-alpha.21
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/cjs/animate-extension.d.ts +3 -2
- package/cjs/animate-extension.js +5 -2
- package/cjs/animate-extension.js.map +1 -1
- package/cjs/animate.d.ts +1 -0
- package/cjs/animate.js +8 -5
- package/cjs/animate.js.map +1 -1
- package/cjs/config/morphing.d.ts +2 -0
- package/cjs/config/morphing.js +9 -0
- package/cjs/config/morphing.js.map +1 -0
- package/cjs/custom/clip-graphic.js +1 -1
- package/cjs/custom/clip-graphic.js.map +1 -1
- package/cjs/custom/clip.d.ts +1 -0
- package/cjs/custom/clip.js +9 -1
- package/cjs/custom/clip.js.map +1 -1
- package/cjs/custom/common.d.ts +0 -1
- package/cjs/custom/common.js +6 -9
- package/cjs/custom/common.js.map +1 -1
- package/cjs/custom/fade.js +7 -2
- package/cjs/custom/fade.js.map +1 -1
- package/cjs/custom/{from-to.js → fromTo.js} +6 -9
- package/cjs/custom/fromTo.js.map +1 -0
- package/cjs/custom/{group-fade.js → groupFade.js} +4 -3
- package/cjs/custom/groupFade.js.map +1 -0
- package/cjs/custom/growAngle.js +3 -2
- package/cjs/custom/growAngle.js.map +1 -1
- package/cjs/custom/growCenter.js +1 -1
- package/cjs/custom/growCenter.js.map +1 -1
- package/cjs/custom/growHeight.js +5 -5
- package/cjs/custom/growHeight.js.map +1 -1
- package/cjs/custom/growPoints.js +22 -21
- package/cjs/custom/growPoints.js.map +1 -1
- package/cjs/custom/growRadius.js +1 -1
- package/cjs/custom/growRadius.js.map +1 -1
- package/cjs/custom/growWidth.js +1 -1
- package/cjs/custom/growWidth.js.map +1 -1
- package/cjs/custom/morphing.d.ts +51 -0
- package/cjs/custom/morphing.js +298 -0
- package/cjs/custom/morphing.js.map +1 -0
- package/cjs/custom/motionPath.d.ts +21 -0
- package/cjs/custom/motionPath.js +31 -0
- package/cjs/custom/motionPath.js.map +1 -0
- package/cjs/custom/move.d.ts +4 -0
- package/cjs/custom/move.js +11 -11
- package/cjs/custom/move.js.map +1 -1
- package/cjs/custom/register.d.ts +27 -0
- package/cjs/custom/register.js +394 -4
- package/cjs/custom/register.js.map +1 -1
- package/cjs/custom/richtext/input-richtext.d.ts +4 -2
- package/cjs/custom/richtext/input-richtext.js +20 -10
- package/cjs/custom/richtext/input-richtext.js.map +1 -1
- package/cjs/custom/richtext/slide-richtext.js +1 -1
- package/cjs/custom/rotate.js +2 -1
- package/cjs/custom/rotate.js.map +1 -1
- package/cjs/custom/scale.js +7 -7
- package/cjs/custom/scale.js.map +1 -1
- package/cjs/custom/story.d.ts +68 -0
- package/cjs/custom/story.js +149 -3
- package/cjs/custom/story.js.map +1 -1
- package/cjs/custom/streamLight.d.ts +27 -0
- package/cjs/custom/streamLight.js +161 -0
- package/cjs/custom/streamLight.js.map +1 -0
- package/cjs/custom/tag-points.js +4 -1
- package/cjs/custom/tag-points.js.map +1 -1
- package/cjs/custom/update.js +2 -3
- package/cjs/custom/update.js.map +1 -1
- package/cjs/executor/animate-executor.d.ts +1 -1
- package/cjs/executor/animate-executor.js +69 -63
- package/cjs/executor/animate-executor.js.map +1 -1
- package/cjs/index.d.ts +3 -2
- package/cjs/index.js +34 -14
- package/cjs/index.js.map +1 -1
- package/cjs/state/animation-states-registry.js +18 -0
- package/cjs/state/animation-states-registry.js.map +1 -1
- package/cjs/step.d.ts +2 -0
- package/cjs/step.js +10 -2
- package/cjs/step.js.map +1 -1
- package/cjs/ticker/default-ticker.d.ts +3 -2
- package/cjs/ticker/default-ticker.js +9 -6
- package/cjs/ticker/default-ticker.js.map +1 -1
- package/cjs/ticker/manual-ticker.d.ts +6 -1
- package/cjs/ticker/manual-ticker.js +26 -4
- package/cjs/ticker/manual-ticker.js.map +1 -1
- package/cjs/timeline.d.ts +13 -5
- package/cjs/timeline.js +31 -18
- package/cjs/timeline.js.map +1 -1
- package/cjs/utils/transform.d.ts +2 -0
- package/cjs/utils/transform.js +10 -0
- package/cjs/utils/transform.js.map +1 -0
- package/dist/index.es.js +1374 -186
- package/es/animate-extension.d.ts +3 -2
- package/es/animate-extension.js +5 -2
- package/es/animate-extension.js.map +1 -1
- package/es/animate.d.ts +1 -0
- package/es/animate.js +8 -5
- package/es/animate.js.map +1 -1
- package/es/config/morphing.d.ts +2 -0
- package/es/config/morphing.js +5 -0
- package/es/config/morphing.js.map +1 -0
- package/es/custom/clip-graphic.js +1 -1
- package/es/custom/clip-graphic.js.map +1 -1
- package/es/custom/clip.d.ts +1 -0
- package/es/custom/clip.js +9 -1
- package/es/custom/clip.js.map +1 -1
- package/es/custom/common.d.ts +0 -1
- package/es/custom/common.js +6 -9
- package/es/custom/common.js.map +1 -1
- package/es/custom/fade.js +7 -2
- package/es/custom/fade.js.map +1 -1
- package/es/custom/{from-to.js → fromTo.js} +6 -9
- package/es/custom/fromTo.js.map +1 -0
- package/es/custom/{group-fade.js → groupFade.js} +4 -3
- package/es/custom/groupFade.js.map +1 -0
- package/es/custom/growAngle.js +3 -2
- package/es/custom/growAngle.js.map +1 -1
- package/es/custom/growCenter.js +1 -1
- package/es/custom/growCenter.js.map +1 -1
- package/es/custom/growHeight.js +5 -5
- package/es/custom/growHeight.js.map +1 -1
- package/es/custom/growPoints.js +22 -21
- package/es/custom/growPoints.js.map +1 -1
- package/es/custom/growRadius.js +1 -1
- package/es/custom/growRadius.js.map +1 -1
- package/es/custom/growWidth.js +1 -1
- package/es/custom/growWidth.js.map +1 -1
- package/es/custom/morphing.d.ts +51 -0
- package/es/custom/morphing.js +289 -0
- package/es/custom/morphing.js.map +1 -0
- package/es/custom/motionPath.d.ts +21 -0
- package/es/custom/motionPath.js +23 -0
- package/es/custom/motionPath.js.map +1 -0
- package/es/custom/move.d.ts +4 -0
- package/es/custom/move.js +10 -10
- package/es/custom/move.js.map +1 -1
- package/es/custom/register.d.ts +27 -0
- package/es/custom/register.js +15 -5
- package/es/custom/register.js.map +1 -1
- package/es/custom/richtext/input-richtext.d.ts +4 -2
- package/es/custom/richtext/input-richtext.js +20 -10
- package/es/custom/richtext/input-richtext.js.map +1 -1
- package/es/custom/richtext/slide-richtext.js +1 -1
- package/es/custom/rotate.js +2 -1
- package/es/custom/rotate.js.map +1 -1
- package/es/custom/scale.js +7 -7
- package/es/custom/scale.js.map +1 -1
- package/es/custom/story.d.ts +68 -0
- package/es/custom/story.js +142 -1
- package/es/custom/story.js.map +1 -1
- package/es/custom/streamLight.d.ts +27 -0
- package/es/custom/streamLight.js +157 -0
- package/es/custom/streamLight.js.map +1 -0
- package/es/custom/tag-points.js +4 -1
- package/es/custom/tag-points.js.map +1 -1
- package/es/custom/update.js +2 -3
- package/es/custom/update.js.map +1 -1
- package/es/executor/animate-executor.d.ts +1 -1
- package/es/executor/animate-executor.js +68 -61
- package/es/executor/animate-executor.js.map +1 -1
- package/es/index.d.ts +3 -2
- package/es/index.js +4 -2
- package/es/index.js.map +1 -1
- package/es/state/animation-states-registry.js +18 -0
- package/es/state/animation-states-registry.js.map +1 -1
- package/es/step.d.ts +2 -0
- package/es/step.js +10 -2
- package/es/step.js.map +1 -1
- package/es/ticker/default-ticker.d.ts +3 -2
- package/es/ticker/default-ticker.js +9 -6
- package/es/ticker/default-ticker.js.map +1 -1
- package/es/ticker/manual-ticker.d.ts +6 -1
- package/es/ticker/manual-ticker.js +27 -3
- package/es/ticker/manual-ticker.js.map +1 -1
- package/es/timeline.d.ts +13 -5
- package/es/timeline.js +32 -17
- package/es/timeline.js.map +1 -1
- package/es/utils/transform.d.ts +2 -0
- package/es/utils/transform.js +4 -0
- package/es/utils/transform.js.map +1 -0
- package/package.json +5 -5
- package/cjs/custom/from-to.js.map +0 -1
- package/cjs/custom/group-fade.js.map +0 -1
- package/es/custom/from-to.js.map +0 -1
- package/es/custom/group-fade.js.map +0 -1
- /package/cjs/custom/{from-to.d.ts → fromTo.d.ts} +0 -0
- /package/cjs/custom/{group-fade.d.ts → groupFade.d.ts} +0 -0
- /package/es/custom/{from-to.d.ts → fromTo.d.ts} +0 -0
- /package/es/custom/{group-fade.d.ts → groupFade.d.ts} +0 -0
|
@@ -10,14 +10,14 @@ class InputRichText extends custom_animate_1.ACustomAnimate {
|
|
|
10
10
|
constructor(from, to, duration, easing, params) {
|
|
11
11
|
super(from, to, duration, easing, params), this.fromTextConfig = [], this.toTextConfig = [],
|
|
12
12
|
this.originalTextConfig = [], this.showCursor = !1, this.cursorChar = "|", this.blinkCursor = !0,
|
|
13
|
-
this.
|
|
13
|
+
this.fadeInChars = !1, this.fadeInDuration = .3, this.strokeFirst = !1, this.strokeToFillRatio = .3,
|
|
14
14
|
void 0 !== (null == params ? void 0 : params.showCursor) && (this.showCursor = params.showCursor),
|
|
15
15
|
void 0 !== (null == params ? void 0 : params.cursorChar) && (this.cursorChar = params.cursorChar),
|
|
16
16
|
void 0 !== (null == params ? void 0 : params.blinkCursor) && (this.blinkCursor = params.blinkCursor),
|
|
17
|
-
void 0 !== (null == params ? void 0 : params.beforeText) && (this.beforeText = params.beforeText),
|
|
18
|
-
void 0 !== (null == params ? void 0 : params.afterText) && (this.afterText = params.afterText),
|
|
19
17
|
void 0 !== (null == params ? void 0 : params.fadeInChars) && (this.fadeInChars = params.fadeInChars),
|
|
20
|
-
void 0 !== (null == params ? void 0 : params.fadeInDuration) && (this.fadeInDuration = params.fadeInDuration)
|
|
18
|
+
void 0 !== (null == params ? void 0 : params.fadeInDuration) && (this.fadeInDuration = params.fadeInDuration),
|
|
19
|
+
void 0 !== (null == params ? void 0 : params.strokeFirst) && (this.strokeFirst = params.strokeFirst),
|
|
20
|
+
void 0 !== (null == params ? void 0 : params.strokeToFillRatio) && (this.strokeToFillRatio = params.strokeToFillRatio);
|
|
21
21
|
}
|
|
22
22
|
onFirstRun() {
|
|
23
23
|
const fromProps = this.getLastProps(), toProps = this.getEndProps();
|
|
@@ -37,11 +37,20 @@ class InputRichText extends custom_animate_1.ACustomAnimate {
|
|
|
37
37
|
currentLength = Math.round(fromItems + (totalItems - fromItems) * adjustedRatio);
|
|
38
38
|
} else currentLength = Math.round(fromItems + (totalItems - fromItems) * ratio);
|
|
39
39
|
if (currentTextConfig = fromItems > totalItems ? this.fromTextConfig.slice(0, currentLength) : this.toTextConfig.slice(0, currentLength).map(((item, index) => {
|
|
40
|
-
if (
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
40
|
+
if ("text" in item) {
|
|
41
|
+
const newItem = Object.assign({}, item);
|
|
42
|
+
if (this.strokeFirst) {
|
|
43
|
+
const appearTime = index / totalItems * maxTextShowRatio, itemLifetime = Math.max(0, ratio - appearTime), maxLifetime = 1 - appearTime, fillProgress = Math.min(1, itemLifetime / (this.strokeToFillRatio * maxLifetime));
|
|
44
|
+
if ("fill" in newItem && newItem.fill && (newItem.stroke = newItem.fill, fillProgress < 1 && (newItem.fillOpacity = fillProgress)),
|
|
45
|
+
this.fadeInChars) {
|
|
46
|
+
const fadeProgress = Math.min(1, itemLifetime / (this.fadeInDuration * maxLifetime));
|
|
47
|
+
newItem.opacity = Math.max(0, Math.min(1, fadeProgress));
|
|
48
|
+
}
|
|
49
|
+
} else if (this.fadeInChars) {
|
|
50
|
+
const fadeProgress = (ratio - index / totalItems * maxTextShowRatio) / this.fadeInDuration;
|
|
51
|
+
newItem.opacity = Math.max(0, Math.min(1, fadeProgress));
|
|
52
|
+
}
|
|
53
|
+
return newItem;
|
|
45
54
|
}
|
|
46
55
|
return item;
|
|
47
56
|
})), this.showCursor && currentLength < totalItems) {
|
|
@@ -67,4 +76,5 @@ class InputRichText extends custom_animate_1.ACustomAnimate {
|
|
|
67
76
|
}
|
|
68
77
|
}
|
|
69
78
|
|
|
70
|
-
exports.InputRichText = InputRichText;
|
|
79
|
+
exports.InputRichText = InputRichText;
|
|
80
|
+
//# sourceMappingURL=input-richtext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/custom/richtext/input-richtext.ts"],"names":[],"mappings":"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","file":"input-richtext.js","sourcesContent":["import { ACustomAnimate } from '../custom-animate';\nimport type {\n IRichTextCharacter,\n IRichTextParagraphCharacter,\n IAnimate,\n IStep,\n EasingType\n} from '@visactor/vrender-core';\nimport { RichText } from '@visactor/vrender-core';\n\n/**\n * 富文本输入动画,实现类似打字机的字符逐个显示效果\n * 支持通过beforeText和afterText参数添加前缀和后缀\n * 支持通过showCursor参数显示光标,cursorChar自定义光标字符\n * 支持通过fadeInChars参数开启字符透明度渐变效果\n */\nexport class InputRichText extends ACustomAnimate<{ textConfig: IRichTextCharacter[] }> {\n declare valid: boolean;\n\n private fromTextConfig: IRichTextCharacter[] = [];\n private toTextConfig: IRichTextCharacter[] = [];\n private originalTextConfig: IRichTextCharacter[] = [];\n private showCursor: boolean = false;\n private cursorChar: string = '|';\n private blinkCursor: boolean = true;\n private beforeText: string = '';\n private afterText: string = '';\n private fadeInChars: boolean = false;\n private fadeInDuration: number = 0.3; // 透明度渐变持续时间,以动画总时长的比例表示\n\n constructor(\n from: { textConfig: IRichTextCharacter[] },\n to: { textConfig: IRichTextCharacter[] },\n duration: number,\n easing: EasingType,\n params?: {\n showCursor?: boolean;\n cursorChar?: string;\n blinkCursor?: boolean;\n beforeText?: string;\n afterText?: string;\n fadeInChars?: boolean;\n fadeInDuration?: number;\n }\n ) {\n super(from, to, duration, easing, params);\n\n // 配置光标相关选项\n if (params?.showCursor !== undefined) {\n this.showCursor = params.showCursor;\n }\n if (params?.cursorChar !== undefined) {\n this.cursorChar = params.cursorChar;\n }\n if (params?.blinkCursor !== undefined) {\n this.blinkCursor = params.blinkCursor;\n }\n\n // 配置前缀和后缀文本\n if (params?.beforeText !== undefined) {\n this.beforeText = params.beforeText;\n }\n if (params?.afterText !== undefined) {\n this.afterText = params.afterText;\n }\n\n // 配置字符透明度渐变效果\n if (params?.fadeInChars !== undefined) {\n this.fadeInChars = params.fadeInChars;\n }\n if (params?.fadeInDuration !== undefined) {\n this.fadeInDuration = params.fadeInDuration;\n }\n }\n\n onFirstRun(): void {\n const fromProps = this.getLastProps();\n const toProps = this.getEndProps();\n\n // 存储原始配置\n this.originalTextConfig = toProps.textConfig ? [...toProps.textConfig] : [];\n\n // 初始化解析结果\n this.valid = true;\n\n // 确保to不为空\n if (!this.originalTextConfig || this.originalTextConfig.length === 0) {\n this.valid = false;\n return;\n }\n\n // 将文本拆分为单个字符,使用RichText的静态方法\n this.fromTextConfig =\n fromProps.textConfig && fromProps.textConfig.length > 0\n ? RichText.TransformTextConfig2SingleCharacter(fromProps.textConfig)\n : [];\n\n this.toTextConfig = RichText.TransformTextConfig2SingleCharacter(this.originalTextConfig);\n }\n\n onEnd(cb?: (animate: IAnimate, step: IStep) => void): void {\n super.onEnd(cb);\n if (!cb) {\n // 动画结束时,恢复原始textConfig\n this.target.setAttribute('textConfig', this.originalTextConfig);\n }\n }\n\n onUpdate(end: boolean, ratio: number, out: Record<string, any>): void {\n if (!this.valid) {\n return;\n }\n\n // 计算当前应该显示的字符数量\n const totalItems = this.toTextConfig.length;\n const fromItems = this.fromTextConfig.length;\n\n // 计算文本显示比例上限 - 如果有渐变效果,需要为尾部字符的渐变留出时间\n // 例如,如果fadeInDuration为0.3,则文本显示部分最多占用动画时间的70%\n const maxTextShowRatio = this.fadeInChars ? 1 - this.fadeInDuration : 1;\n\n // 确定当前应该显示多少个项目\n let currentLength: number;\n\n // 如果fromItems比totalItems长,则是删除动画,否则是添加动画\n if (fromItems > totalItems) {\n // 删除文本动画(从多到少)\n currentLength = Math.round(fromItems - (fromItems - totalItems) * ratio);\n } else {\n // 添加文本动画(从少到多)- 需要更快显示字符以便留出时间让最后的字符完成渐变\n if (this.fadeInChars) {\n // 当ratio达到maxTextShowRatio时,应该已经显示全部文本\n const adjustedRatio = Math.min(1, ratio / maxTextShowRatio);\n currentLength = Math.round(fromItems + (totalItems - fromItems) * adjustedRatio);\n } else {\n // 无渐变效果时,正常显示\n currentLength = Math.round(fromItems + (totalItems - fromItems) * ratio);\n }\n }\n\n // 构建当前要显示的textConfig\n let currentTextConfig: IRichTextCharacter[];\n if (fromItems > totalItems) {\n // 删除动画:显示from的前currentLength项\n currentTextConfig = this.fromTextConfig.slice(0, currentLength);\n } else {\n // 添加文本动画:显示to的前currentLength项,可能需要应用透明度\n currentTextConfig = this.toTextConfig.slice(0, currentLength).map((item, index) => {\n // 如果启用了透明度渐变效果\n if (this.fadeInChars && 'text' in item) {\n // 计算每个字符从出现到结束的渐变进度\n // 字符在特定时间点出现:出现时刻 = (index / totalItems) * maxTextShowRatio\n // 当前时刻 = ratio\n // 渐变持续时间 = fadeInDuration\n // 渐变进度 = (当前时刻 - 出现时刻) / 渐变持续时间\n\n const appearTime = (index / totalItems) * maxTextShowRatio;\n const fadeProgress = (ratio - appearTime) / this.fadeInDuration;\n\n // 限制透明度在0-1范围内\n const opacity = Math.max(0, Math.min(1, fadeProgress));\n\n // 如果是文本项,添加透明度\n return {\n ...item,\n opacity: opacity\n };\n }\n return item;\n });\n }\n\n // 如果启用了光标\n if (this.showCursor && currentLength < totalItems) {\n // 判断是否应该显示光标\n let shouldShowCursor = true;\n\n if (this.blinkCursor) {\n // 闪烁效果:在动画期间,光标每半个周期闪烁一次\n const blinkRate = 0.1; // 光标闪烁频率(每10%动画进度闪烁一次)\n shouldShowCursor = Math.floor(ratio / blinkRate) % 2 === 0;\n }\n\n if (shouldShowCursor && currentTextConfig.length > 0) {\n // 找到最后一个文本项,在其后添加光标\n const lastIndex = currentTextConfig.length - 1;\n const lastItem = currentTextConfig[lastIndex];\n\n if ('text' in lastItem) {\n // 如果最后一项是文本,将光标添加到文本后面\n currentTextConfig[lastIndex] = {\n ...lastItem,\n text: String(lastItem.text) + this.cursorChar\n };\n } else {\n // 如果最后一项是非文本(如图片),添加一个只包含光标的新文本项\n const cursorItem: IRichTextParagraphCharacter = {\n text: this.cursorChar,\n fontSize: 16 // 使用默认字体大小,或者从context获取\n };\n currentTextConfig.push(cursorItem);\n }\n }\n }\n\n // 更新富文本的textConfig属性\n this.target.setAttribute('textConfig', currentTextConfig);\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/custom/richtext/input-richtext.ts"],"names":[],"mappings":"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","file":"input-richtext.js","sourcesContent":["import { ACustomAnimate } from '../custom-animate';\nimport type {\n IRichTextCharacter,\n IRichTextParagraphCharacter,\n IAnimate,\n IStep,\n EasingType\n} from '@visactor/vrender-core';\nimport { RichText } from '@visactor/vrender-core';\n\n/**\n * 富文本输入动画,实现类似打字机的字符逐个显示效果\n * 支持通过beforeText和afterText参数添加前缀和后缀\n * 支持通过showCursor参数显示光标,cursorChar自定义光标字符\n * 支持通过fadeInChars参数开启字符透明度渐变效果\n * 支持通过strokeFirst参数开启描边先于填充显示效果,使用文字自身颜色作为描边色\n */\nexport class InputRichText extends ACustomAnimate<{ textConfig: IRichTextCharacter[] }> {\n declare valid: boolean;\n\n private fromTextConfig: IRichTextCharacter[] = [];\n private toTextConfig: IRichTextCharacter[] = [];\n private originalTextConfig: IRichTextCharacter[] = [];\n private showCursor: boolean = false;\n private cursorChar: string = '|';\n private blinkCursor: boolean = true;\n private fadeInChars: boolean = false;\n private fadeInDuration: number = 0.3; // 透明度渐变持续时间,以动画总时长的比例表示\n private strokeFirst: boolean = false; // 是否开启描边先于填充显示效果\n private strokeToFillRatio: number = 0.3; // 描边到填充的过渡比例,占总动画时长的比例\n\n constructor(\n from: { textConfig: IRichTextCharacter[] },\n to: { textConfig: IRichTextCharacter[] },\n duration: number,\n easing: EasingType,\n params?: {\n showCursor?: boolean;\n cursorChar?: string;\n blinkCursor?: boolean;\n beforeText?: string;\n afterText?: string;\n fadeInChars?: boolean;\n fadeInDuration?: number;\n strokeFirst?: boolean;\n strokeToFillRatio?: number;\n }\n ) {\n super(from, to, duration, easing, params);\n\n // 配置光标相关选项\n if (params?.showCursor !== undefined) {\n this.showCursor = params.showCursor;\n }\n if (params?.cursorChar !== undefined) {\n this.cursorChar = params.cursorChar;\n }\n if (params?.blinkCursor !== undefined) {\n this.blinkCursor = params.blinkCursor;\n }\n\n // 配置字符透明度渐变效果\n if (params?.fadeInChars !== undefined) {\n this.fadeInChars = params.fadeInChars;\n }\n if (params?.fadeInDuration !== undefined) {\n this.fadeInDuration = params.fadeInDuration;\n }\n\n // 配置描边先于填充显示效果\n if (params?.strokeFirst !== undefined) {\n this.strokeFirst = params.strokeFirst;\n }\n if (params?.strokeToFillRatio !== undefined) {\n this.strokeToFillRatio = params.strokeToFillRatio;\n }\n }\n\n onFirstRun(): void {\n const fromProps = this.getLastProps();\n const toProps = this.getEndProps();\n\n // 存储原始配置\n this.originalTextConfig = toProps.textConfig ? [...toProps.textConfig] : [];\n\n // 初始化解析结果\n this.valid = true;\n\n // 确保to不为空\n if (!this.originalTextConfig || this.originalTextConfig.length === 0) {\n this.valid = false;\n return;\n }\n\n // 将文本拆分为单个字符,使用RichText的静态方法\n this.fromTextConfig =\n fromProps.textConfig && fromProps.textConfig.length > 0\n ? RichText.TransformTextConfig2SingleCharacter(fromProps.textConfig)\n : [];\n\n this.toTextConfig = RichText.TransformTextConfig2SingleCharacter(this.originalTextConfig);\n }\n\n onEnd(cb?: (animate: IAnimate, step: IStep) => void): void {\n super.onEnd(cb);\n if (!cb) {\n // 动画结束时,恢复原始textConfig\n this.target.setAttribute('textConfig', this.originalTextConfig);\n }\n }\n\n onUpdate(end: boolean, ratio: number, out: Record<string, any>): void {\n if (!this.valid) {\n return;\n }\n\n // 计算当前应该显示的字符数量\n const totalItems = this.toTextConfig.length;\n const fromItems = this.fromTextConfig.length;\n\n // 计算文本显示比例上限 - 如果有渐变效果,需要为尾部字符的渐变留出时间\n // 例如,如果fadeInDuration为0.3,则文本显示部分最多占用动画时间的70%\n const maxTextShowRatio = this.fadeInChars ? 1 - this.fadeInDuration : 1;\n\n // 确定当前应该显示多少个项目\n let currentLength: number;\n\n // 如果fromItems比totalItems长,则是删除动画,否则是添加动画\n if (fromItems > totalItems) {\n // 删除文本动画(从多到少)\n currentLength = Math.round(fromItems - (fromItems - totalItems) * ratio);\n } else {\n // 添加文本动画(从少到多)- 需要更快显示字符以便留出时间让最后的字符完成渐变\n if (this.fadeInChars) {\n // 当ratio达到maxTextShowRatio时,应该已经显示全部文本\n const adjustedRatio = Math.min(1, ratio / maxTextShowRatio);\n currentLength = Math.round(fromItems + (totalItems - fromItems) * adjustedRatio);\n } else {\n // 无渐变效果时,正常显示\n currentLength = Math.round(fromItems + (totalItems - fromItems) * ratio);\n }\n }\n\n // 构建当前要显示的textConfig\n let currentTextConfig: IRichTextCharacter[];\n if (fromItems > totalItems) {\n // 删除动画:显示from的前currentLength项\n currentTextConfig = this.fromTextConfig.slice(0, currentLength);\n } else {\n // 添加文本动画:显示to的前currentLength项,可能需要应用透明度和描边效果\n currentTextConfig = this.toTextConfig.slice(0, currentLength).map((item, index) => {\n // 如果是文本项并且需要应用效果\n if ('text' in item) {\n const newItem = { ...item };\n\n // 如果启用了描边优先效果\n if (this.strokeFirst) {\n // 计算描边到填充的过渡进度\n // 字符在特定时间点出现:出现时刻 = (index / totalItems) * maxTextShowRatio\n const appearTime = (index / totalItems) * maxTextShowRatio;\n const itemLifetime = Math.max(0, ratio - appearTime); // 当前字符已经存在的时间\n const maxLifetime = 1 - appearTime; // 当前字符从出现到动画结束的最大时间\n const fillProgress = Math.min(1, itemLifetime / (this.strokeToFillRatio * maxLifetime));\n\n // 使用文本自身的填充颜色作为描边颜色\n if ('fill' in newItem && newItem.fill) {\n newItem.stroke = newItem.fill;\n // 计算描边宽度,基于字体大小\n // const fontSize = newItem.fontSize || 16;\n // newItem.lineWidth = Math.max(1, fontSize * 0.05); // 线宽大约为字体大小的5%\n\n // 如果还没到填充阶段,则将填充色透明度设为0\n if (fillProgress < 1) {\n newItem.fillOpacity = fillProgress;\n }\n }\n\n // 如果也启用了透明度渐变\n if (this.fadeInChars) {\n const fadeProgress = Math.min(1, itemLifetime / (this.fadeInDuration * maxLifetime));\n newItem.opacity = Math.max(0, Math.min(1, fadeProgress));\n }\n }\n // 只启用了透明度渐变效果,没有启用描边优先\n else if (this.fadeInChars) {\n const appearTime = (index / totalItems) * maxTextShowRatio;\n const fadeProgress = (ratio - appearTime) / this.fadeInDuration;\n newItem.opacity = Math.max(0, Math.min(1, fadeProgress));\n }\n\n return newItem;\n }\n return item;\n });\n }\n\n // 如果启用了光标\n if (this.showCursor && currentLength < totalItems) {\n // 判断是否应该显示光标\n let shouldShowCursor = true;\n\n if (this.blinkCursor) {\n // 闪烁效果:在动画期间,光标每半个周期闪烁一次\n const blinkRate = 0.1; // 光标闪烁频率(每10%动画进度闪烁一次)\n shouldShowCursor = Math.floor(ratio / blinkRate) % 2 === 0;\n }\n\n if (shouldShowCursor && currentTextConfig.length > 0) {\n // 找到最后一个文本项,在其后添加光标\n const lastIndex = currentTextConfig.length - 1;\n const lastItem = currentTextConfig[lastIndex];\n\n if ('text' in lastItem) {\n // 如果最后一项是文本,将光标添加到文本后面\n currentTextConfig[lastIndex] = {\n ...lastItem,\n text: String(lastItem.text) + this.cursorChar\n };\n } else {\n // 如果最后一项是非文本(如图片),添加一个只包含光标的新文本项\n const cursorItem: IRichTextParagraphCharacter = {\n text: this.cursorChar,\n fontSize: 16 // 使用默认字体大小,或者从context获取\n };\n currentTextConfig.push(cursorItem);\n }\n }\n }\n\n // 更新富文本的textConfig属性\n this.target.setAttribute('textConfig', currentTextConfig);\n }\n}\n"]}
|
package/cjs/custom/rotate.js
CHANGED
|
@@ -56,11 +56,12 @@ exports.RotateBase = RotateBase;
|
|
|
56
56
|
|
|
57
57
|
class RotateIn extends RotateBase {
|
|
58
58
|
onBind() {
|
|
59
|
+
var _a;
|
|
59
60
|
super.onBind();
|
|
60
61
|
const {from: from, to: to} = (0, exports.rotateIn)(this.target, this.params.options);
|
|
61
62
|
this.props = to, this.propKeys = [ "angle" ], this.from = from, this.to = to;
|
|
62
63
|
const finalAttribute = this.target.getFinalAttribute();
|
|
63
|
-
finalAttribute &&
|
|
64
|
+
finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_a = this.params.controlOptions) || void 0 === _a ? void 0 : _a.immediatelyApply) && this.target.setAttributes(from);
|
|
64
65
|
}
|
|
65
66
|
}
|
|
66
67
|
|
package/cjs/custom/rotate.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/custom/rotate.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["../src/custom/rotate.ts"],"names":[],"mappings":"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","file":"rotate.js","sourcesContent":["import type { EasingType, IGraphic } from '@visactor/vrender-core';\nimport { isNumberClose, isValidNumber } from '@visactor/vutils';\nimport { ACustomAnimate } from './custom-animate';\n\nexport interface IRotateAnimationOptions {\n orient?: 'clockwise' | 'anticlockwise';\n angle?: number;\n}\n\nexport const rotateIn = (graphic: IGraphic, options: IRotateAnimationOptions) => {\n const finalAttrs = graphic.getFinalAttribute();\n const attributeAngle = finalAttrs.angle ?? 0;\n\n let angle = 0;\n if (isNumberClose(attributeAngle / (Math.PI * 2), 0)) {\n angle = Math.round(attributeAngle / (Math.PI * 2)) * Math.PI * 2;\n } else if (isValidNumber(options?.angle)) {\n angle = options.angle;\n } else if (options?.orient === 'anticlockwise') {\n angle = Math.ceil(attributeAngle / (Math.PI * 2)) * Math.PI * 2;\n } else {\n angle = Math.floor(attributeAngle / (Math.PI * 2)) * Math.PI * 2;\n }\n return {\n from: { angle },\n to: { angle: attributeAngle }\n };\n};\n\nexport const rotateOut = (graphic: IGraphic, options: IRotateAnimationOptions) => {\n const finalAttrs = graphic.getFinalAttribute();\n const finalAngle = finalAttrs.angle ?? 0;\n let angle = 0;\n if (isNumberClose(finalAngle / (Math.PI * 2), 0)) {\n angle = Math.round(finalAngle / (Math.PI * 2)) * Math.PI * 2;\n } else if (isValidNumber(options?.angle)) {\n angle = options.angle;\n } else if (options?.orient === 'anticlockwise') {\n angle = Math.ceil(finalAngle / (Math.PI * 2)) * Math.PI * 2;\n } else {\n angle = Math.floor(finalAngle / (Math.PI * 2)) * Math.PI * 2;\n }\n return {\n from: { angle: finalAngle },\n to: { angle }\n };\n};\n\nexport class RotateBase extends ACustomAnimate<Record<string, number>> {\n declare valid: boolean;\n\n constructor(from: null, to: null, duration: number, easing: EasingType, params?: any) {\n super(from, to, duration, easing, params);\n }\n\n onUpdate(end: boolean, ratio: number, out: Record<string, any>): void {\n const attribute: Record<string, any> = this.target.attribute;\n this.propKeys.forEach(key => {\n attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;\n });\n this.target.addUpdatePositionTag();\n this.target.addUpdateShapeAndBoundsTag();\n }\n}\n\n/**\n * 增长渐入\n */\nexport class RotateIn extends RotateBase {\n onBind(): void {\n super.onBind();\n // 用于入场的时候设置属性(因为有动画的时候VChart不会再设置属性了)\n const { from, to } = rotateIn(this.target, this.params.options);\n\n this.props = to;\n this.propKeys = ['angle'];\n this.from = from;\n this.to = to;\n\n // 用于入场的时候设置属性(因为有动画的时候VChart不会再设置属性了)\n const finalAttribute = this.target.getFinalAttribute();\n if (finalAttribute) {\n this.target.setAttributes(finalAttribute);\n }\n\n if (this.params.controlOptions?.immediatelyApply !== false) {\n this.target.setAttributes(from);\n }\n }\n}\n\nexport class RotateOut extends RotateBase {\n onBind(): void {\n super.onBind();\n const { from, to } = rotateOut(this.target, this.params.options);\n this.props = to;\n this.propKeys = ['angle'];\n\n this.from = from;\n this.to = to;\n }\n}\n"]}
|
package/cjs/custom/scale.js
CHANGED
|
@@ -11,7 +11,7 @@ class ScaleIn extends custom_animate_1.ACustomAnimate {
|
|
|
11
11
|
super(from, to, duration, easing, params);
|
|
12
12
|
}
|
|
13
13
|
onBind() {
|
|
14
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
14
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
15
15
|
let from, to;
|
|
16
16
|
super.onBind();
|
|
17
17
|
const attrs = this.target.getFinalAttribute(), fromAttrs = null !== (_a = this.target.attribute) && void 0 !== _a ? _a : {};
|
|
@@ -42,8 +42,8 @@ class ScaleIn extends custom_animate_1.ACustomAnimate {
|
|
|
42
42
|
}, this._updateFunction = this.updateXY;
|
|
43
43
|
}
|
|
44
44
|
const finalAttribute = this.target.getFinalAttribute();
|
|
45
|
-
finalAttribute &&
|
|
46
|
-
this.
|
|
45
|
+
finalAttribute && this.target.setAttributes(finalAttribute), this.props = to, this.from = from,
|
|
46
|
+
this.to = to, !1 !== (null === (_l = this.params.controlOptions) || void 0 === _l ? void 0 : _l.immediatelyApply) && this.target.setAttributes(from);
|
|
47
47
|
}
|
|
48
48
|
onEnd(cb) {
|
|
49
49
|
super.onEnd(cb);
|
|
@@ -63,7 +63,8 @@ class ScaleIn extends custom_animate_1.ACustomAnimate {
|
|
|
63
63
|
-1 !== index && this.propKeys.splice(index, 1), this.propKeys && this.propKeys.length > 1 ? this._updateFunction = this.updateXY : "scaleX" === this.propKeys[0] ? this._updateFunction = this.updateX : "scaleY" === this.propKeys[0] ? this._updateFunction = this.updateY : this._updateFunction = null;
|
|
64
64
|
}
|
|
65
65
|
onUpdate(end, ratio, out) {
|
|
66
|
-
this._updateFunction && (this._updateFunction(ratio), this.target.addUpdatePositionTag()
|
|
66
|
+
this._updateFunction && (this._updateFunction(ratio), this.target.addUpdatePositionTag(),
|
|
67
|
+
this.target.addUpdateBoundTag());
|
|
67
68
|
}
|
|
68
69
|
}
|
|
69
70
|
|
|
@@ -113,9 +114,8 @@ class ScaleOut extends custom_animate_1.ACustomAnimate {
|
|
|
113
114
|
const attribute = this.target.attribute;
|
|
114
115
|
this.propKeys.forEach((key => {
|
|
115
116
|
attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
|
|
116
|
-
})), this.target.addUpdatePositionTag();
|
|
117
|
+
})), this.target.addUpdatePositionTag(), this.target.addUpdateBoundTag();
|
|
117
118
|
}
|
|
118
119
|
}
|
|
119
120
|
|
|
120
|
-
exports.ScaleOut = ScaleOut;
|
|
121
|
-
//# sourceMappingURL=scale.js.map
|
|
121
|
+
exports.ScaleOut = ScaleOut;
|
package/cjs/custom/scale.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/custom/scale.ts"],"names":[],"mappings":";;;AACA,qDAAkD;AAMlD,MAAa,OAAQ,SAAQ,+BAAsC;IAGjE,YAAY,IAAU,EAAE,EAAQ,EAAE,QAAgB,EAAE,MAAkB,EAAE,MAA+B;QACrG,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,CAAC;IAID,MAAM;;QACJ,KAAK,CAAC,MAAM,EAAE,CAAC;QACf,IAAI,IAA4B,CAAC;QACjC,IAAI,EAA0B,CAAC;QAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,iBAAiB,EAAE,CAAC;QAC9C,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,MAAM,CAAC,SAAS,mCAAI,EAAE,CAAC;QAE9C,QAAQ,MAAA,IAAI,CAAC,MAAM,0CAAE,SAAS,EAAE;YAC9B,KAAK,GAAG;gBACN,IAAI,GAAG,EAAE,MAAM,EAAE,MAAA,SAAS,CAAC,MAAM,mCAAI,CAAC,EAAE,CAAC;gBACzC,EAAE,GAAG,EAAE,MAAM,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,mCAAI,CAAC,EAAE,CAAC;gBACpC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;gBACpC,MAAM;YACR,KAAK,GAAG;gBACN,IAAI,GAAG,EAAE,MAAM,EAAE,MAAA,SAAS,CAAC,MAAM,mCAAI,CAAC,EAAE,CAAC;gBACzC,EAAE,GAAG,EAAE,MAAM,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,mCAAI,CAAC,EAAE,CAAC;gBACpC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;gBACpC,MAAM;YACR,KAAK,IAAI,CAAC;YACV;gBACE,IAAI,GAAG,EAAE,MAAM,EAAE,MAAA,SAAS,CAAC,MAAM,mCAAI,CAAC,EAAE,MAAM,EAAE,MAAA,SAAS,CAAC,MAAM,mCAAI,CAAC,EAAE,CAAC;gBACxE,EAAE,GAAG;oBACH,MAAM,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,mCAAI,CAAC;oBAC1B,MAAM,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,mCAAI,CAAC;iBAC3B,CAAC;gBACF,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC;SACxC;QAGD,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,iBAAiB,EAAE,CAAC;QACvD,IAAI,cAAc,EAAE;YAClB,
|
|
1
|
+
{"version":3,"sources":["../src/custom/scale.ts"],"names":[],"mappings":"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","file":"scale.js","sourcesContent":["import type { EasingType, IAnimate, IStep } from '@visactor/vrender-core';\nimport { ACustomAnimate } from './custom-animate';\n\nexport interface IScaleAnimationOptions {\n direction?: 'x' | 'y' | 'xy';\n}\n\nexport class ScaleIn extends ACustomAnimate<Record<string, number>> {\n declare valid: boolean;\n\n constructor(from: null, to: null, duration: number, easing: EasingType, params?: IScaleAnimationOptions) {\n super(from, to, duration, easing, params);\n }\n\n declare _updateFunction: (ratio: number) => void;\n\n onBind(): void {\n super.onBind();\n let from: Record<string, number>;\n let to: Record<string, number>;\n const attrs = this.target.getFinalAttribute();\n const fromAttrs = this.target.attribute ?? {};\n\n switch (this.params?.direction) {\n case 'x':\n from = { scaleX: fromAttrs.scaleX ?? 0 };\n to = { scaleX: attrs?.scaleX ?? 1 };\n this._updateFunction = this.updateX;\n break;\n case 'y':\n from = { scaleY: fromAttrs.scaleY ?? 0 };\n to = { scaleY: attrs?.scaleY ?? 1 };\n this._updateFunction = this.updateY;\n break;\n case 'xy':\n default:\n from = { scaleX: fromAttrs.scaleX ?? 0, scaleY: fromAttrs.scaleY ?? 0 };\n to = {\n scaleX: attrs?.scaleX ?? 1,\n scaleY: attrs?.scaleY ?? 1\n };\n this._updateFunction = this.updateXY;\n }\n\n // 用于入场的时候设置属性(因为有动画的时候VChart不会再设置属性了)\n const finalAttribute = this.target.getFinalAttribute();\n if (finalAttribute) {\n this.target.setAttributes(finalAttribute);\n }\n\n this.props = to;\n this.from = from;\n this.to = to;\n if (this.params.controlOptions?.immediatelyApply !== false) {\n this.target.setAttributes(from);\n }\n }\n\n onEnd(cb?: (animate: IAnimate, step: IStep) => void): void {\n super.onEnd(cb);\n }\n\n updateX(ratio: number): void {\n this.target.attribute.scaleX = this.from.scaleX + (this.to.scaleX - this.from.scaleX) * ratio;\n }\n\n updateY(ratio: number): void {\n this.target.attribute.scaleY = this.from.scaleY + (this.to.scaleY - this.from.scaleY) * ratio;\n }\n\n updateXY(ratio: number): void {\n this.updateX(ratio);\n this.updateY(ratio);\n }\n\n /**\n * 删除自身属性,会直接从props等内容里删除掉\n */\n deleteSelfAttr(key: string): void {\n delete this.props[key];\n // fromProps在动画开始时才会计算,这时可能不在\n this.fromProps && delete this.fromProps[key];\n const index = this.propKeys.indexOf(key);\n if (index !== -1) {\n this.propKeys.splice(index, 1);\n }\n\n if (this.propKeys && this.propKeys.length > 1) {\n this._updateFunction = this.updateXY;\n } else if (this.propKeys[0] === 'scaleX') {\n this._updateFunction = this.updateX;\n } else if (this.propKeys[0] === 'scaleY') {\n this._updateFunction = this.updateY;\n } else {\n this._updateFunction = null;\n }\n }\n\n onUpdate(end: boolean, ratio: number, out: Record<string, any>): void {\n if (this._updateFunction) {\n this._updateFunction(ratio);\n this.target.addUpdatePositionTag();\n this.target.addUpdateBoundTag();\n }\n }\n}\n\nexport class ScaleOut extends ACustomAnimate<Record<string, number>> {\n declare valid: boolean;\n\n constructor(from: null, to: null, duration: number, easing: EasingType, params?: IScaleAnimationOptions) {\n super(from, to, duration, easing, params);\n }\n\n onBind(): void {\n super.onBind();\n let from: Record<string, number>;\n let to: Record<string, number>;\n // 获取当前的数据\n const attrs = this.target.attribute;\n switch (this.params?.direction) {\n case 'x':\n from = { scaleX: attrs?.scaleX ?? 1 };\n to = { scaleX: 0 };\n break;\n case 'y':\n from = { scaleY: attrs?.scaleY ?? 1 };\n to = { scaleY: 0 };\n break;\n case 'xy':\n default:\n from = { scaleX: attrs?.scaleX ?? 1, scaleY: attrs?.scaleY ?? 1 };\n to = {\n scaleX: 0,\n scaleY: 0\n };\n }\n this.props = to;\n this.from = from;\n this.to = to;\n }\n\n onEnd(cb?: (animate: IAnimate, step: IStep) => void): void {\n super.onEnd(cb);\n }\n\n onUpdate(end: boolean, ratio: number, out: Record<string, any>): void {\n const attribute: Record<string, any> = this.target.attribute;\n this.propKeys.forEach(key => {\n attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;\n });\n this.target.addUpdatePositionTag();\n this.target.addUpdateBoundTag();\n }\n}\n"]}
|
package/cjs/custom/story.d.ts
CHANGED
|
@@ -18,6 +18,28 @@ export interface ISpinAnimationOptions {
|
|
|
18
18
|
fromScale?: number;
|
|
19
19
|
fromOpacity?: number;
|
|
20
20
|
}
|
|
21
|
+
export interface IStrokeAnimationOptions {
|
|
22
|
+
lineWidth?: number;
|
|
23
|
+
strokeColor?: string;
|
|
24
|
+
fromOpacity?: number;
|
|
25
|
+
dashLength?: number;
|
|
26
|
+
showFill?: boolean;
|
|
27
|
+
fillOpacity?: number;
|
|
28
|
+
}
|
|
29
|
+
export interface IPulseAnimationOptions {
|
|
30
|
+
pulseCount?: number;
|
|
31
|
+
pulseOpacity?: number;
|
|
32
|
+
pulseScale?: number;
|
|
33
|
+
pulseColor?: string;
|
|
34
|
+
pulseColorIntensity?: number;
|
|
35
|
+
strokeOnly?: boolean;
|
|
36
|
+
fillOnly?: boolean;
|
|
37
|
+
useScale?: boolean;
|
|
38
|
+
useOpacity?: boolean;
|
|
39
|
+
useColor?: boolean;
|
|
40
|
+
useStroke?: boolean;
|
|
41
|
+
useFill?: boolean;
|
|
42
|
+
}
|
|
21
43
|
export declare class SlideIn extends ACustomAnimate<Record<string, number>> {
|
|
22
44
|
valid: boolean;
|
|
23
45
|
propKeys: string[];
|
|
@@ -45,6 +67,29 @@ export declare class SpinIn extends ACustomAnimate<Record<string, number>> {
|
|
|
45
67
|
onBind(): void;
|
|
46
68
|
onUpdate(end: boolean, ratio: number, out: Record<string, any>): void;
|
|
47
69
|
}
|
|
70
|
+
export declare class StrokeIn extends ACustomAnimate<Record<string, any>> {
|
|
71
|
+
valid: boolean;
|
|
72
|
+
propKeys: string[];
|
|
73
|
+
from: Record<string, any>;
|
|
74
|
+
to: Record<string, any>;
|
|
75
|
+
private perimeter;
|
|
76
|
+
private originalAttributes;
|
|
77
|
+
constructor(from: null, to: null, duration: number, easing: EasingType, params?: IStrokeAnimationOptions);
|
|
78
|
+
onBind(): void;
|
|
79
|
+
onUpdate(end: boolean, ratio: number, out: Record<string, any>): void;
|
|
80
|
+
onEnd(): void;
|
|
81
|
+
}
|
|
82
|
+
export declare class StrokeOut extends ACustomAnimate<Record<string, any>> {
|
|
83
|
+
valid: boolean;
|
|
84
|
+
propKeys: string[];
|
|
85
|
+
from: Record<string, any>;
|
|
86
|
+
to: Record<string, any>;
|
|
87
|
+
private perimeter;
|
|
88
|
+
private originalAttributes;
|
|
89
|
+
constructor(from: null, to: null, duration: number, easing: EasingType, params?: IStrokeAnimationOptions);
|
|
90
|
+
onFirstRun(): void;
|
|
91
|
+
onUpdate(end: boolean, ratio: number, out: Record<string, any>): void;
|
|
92
|
+
}
|
|
48
93
|
export interface IMoveScaleAnimationOptions {
|
|
49
94
|
slideDirection?: 'top' | 'bottom' | 'left' | 'right';
|
|
50
95
|
slideDistance?: number;
|
|
@@ -126,3 +171,26 @@ export declare class MoveRotateOut extends ACustomAnimate<any> {
|
|
|
126
171
|
onFirstRun(): void;
|
|
127
172
|
onUpdate(end: boolean, ratio: number, out: Record<string, any>): void;
|
|
128
173
|
}
|
|
174
|
+
export declare class PulseAnimate extends ACustomAnimate<Record<string, any>> {
|
|
175
|
+
valid: boolean;
|
|
176
|
+
private originalAttributes;
|
|
177
|
+
private pulseCount;
|
|
178
|
+
private pulseOpacity;
|
|
179
|
+
private pulseScale;
|
|
180
|
+
private pulseColor;
|
|
181
|
+
private pulseColorIntensity;
|
|
182
|
+
private strokeOnly;
|
|
183
|
+
private fillOnly;
|
|
184
|
+
private useScale;
|
|
185
|
+
private useOpacity;
|
|
186
|
+
private useStroke;
|
|
187
|
+
private useFill;
|
|
188
|
+
private useColor;
|
|
189
|
+
private originalFill;
|
|
190
|
+
private originalStroke;
|
|
191
|
+
constructor(from: null, to: null, duration: number, easing: EasingType, params?: IPulseAnimationOptions);
|
|
192
|
+
onBind(): void;
|
|
193
|
+
onUpdate(end: boolean, ratio: number, out: Record<string, any>): void;
|
|
194
|
+
private applyColorPulse;
|
|
195
|
+
onEnd(): void;
|
|
196
|
+
}
|
package/cjs/custom/story.js
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: !0
|
|
5
|
-
}), exports.MoveRotateOut = exports.MoveScaleOut = exports.SpinOut = exports.GrowOut = exports.SlideOut = exports.MoveRotateIn = exports.MoveScaleIn = exports.SpinIn = exports.GrowIn = exports.SlideIn = exports.StoryFadeIn = void 0;
|
|
5
|
+
}), exports.PulseAnimate = exports.MoveRotateOut = exports.MoveScaleOut = exports.SpinOut = exports.GrowOut = exports.SlideOut = exports.MoveRotateIn = exports.MoveScaleIn = exports.StrokeOut = exports.StrokeIn = exports.SpinIn = exports.GrowIn = exports.SlideIn = exports.StoryFadeIn = void 0;
|
|
6
6
|
|
|
7
|
-
const fade_1 = require("./fade"), custom_animate_1 = require("./custom-animate"), animate_executor_1 = require("../executor/animate-executor");
|
|
7
|
+
const fade_1 = require("./fade"), custom_animate_1 = require("./custom-animate"), animate_executor_1 = require("../executor/animate-executor"), vrender_core_1 = require("@visactor/vrender-core");
|
|
8
8
|
|
|
9
9
|
class StoryFadeIn extends fade_1.FadeIn {}
|
|
10
10
|
|
|
@@ -104,6 +104,101 @@ class SpinIn extends custom_animate_1.ACustomAnimate {
|
|
|
104
104
|
|
|
105
105
|
exports.SpinIn = SpinIn;
|
|
106
106
|
|
|
107
|
+
class StrokeIn extends custom_animate_1.ACustomAnimate {
|
|
108
|
+
constructor(from, to, duration, easing, params) {
|
|
109
|
+
super(from, to, duration, easing, params), this.perimeter = 0, this.originalAttributes = {};
|
|
110
|
+
}
|
|
111
|
+
onBind() {
|
|
112
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
113
|
+
if (super.onBind(), this.originalAttributes = Object.assign({}, this.target.getAttributes()),
|
|
114
|
+
"rect" === this.target.type) {
|
|
115
|
+
const attr = this.target.attribute, width = null !== (_a = attr.width) && void 0 !== _a ? _a : 100, height = null !== (_b = attr.height) && void 0 !== _b ? _b : 100;
|
|
116
|
+
this.perimeter = 2 * (width + height);
|
|
117
|
+
} else if ("circle" === this.target.type) {
|
|
118
|
+
const radius = null !== (_c = this.target.attribute.radius) && void 0 !== _c ? _c : 50;
|
|
119
|
+
this.perimeter = 2 * Math.PI * radius;
|
|
120
|
+
} else if ("ellipse" === this.target.type) {
|
|
121
|
+
const attr = this.target.attribute, radiusX = null !== (_d = attr.radiusX) && void 0 !== _d ? _d : 50, radiusY = null !== (_e = attr.radiusY) && void 0 !== _e ? _e : 50;
|
|
122
|
+
this.perimeter = 2 * Math.PI * Math.sqrt((radiusX * radiusX + radiusY * radiusY) / 2);
|
|
123
|
+
} else this.perimeter = 1e3;
|
|
124
|
+
const lineWidth = null !== (_g = null === (_f = this.params) || void 0 === _f ? void 0 : _f.lineWidth) && void 0 !== _g ? _g : 2, strokeColor = null !== (_j = null === (_h = this.params) || void 0 === _h ? void 0 : _h.strokeColor) && void 0 !== _j ? _j : "black", fromOpacity = null !== (_l = null === (_k = this.params) || void 0 === _k ? void 0 : _k.fromOpacity) && void 0 !== _l ? _l : 1, dashLength = null !== (_o = null === (_m = this.params) || void 0 === _m ? void 0 : _m.dashLength) && void 0 !== _o ? _o : this.perimeter, showFill = null !== (_q = null === (_p = this.params) || void 0 === _p ? void 0 : _p.showFill) && void 0 !== _q && _q, fillOpacity = null !== (_s = null === (_r = this.params) || void 0 === _r ? void 0 : _r.fillOpacity) && void 0 !== _s ? _s : 0;
|
|
125
|
+
this.from = {
|
|
126
|
+
lineDash: [ dashLength, dashLength ],
|
|
127
|
+
lineDashOffset: dashLength,
|
|
128
|
+
lineWidth: lineWidth,
|
|
129
|
+
stroke: strokeColor,
|
|
130
|
+
strokeOpacity: fromOpacity
|
|
131
|
+
}, this.to = {
|
|
132
|
+
lineDash: [ dashLength, dashLength ],
|
|
133
|
+
lineDashOffset: 0,
|
|
134
|
+
lineWidth: lineWidth,
|
|
135
|
+
stroke: strokeColor,
|
|
136
|
+
strokeOpacity: fromOpacity
|
|
137
|
+
}, showFill ? (this.from.fillOpacity = fillOpacity, this.to.fillOpacity = null !== (_t = this.originalAttributes.fillOpacity) && void 0 !== _t ? _t : 1) : (this.from.fillOpacity = 0,
|
|
138
|
+
this.to.fillOpacity = 0), this.propKeys = [ "lineDash", "lineDashOffset", "lineWidth", "stroke", "strokeOpacity", "fillOpacity" ],
|
|
139
|
+
this.props = this.to, this.target.setAttributes(this.from);
|
|
140
|
+
}
|
|
141
|
+
onUpdate(end, ratio, out) {
|
|
142
|
+
var _a;
|
|
143
|
+
const attribute = this.target.attribute;
|
|
144
|
+
attribute.lineDashOffset = this.from.lineDashOffset + (this.to.lineDashOffset - this.from.lineDashOffset) * ratio,
|
|
145
|
+
(null === (_a = this.params) || void 0 === _a ? void 0 : _a.showFill) && (attribute.fillOpacity = this.from.fillOpacity + (this.to.fillOpacity - this.from.fillOpacity) * ratio);
|
|
146
|
+
}
|
|
147
|
+
onEnd() {
|
|
148
|
+
var _a;
|
|
149
|
+
if (super.onEnd(), !(null === (_a = this.params) || void 0 === _a ? void 0 : _a.showFill)) {
|
|
150
|
+
const originalAttrs = Object.assign({}, this.originalAttributes);
|
|
151
|
+
originalAttrs.fillOpacity = 0, this.target.setAttributes(originalAttrs);
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
exports.StrokeIn = StrokeIn;
|
|
157
|
+
|
|
158
|
+
class StrokeOut extends custom_animate_1.ACustomAnimate {
|
|
159
|
+
constructor(from, to, duration, easing, params) {
|
|
160
|
+
super(from, to, duration, easing, params), this.perimeter = 0, this.originalAttributes = {};
|
|
161
|
+
}
|
|
162
|
+
onFirstRun() {
|
|
163
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
164
|
+
if (this.originalAttributes = Object.assign({}, this.target.getAttributes()), "rect" === this.target.type) {
|
|
165
|
+
const attr = this.target.attribute, width = null !== (_a = attr.width) && void 0 !== _a ? _a : 100, height = null !== (_b = attr.height) && void 0 !== _b ? _b : 100;
|
|
166
|
+
this.perimeter = 2 * (width + height);
|
|
167
|
+
} else if ("circle" === this.target.type) {
|
|
168
|
+
const radius = null !== (_c = this.target.attribute.radius) && void 0 !== _c ? _c : 50;
|
|
169
|
+
this.perimeter = 2 * Math.PI * radius;
|
|
170
|
+
} else if ("ellipse" === this.target.type) {
|
|
171
|
+
const attr = this.target.attribute, radiusX = null !== (_d = attr.radiusX) && void 0 !== _d ? _d : 50, radiusY = null !== (_e = attr.radiusY) && void 0 !== _e ? _e : 50;
|
|
172
|
+
this.perimeter = 2 * Math.PI * Math.sqrt((radiusX * radiusX + radiusY * radiusY) / 2);
|
|
173
|
+
} else this.perimeter = 1e3;
|
|
174
|
+
const lineWidth = null !== (_g = null === (_f = this.params) || void 0 === _f ? void 0 : _f.lineWidth) && void 0 !== _g ? _g : 2, strokeColor = null !== (_j = null === (_h = this.params) || void 0 === _h ? void 0 : _h.strokeColor) && void 0 !== _j ? _j : "black", fromOpacity = null !== (_l = null === (_k = this.params) || void 0 === _k ? void 0 : _k.fromOpacity) && void 0 !== _l ? _l : 1, dashLength = null !== (_o = null === (_m = this.params) || void 0 === _m ? void 0 : _m.dashLength) && void 0 !== _o ? _o : this.perimeter, showFill = null !== (_q = null === (_p = this.params) || void 0 === _p ? void 0 : _p.showFill) && void 0 !== _q && _q;
|
|
175
|
+
this.from = {
|
|
176
|
+
lineDash: [ dashLength, dashLength ],
|
|
177
|
+
lineDashOffset: 0,
|
|
178
|
+
lineWidth: lineWidth,
|
|
179
|
+
stroke: strokeColor,
|
|
180
|
+
strokeOpacity: fromOpacity
|
|
181
|
+
}, this.to = {
|
|
182
|
+
lineDash: [ dashLength, dashLength ],
|
|
183
|
+
lineDashOffset: -dashLength,
|
|
184
|
+
lineWidth: lineWidth,
|
|
185
|
+
stroke: strokeColor,
|
|
186
|
+
strokeOpacity: fromOpacity
|
|
187
|
+
}, showFill ? (this.from.fillOpacity = null !== (_r = this.originalAttributes.fillOpacity) && void 0 !== _r ? _r : 1,
|
|
188
|
+
this.to.fillOpacity = 0) : (this.from.fillOpacity = 0, this.to.fillOpacity = 0),
|
|
189
|
+
this.propKeys = [ "lineDash", "lineDashOffset", "lineWidth", "stroke", "strokeOpacity", "fillOpacity" ],
|
|
190
|
+
this.props = this.to, this.target.setAttributes(this.from);
|
|
191
|
+
}
|
|
192
|
+
onUpdate(end, ratio, out) {
|
|
193
|
+
var _a;
|
|
194
|
+
const attribute = this.target.attribute;
|
|
195
|
+
attribute.lineDashOffset = this.from.lineDashOffset + (this.to.lineDashOffset - this.from.lineDashOffset) * ratio,
|
|
196
|
+
(null === (_a = this.params) || void 0 === _a ? void 0 : _a.showFill) && (attribute.fillOpacity = this.from.fillOpacity + (this.to.fillOpacity - this.from.fillOpacity) * ratio);
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
exports.StrokeOut = StrokeOut;
|
|
201
|
+
|
|
107
202
|
class MoveScaleIn extends custom_animate_1.ACustomAnimate {
|
|
108
203
|
constructor(from, to, duration, easing, params) {
|
|
109
204
|
var _a;
|
|
@@ -348,4 +443,55 @@ class MoveRotateOut extends custom_animate_1.ACustomAnimate {
|
|
|
348
443
|
onUpdate(end, ratio, out) {}
|
|
349
444
|
}
|
|
350
445
|
|
|
351
|
-
exports.MoveRotateOut = MoveRotateOut;
|
|
446
|
+
exports.MoveRotateOut = MoveRotateOut;
|
|
447
|
+
|
|
448
|
+
class PulseAnimate extends custom_animate_1.ACustomAnimate {
|
|
449
|
+
constructor(from, to, duration, easing, params) {
|
|
450
|
+
super(from, to, duration, easing, params), this.originalAttributes = {}, this.pulseCount = 3,
|
|
451
|
+
this.pulseOpacity = .3, this.pulseScale = 1.05, this.pulseColor = null, this.pulseColorIntensity = .2,
|
|
452
|
+
this.strokeOnly = !1, this.fillOnly = !1, this.useScale = !0, this.useOpacity = !0,
|
|
453
|
+
this.useStroke = !0, this.useFill = !0, this.useColor = !1, this.originalFill = null,
|
|
454
|
+
this.originalStroke = null, void 0 !== (null == params ? void 0 : params.pulseCount) && (this.pulseCount = params.pulseCount),
|
|
455
|
+
void 0 !== (null == params ? void 0 : params.pulseScale) && (this.pulseScale = params.pulseScale),
|
|
456
|
+
void 0 !== (null == params ? void 0 : params.pulseColor) && (this.pulseColor = params.pulseColor),
|
|
457
|
+
void 0 !== (null == params ? void 0 : params.pulseColorIntensity) && (this.pulseColorIntensity = params.pulseColorIntensity),
|
|
458
|
+
void 0 !== (null == params ? void 0 : params.strokeOnly) && (this.strokeOnly = params.strokeOnly),
|
|
459
|
+
void 0 !== (null == params ? void 0 : params.fillOnly) && (this.fillOnly = params.fillOnly),
|
|
460
|
+
void 0 !== (null == params ? void 0 : params.useScale) && (this.useScale = params.useScale),
|
|
461
|
+
void 0 !== (null == params ? void 0 : params.useOpacity) && (this.useOpacity = params.useOpacity),
|
|
462
|
+
void 0 !== (null == params ? void 0 : params.useStroke) && (this.useStroke = params.useStroke),
|
|
463
|
+
void 0 !== (null == params ? void 0 : params.useFill) && (this.useFill = params.useFill),
|
|
464
|
+
void 0 !== (null == params ? void 0 : params.useColor) && (this.useColor = params.useColor);
|
|
465
|
+
}
|
|
466
|
+
onBind() {
|
|
467
|
+
super.onBind(), this.originalAttributes = Object.assign({}, this.target.getAttributes()),
|
|
468
|
+
this.useColor && (this.originalFill = this.originalAttributes.fill || null, this.originalStroke = this.originalAttributes.stroke || null,
|
|
469
|
+
this.pulseColor || (this.fillOnly && this.originalFill ? this.pulseColor = this.originalFill : this.strokeOnly && this.originalStroke ? this.pulseColor = this.originalStroke : this.originalFill ? this.pulseColor = this.originalFill : this.originalStroke ? this.pulseColor = this.originalStroke : this.pulseColor = "#FFFFFF"));
|
|
470
|
+
}
|
|
471
|
+
onUpdate(end, ratio, out) {
|
|
472
|
+
const angle = ratio * Math.PI * this.pulseCount, pulseValue = Math.abs(Math.sin(angle)), attribute = this.target.attribute;
|
|
473
|
+
if (this.useOpacity) {
|
|
474
|
+
const opacity = 1 + (this.pulseOpacity - 1) * pulseValue;
|
|
475
|
+
this.useStroke && (attribute.strokeOpacity = (this.originalAttributes.strokeOpacity || 1) * opacity),
|
|
476
|
+
this.useFill && (attribute.fillOpacity = (this.originalAttributes.fillOpacity || 1) * opacity);
|
|
477
|
+
}
|
|
478
|
+
if (this.useScale) {
|
|
479
|
+
const scale = 1 + (this.pulseScale - 1) * pulseValue;
|
|
480
|
+
attribute.scaleX = (this.originalAttributes.scaleX || 1) * scale, attribute.scaleY = (this.originalAttributes.scaleY || 1) * scale;
|
|
481
|
+
}
|
|
482
|
+
this.useColor && this.pulseColor && this.applyColorPulse(attribute, pulseValue),
|
|
483
|
+
this.target.addUpdateShapeAndBoundsTag(), this.target.addUpdatePositionTag();
|
|
484
|
+
}
|
|
485
|
+
applyColorPulse(attribute, pulseValue) {
|
|
486
|
+
const colorRatio = this.pulseColorIntensity * pulseValue;
|
|
487
|
+
this.useFill && this.originalFill && this.pulseColor && (attribute.fill = (0, vrender_core_1.interpolateColor)(this.originalFill, this.pulseColor, colorRatio, !0)),
|
|
488
|
+
this.useStroke && this.originalStroke && this.pulseColor && (attribute.stroke = (0,
|
|
489
|
+
vrender_core_1.interpolateColor)(this.originalStroke, this.pulseColor, colorRatio, !0));
|
|
490
|
+
}
|
|
491
|
+
onEnd() {
|
|
492
|
+
super.onEnd(), this.target.setAttributes(this.originalAttributes);
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
exports.PulseAnimate = PulseAnimate;
|
|
497
|
+
//# sourceMappingURL=story.js.map
|