@visactor/vrender-animate 1.0.0-alpha.4 → 1.0.0-alpha.6
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.js +2 -1
- 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 +6 -0
- package/cjs/custom/clip.js.map +1 -1
- package/cjs/custom/fade.js +6 -3
- package/cjs/custom/fade.js.map +1 -1
- package/cjs/custom/fromTo.js +2 -1
- package/cjs/custom/groupFade.js +1 -2
- package/cjs/custom/growHeight.js +4 -4
- package/cjs/custom/growHeight.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/move.d.ts +4 -0
- package/cjs/custom/move.js +8 -7
- package/cjs/custom/move.js.map +1 -1
- package/cjs/custom/register.d.ts +2 -2
- package/cjs/custom/register.js +19 -1
- 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 +18 -9
- package/cjs/custom/richtext/input-richtext.js.map +1 -1
- package/cjs/custom/richtext/slide-richtext.js +1 -1
- package/cjs/custom/scale.js +3 -2
- package/cjs/custom/scale.js.map +1 -1
- package/cjs/custom/story.d.ts +68 -0
- package/cjs/custom/story.js +147 -2
- package/cjs/custom/story.js.map +1 -1
- package/cjs/executor/animate-executor.js +19 -18
- package/cjs/executor/animate-executor.js.map +1 -1
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +30 -1
- package/cjs/index.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 +2 -1
- package/cjs/ticker/manual-ticker.js +6 -4
- package/cjs/ticker/manual-ticker.js.map +1 -1
- package/cjs/timeline.d.ts +11 -3
- package/cjs/timeline.js +28 -15
- package/cjs/timeline.js.map +1 -1
- package/cjs/utils/easing-func.js +2 -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 +888 -85
- package/es/animate.js +2 -1
- 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 +6 -0
- package/es/custom/clip.js.map +1 -1
- package/es/custom/fade.js +6 -3
- package/es/custom/fade.js.map +1 -1
- package/es/custom/fromTo.js +2 -1
- package/es/custom/groupFade.js +1 -2
- package/es/custom/growHeight.js +4 -4
- package/es/custom/growHeight.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/move.d.ts +4 -0
- package/es/custom/move.js +7 -6
- package/es/custom/move.js.map +1 -1
- package/es/custom/register.d.ts +2 -2
- package/es/custom/register.js +7 -6
- 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 +18 -9
- package/es/custom/richtext/input-richtext.js.map +1 -1
- package/es/custom/richtext/slide-richtext.js +1 -1
- package/es/custom/scale.js +3 -2
- package/es/custom/scale.js.map +1 -1
- package/es/custom/story.d.ts +68 -0
- package/es/custom/story.js +140 -0
- package/es/custom/story.js.map +1 -1
- package/es/executor/animate-executor.js +20 -18
- package/es/executor/animate-executor.js.map +1 -1
- package/es/index.d.ts +1 -0
- package/es/index.js +2 -0
- package/es/index.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 +2 -1
- package/es/ticker/manual-ticker.js +6 -4
- package/es/ticker/manual-ticker.js.map +1 -1
- package/es/timeline.d.ts +11 -3
- package/es/timeline.js +28 -15
- package/es/timeline.js.map +1 -1
- package/es/utils/easing-func.js +2 -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 +4 -4
|
@@ -6,14 +6,14 @@ export class InputRichText extends ACustomAnimate {
|
|
|
6
6
|
constructor(from, to, duration, easing, params) {
|
|
7
7
|
super(from, to, duration, easing, params), this.fromTextConfig = [], this.toTextConfig = [],
|
|
8
8
|
this.originalTextConfig = [], this.showCursor = !1, this.cursorChar = "|", this.blinkCursor = !0,
|
|
9
|
-
this.
|
|
9
|
+
this.fadeInChars = !1, this.fadeInDuration = .3, this.strokeFirst = !1, this.strokeToFillRatio = .3,
|
|
10
10
|
void 0 !== (null == params ? void 0 : params.showCursor) && (this.showCursor = params.showCursor),
|
|
11
11
|
void 0 !== (null == params ? void 0 : params.cursorChar) && (this.cursorChar = params.cursorChar),
|
|
12
12
|
void 0 !== (null == params ? void 0 : params.blinkCursor) && (this.blinkCursor = params.blinkCursor),
|
|
13
|
-
void 0 !== (null == params ? void 0 : params.beforeText) && (this.beforeText = params.beforeText),
|
|
14
|
-
void 0 !== (null == params ? void 0 : params.afterText) && (this.afterText = params.afterText),
|
|
15
13
|
void 0 !== (null == params ? void 0 : params.fadeInChars) && (this.fadeInChars = params.fadeInChars),
|
|
16
|
-
void 0 !== (null == params ? void 0 : params.fadeInDuration) && (this.fadeInDuration = params.fadeInDuration)
|
|
14
|
+
void 0 !== (null == params ? void 0 : params.fadeInDuration) && (this.fadeInDuration = params.fadeInDuration),
|
|
15
|
+
void 0 !== (null == params ? void 0 : params.strokeFirst) && (this.strokeFirst = params.strokeFirst),
|
|
16
|
+
void 0 !== (null == params ? void 0 : params.strokeToFillRatio) && (this.strokeToFillRatio = params.strokeToFillRatio);
|
|
17
17
|
}
|
|
18
18
|
onFirstRun() {
|
|
19
19
|
const fromProps = this.getLastProps(), toProps = this.getEndProps();
|
|
@@ -33,11 +33,20 @@ export class InputRichText extends ACustomAnimate {
|
|
|
33
33
|
currentLength = Math.round(fromItems + (totalItems - fromItems) * adjustedRatio);
|
|
34
34
|
} else currentLength = Math.round(fromItems + (totalItems - fromItems) * ratio);
|
|
35
35
|
if (currentTextConfig = fromItems > totalItems ? this.fromTextConfig.slice(0, currentLength) : this.toTextConfig.slice(0, currentLength).map(((item, index) => {
|
|
36
|
-
if (
|
|
37
|
-
const
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
36
|
+
if ("text" in item) {
|
|
37
|
+
const newItem = Object.assign({}, item);
|
|
38
|
+
if (this.strokeFirst) {
|
|
39
|
+
const appearTime = index / totalItems * maxTextShowRatio, itemLifetime = Math.max(0, ratio - appearTime), maxLifetime = 1 - appearTime, fillProgress = Math.min(1, itemLifetime / (this.strokeToFillRatio * maxLifetime));
|
|
40
|
+
if ("fill" in newItem && newItem.fill && (newItem.stroke = newItem.fill, fillProgress < 1 && (newItem.fillOpacity = fillProgress)),
|
|
41
|
+
this.fadeInChars) {
|
|
42
|
+
const fadeProgress = Math.min(1, itemLifetime / (this.fadeInDuration * maxLifetime));
|
|
43
|
+
newItem.opacity = Math.max(0, Math.min(1, fadeProgress));
|
|
44
|
+
}
|
|
45
|
+
} else if (this.fadeInChars) {
|
|
46
|
+
const fadeProgress = (ratio - index / totalItems * maxTextShowRatio) / this.fadeInDuration;
|
|
47
|
+
newItem.opacity = Math.max(0, Math.min(1, fadeProgress));
|
|
48
|
+
}
|
|
49
|
+
return newItem;
|
|
41
50
|
}
|
|
42
51
|
return item;
|
|
43
52
|
})), this.showCursor && currentLength < totalItems) {
|
|
@@ -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/es/custom/scale.js
CHANGED
|
@@ -57,7 +57,8 @@ export class ScaleIn extends ACustomAnimate {
|
|
|
57
57
|
-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;
|
|
58
58
|
}
|
|
59
59
|
onUpdate(end, ratio, out) {
|
|
60
|
-
this._updateFunction && (this._updateFunction(ratio), this.target.addUpdatePositionTag()
|
|
60
|
+
this._updateFunction && (this._updateFunction(ratio), this.target.addUpdatePositionTag(),
|
|
61
|
+
this.target.addUpdateBoundTag());
|
|
61
62
|
}
|
|
62
63
|
}
|
|
63
64
|
|
|
@@ -105,6 +106,6 @@ export class ScaleOut extends ACustomAnimate {
|
|
|
105
106
|
const attribute = this.target.attribute;
|
|
106
107
|
this.propKeys.forEach((key => {
|
|
107
108
|
attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
|
|
108
|
-
})), this.target.addUpdatePositionTag();
|
|
109
|
+
})), this.target.addUpdatePositionTag(), this.target.addUpdateBoundTag();
|
|
109
110
|
}
|
|
110
111
|
}
|
package/es/custom/scale.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/custom/scale.ts"],"names":[],"mappings":"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
|
|
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 Object.assign(this.target.attribute, 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/es/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/es/custom/story.js
CHANGED
|
@@ -4,6 +4,8 @@ import { ACustomAnimate } from "./custom-animate";
|
|
|
4
4
|
|
|
5
5
|
import { AnimateExecutor } from "../executor/animate-executor";
|
|
6
6
|
|
|
7
|
+
import { interpolateColor } from "@visactor/vrender-core";
|
|
8
|
+
|
|
7
9
|
export class StoryFadeIn extends FadeIn {}
|
|
8
10
|
|
|
9
11
|
export class SlideIn extends ACustomAnimate {
|
|
@@ -94,6 +96,97 @@ export class SpinIn extends ACustomAnimate {
|
|
|
94
96
|
}
|
|
95
97
|
}
|
|
96
98
|
|
|
99
|
+
export class StrokeIn extends ACustomAnimate {
|
|
100
|
+
constructor(from, to, duration, easing, params) {
|
|
101
|
+
super(from, to, duration, easing, params), this.perimeter = 0, this.originalAttributes = {};
|
|
102
|
+
}
|
|
103
|
+
onBind() {
|
|
104
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
105
|
+
if (super.onBind(), this.originalAttributes = Object.assign({}, this.target.getAttributes()),
|
|
106
|
+
"rect" === this.target.type) {
|
|
107
|
+
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;
|
|
108
|
+
this.perimeter = 2 * (width + height);
|
|
109
|
+
} else if ("circle" === this.target.type) {
|
|
110
|
+
const radius = null !== (_c = this.target.attribute.radius) && void 0 !== _c ? _c : 50;
|
|
111
|
+
this.perimeter = 2 * Math.PI * radius;
|
|
112
|
+
} else if ("ellipse" === this.target.type) {
|
|
113
|
+
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;
|
|
114
|
+
this.perimeter = 2 * Math.PI * Math.sqrt((radiusX * radiusX + radiusY * radiusY) / 2);
|
|
115
|
+
} else this.perimeter = 1e3;
|
|
116
|
+
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;
|
|
117
|
+
this.from = {
|
|
118
|
+
lineDash: [ dashLength, dashLength ],
|
|
119
|
+
lineDashOffset: dashLength,
|
|
120
|
+
lineWidth: lineWidth,
|
|
121
|
+
stroke: strokeColor,
|
|
122
|
+
strokeOpacity: fromOpacity
|
|
123
|
+
}, this.to = {
|
|
124
|
+
lineDash: [ dashLength, dashLength ],
|
|
125
|
+
lineDashOffset: 0,
|
|
126
|
+
lineWidth: lineWidth,
|
|
127
|
+
stroke: strokeColor,
|
|
128
|
+
strokeOpacity: fromOpacity
|
|
129
|
+
}, showFill ? (this.from.fillOpacity = fillOpacity, this.to.fillOpacity = null !== (_t = this.originalAttributes.fillOpacity) && void 0 !== _t ? _t : 1) : (this.from.fillOpacity = 0,
|
|
130
|
+
this.to.fillOpacity = 0), this.propKeys = [ "lineDash", "lineDashOffset", "lineWidth", "stroke", "strokeOpacity", "fillOpacity" ],
|
|
131
|
+
this.props = this.to, this.target.setAttributes(this.from);
|
|
132
|
+
}
|
|
133
|
+
onUpdate(end, ratio, out) {
|
|
134
|
+
var _a;
|
|
135
|
+
const attribute = this.target.attribute;
|
|
136
|
+
attribute.lineDashOffset = this.from.lineDashOffset + (this.to.lineDashOffset - this.from.lineDashOffset) * ratio,
|
|
137
|
+
(null === (_a = this.params) || void 0 === _a ? void 0 : _a.showFill) && (attribute.fillOpacity = this.from.fillOpacity + (this.to.fillOpacity - this.from.fillOpacity) * ratio);
|
|
138
|
+
}
|
|
139
|
+
onEnd() {
|
|
140
|
+
var _a;
|
|
141
|
+
if (super.onEnd(), !(null === (_a = this.params) || void 0 === _a ? void 0 : _a.showFill)) {
|
|
142
|
+
const originalAttrs = Object.assign({}, this.originalAttributes);
|
|
143
|
+
originalAttrs.fillOpacity = 0, this.target.setAttributes(originalAttrs);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
export class StrokeOut extends ACustomAnimate {
|
|
149
|
+
constructor(from, to, duration, easing, params) {
|
|
150
|
+
super(from, to, duration, easing, params), this.perimeter = 0, this.originalAttributes = {};
|
|
151
|
+
}
|
|
152
|
+
onFirstRun() {
|
|
153
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
154
|
+
if (this.originalAttributes = Object.assign({}, this.target.getAttributes()), "rect" === this.target.type) {
|
|
155
|
+
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;
|
|
156
|
+
this.perimeter = 2 * (width + height);
|
|
157
|
+
} else if ("circle" === this.target.type) {
|
|
158
|
+
const radius = null !== (_c = this.target.attribute.radius) && void 0 !== _c ? _c : 50;
|
|
159
|
+
this.perimeter = 2 * Math.PI * radius;
|
|
160
|
+
} else if ("ellipse" === this.target.type) {
|
|
161
|
+
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;
|
|
162
|
+
this.perimeter = 2 * Math.PI * Math.sqrt((radiusX * radiusX + radiusY * radiusY) / 2);
|
|
163
|
+
} else this.perimeter = 1e3;
|
|
164
|
+
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;
|
|
165
|
+
this.from = {
|
|
166
|
+
lineDash: [ dashLength, dashLength ],
|
|
167
|
+
lineDashOffset: 0,
|
|
168
|
+
lineWidth: lineWidth,
|
|
169
|
+
stroke: strokeColor,
|
|
170
|
+
strokeOpacity: fromOpacity
|
|
171
|
+
}, this.to = {
|
|
172
|
+
lineDash: [ dashLength, dashLength ],
|
|
173
|
+
lineDashOffset: -dashLength,
|
|
174
|
+
lineWidth: lineWidth,
|
|
175
|
+
stroke: strokeColor,
|
|
176
|
+
strokeOpacity: fromOpacity
|
|
177
|
+
}, showFill ? (this.from.fillOpacity = null !== (_r = this.originalAttributes.fillOpacity) && void 0 !== _r ? _r : 1,
|
|
178
|
+
this.to.fillOpacity = 0) : (this.from.fillOpacity = 0, this.to.fillOpacity = 0),
|
|
179
|
+
this.propKeys = [ "lineDash", "lineDashOffset", "lineWidth", "stroke", "strokeOpacity", "fillOpacity" ],
|
|
180
|
+
this.props = this.to, this.target.setAttributes(this.from);
|
|
181
|
+
}
|
|
182
|
+
onUpdate(end, ratio, out) {
|
|
183
|
+
var _a;
|
|
184
|
+
const attribute = this.target.attribute;
|
|
185
|
+
attribute.lineDashOffset = this.from.lineDashOffset + (this.to.lineDashOffset - this.from.lineDashOffset) * ratio,
|
|
186
|
+
(null === (_a = this.params) || void 0 === _a ? void 0 : _a.showFill) && (attribute.fillOpacity = this.from.fillOpacity + (this.to.fillOpacity - this.from.fillOpacity) * ratio);
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
97
190
|
export class MoveScaleIn extends ACustomAnimate {
|
|
98
191
|
constructor(from, to, duration, easing, params) {
|
|
99
192
|
var _a;
|
|
@@ -325,4 +418,51 @@ export class MoveRotateOut extends ACustomAnimate {
|
|
|
325
418
|
}
|
|
326
419
|
onUpdate(end, ratio, out) {}
|
|
327
420
|
}
|
|
421
|
+
|
|
422
|
+
export class PulseAnimate extends ACustomAnimate {
|
|
423
|
+
constructor(from, to, duration, easing, params) {
|
|
424
|
+
super(from, to, duration, easing, params), this.originalAttributes = {}, this.pulseCount = 3,
|
|
425
|
+
this.pulseOpacity = .3, this.pulseScale = 1.05, this.pulseColor = null, this.pulseColorIntensity = .2,
|
|
426
|
+
this.strokeOnly = !1, this.fillOnly = !1, this.useScale = !0, this.useOpacity = !0,
|
|
427
|
+
this.useStroke = !0, this.useFill = !0, this.useColor = !1, this.originalFill = null,
|
|
428
|
+
this.originalStroke = null, void 0 !== (null == params ? void 0 : params.pulseCount) && (this.pulseCount = params.pulseCount),
|
|
429
|
+
void 0 !== (null == params ? void 0 : params.pulseScale) && (this.pulseScale = params.pulseScale),
|
|
430
|
+
void 0 !== (null == params ? void 0 : params.pulseColor) && (this.pulseColor = params.pulseColor),
|
|
431
|
+
void 0 !== (null == params ? void 0 : params.pulseColorIntensity) && (this.pulseColorIntensity = params.pulseColorIntensity),
|
|
432
|
+
void 0 !== (null == params ? void 0 : params.strokeOnly) && (this.strokeOnly = params.strokeOnly),
|
|
433
|
+
void 0 !== (null == params ? void 0 : params.fillOnly) && (this.fillOnly = params.fillOnly),
|
|
434
|
+
void 0 !== (null == params ? void 0 : params.useScale) && (this.useScale = params.useScale),
|
|
435
|
+
void 0 !== (null == params ? void 0 : params.useOpacity) && (this.useOpacity = params.useOpacity),
|
|
436
|
+
void 0 !== (null == params ? void 0 : params.useStroke) && (this.useStroke = params.useStroke),
|
|
437
|
+
void 0 !== (null == params ? void 0 : params.useFill) && (this.useFill = params.useFill),
|
|
438
|
+
void 0 !== (null == params ? void 0 : params.useColor) && (this.useColor = params.useColor);
|
|
439
|
+
}
|
|
440
|
+
onBind() {
|
|
441
|
+
super.onBind(), this.originalAttributes = Object.assign({}, this.target.getAttributes()),
|
|
442
|
+
this.useColor && (this.originalFill = this.originalAttributes.fill || null, this.originalStroke = this.originalAttributes.stroke || null,
|
|
443
|
+
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"));
|
|
444
|
+
}
|
|
445
|
+
onUpdate(end, ratio, out) {
|
|
446
|
+
const angle = ratio * Math.PI * this.pulseCount, pulseValue = Math.abs(Math.sin(angle)), attribute = this.target.attribute;
|
|
447
|
+
if (this.useOpacity) {
|
|
448
|
+
const opacity = 1 + (this.pulseOpacity - 1) * pulseValue;
|
|
449
|
+
this.useStroke && (attribute.strokeOpacity = (this.originalAttributes.strokeOpacity || 1) * opacity),
|
|
450
|
+
this.useFill && (attribute.fillOpacity = (this.originalAttributes.fillOpacity || 1) * opacity);
|
|
451
|
+
}
|
|
452
|
+
if (this.useScale) {
|
|
453
|
+
const scale = 1 + (this.pulseScale - 1) * pulseValue;
|
|
454
|
+
attribute.scaleX = (this.originalAttributes.scaleX || 1) * scale, attribute.scaleY = (this.originalAttributes.scaleY || 1) * scale;
|
|
455
|
+
}
|
|
456
|
+
this.useColor && this.pulseColor && this.applyColorPulse(attribute, pulseValue),
|
|
457
|
+
this.target.addUpdateShapeAndBoundsTag(), this.target.addUpdatePositionTag();
|
|
458
|
+
}
|
|
459
|
+
applyColorPulse(attribute, pulseValue) {
|
|
460
|
+
const colorRatio = this.pulseColorIntensity * pulseValue;
|
|
461
|
+
this.useFill && this.originalFill && this.pulseColor && (attribute.fill = interpolateColor(this.originalFill, this.pulseColor, colorRatio, !0)),
|
|
462
|
+
this.useStroke && this.originalStroke && this.pulseColor && (attribute.stroke = interpolateColor(this.originalStroke, this.pulseColor, colorRatio, !0));
|
|
463
|
+
}
|
|
464
|
+
onEnd() {
|
|
465
|
+
super.onEnd(), this.target.setAttributes(this.originalAttributes);
|
|
466
|
+
}
|
|
467
|
+
}
|
|
328
468
|
//# sourceMappingURL=story.js.map
|