@visactor/vrender-animate 0.23.0-alpha.3 → 1.0.0-alpha.1

package/cjs/custom/richtext/input-richtext.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.InputRichText = void 0;
+
+const custom_animate_1 = require("../custom-animate"), vrender_core_1 = require("@visactor/vrender-core");
+
+class InputRichText extends custom_animate_1.ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params), this.fromTextConfig = [], this.toTextConfig = [], 
+        this.originalTextConfig = [], this.showCursor = !1, this.cursorChar = "|", this.blinkCursor = !0, 
+        this.beforeText = "", this.afterText = "", this.fadeInChars = !1, this.fadeInDuration = .3, 
+        void 0 !== (null == params ? void 0 : params.showCursor) && (this.showCursor = params.showCursor), 
+        void 0 !== (null == params ? void 0 : params.cursorChar) && (this.cursorChar = params.cursorChar), 
+        void 0 !== (null == params ? void 0 : params.blinkCursor) && (this.blinkCursor = params.blinkCursor), 
+        void 0 !== (null == params ? void 0 : params.beforeText) && (this.beforeText = params.beforeText), 
+        void 0 !== (null == params ? void 0 : params.afterText) && (this.afterText = params.afterText), 
+        void 0 !== (null == params ? void 0 : params.fadeInChars) && (this.fadeInChars = params.fadeInChars), 
+        void 0 !== (null == params ? void 0 : params.fadeInDuration) && (this.fadeInDuration = params.fadeInDuration);
+    }
+    onFirstRun() {
+        const fromProps = this.getLastProps(), toProps = this.getEndProps();
+        this.originalTextConfig = toProps.textConfig ? [ ...toProps.textConfig ] : [], this.valid = !0, 
+        this.originalTextConfig && 0 !== this.originalTextConfig.length ? (this.fromTextConfig = fromProps.textConfig && fromProps.textConfig.length > 0 ? vrender_core_1.RichText.TransformTextConfig2SingleCharacter(fromProps.textConfig) : [], 
+        this.toTextConfig = vrender_core_1.RichText.TransformTextConfig2SingleCharacter(this.originalTextConfig)) : this.valid = !1;
+    }
+    onEnd(cb) {
+        super.onEnd(cb), cb || this.target.setAttribute("textConfig", this.originalTextConfig);
+    }
+    onUpdate(end, ratio, out) {
+        if (!this.valid) return;
+        const totalItems = this.toTextConfig.length, fromItems = this.fromTextConfig.length, maxTextShowRatio = this.fadeInChars ? 1 - this.fadeInDuration : 1;
+        let currentLength, currentTextConfig;
+        if (fromItems > totalItems) currentLength = Math.round(fromItems - (fromItems - totalItems) * ratio); else if (this.fadeInChars) {
+            const adjustedRatio = Math.min(1, ratio / maxTextShowRatio);
+            currentLength = Math.round(fromItems + (totalItems - fromItems) * adjustedRatio);
+        } else currentLength = Math.round(fromItems + (totalItems - fromItems) * ratio);
+        if (currentTextConfig = fromItems > totalItems ? this.fromTextConfig.slice(0, currentLength) : this.toTextConfig.slice(0, currentLength).map(((item, index) => {
+            if (this.fadeInChars && "text" in item) {
+                const fadeProgress = (ratio - index / totalItems * maxTextShowRatio) / this.fadeInDuration, opacity = Math.max(0, Math.min(1, fadeProgress));
+                return Object.assign(Object.assign({}, item), {
+                    opacity: opacity
+                });
+            }
+            return item;
+        })), this.showCursor && currentLength < totalItems) {
+            let shouldShowCursor = !0;
+            if (this.blinkCursor) {
+                const blinkRate = .1;
+                shouldShowCursor = Math.floor(ratio / blinkRate) % 2 == 0;
+            }
+            if (shouldShowCursor && currentTextConfig.length > 0) {
+                const lastIndex = currentTextConfig.length - 1, lastItem = currentTextConfig[lastIndex];
+                if ("text" in lastItem) currentTextConfig[lastIndex] = Object.assign(Object.assign({}, lastItem), {
+                    text: String(lastItem.text) + this.cursorChar
+                }); else {
+                    const cursorItem = {
+                        text: this.cursorChar,
+                        fontSize: 16
+                    };
+                    currentTextConfig.push(cursorItem);
+                }
+            }
+        }
+        this.target.setAttribute("textConfig", currentTextConfig);
+    }
+}
+
+exports.InputRichText = InputRichText;

package/cjs/custom/richtext/input-richtext.js.map

@@ -0,0 +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"]}

package/cjs/custom/richtext/output-richtext.d.ts

@@ -0,0 +1,37 @@
+import { ACustomAnimate } from '../custom-animate';
+import type { IRichTextCharacter, IAnimate, IStep, EasingType } from '@visactor/vrender-core';
+export declare class OutputRichText extends ACustomAnimate<{
+    textConfig: IRichTextCharacter[];
+}> {
+    valid: boolean;
+    private fromTextConfig;
+    private toTextConfig;
+    private originalTextConfig;
+    private showCursor;
+    private cursorChar;
+    private blinkCursor;
+    private beforeText;
+    private afterText;
+    private fadeOutChars;
+    private fadeOutDuration;
+    private direction;
+    constructor(from: {
+        textConfig: IRichTextCharacter[];
+    }, to: {
+        textConfig: IRichTextCharacter[];
+    }, duration: number, easing: EasingType, params?: {
+        showCursor?: boolean;
+        cursorChar?: string;
+        blinkCursor?: boolean;
+        beforeText?: string;
+        afterText?: string;
+        fadeOutChars?: boolean;
+        fadeOutDuration?: number;
+        direction?: 'forward' | 'backward';
+    });
+    onFirstRun(): void;
+    onEnd(cb?: (animate: IAnimate, step: IStep) => void): void;
+    onUpdate(end: boolean, ratio: number, out: Record<string, any>): void;
+    private applyFadeEffect;
+    private addCursor;
+}

package/cjs/custom/richtext/output-richtext.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.OutputRichText = void 0;
+
+const custom_animate_1 = require("../custom-animate"), vrender_core_1 = require("@visactor/vrender-core");
+
+class OutputRichText extends custom_animate_1.ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params), this.fromTextConfig = [], this.toTextConfig = [], 
+        this.originalTextConfig = [], this.showCursor = !1, this.cursorChar = "|", this.blinkCursor = !0, 
+        this.beforeText = "", this.afterText = "", this.fadeOutChars = !1, this.fadeOutDuration = .3, 
+        this.direction = "backward", void 0 !== (null == params ? void 0 : params.showCursor) && (this.showCursor = params.showCursor), 
+        void 0 !== (null == params ? void 0 : params.cursorChar) && (this.cursorChar = params.cursorChar), 
+        void 0 !== (null == params ? void 0 : params.blinkCursor) && (this.blinkCursor = params.blinkCursor), 
+        void 0 !== (null == params ? void 0 : params.beforeText) && (this.beforeText = params.beforeText), 
+        void 0 !== (null == params ? void 0 : params.afterText) && (this.afterText = params.afterText), 
+        void 0 !== (null == params ? void 0 : params.fadeOutChars) && (this.fadeOutChars = params.fadeOutChars), 
+        void 0 !== (null == params ? void 0 : params.fadeOutDuration) && (this.fadeOutDuration = params.fadeOutDuration), 
+        void 0 !== (null == params ? void 0 : params.direction) && (this.direction = params.direction), 
+        this.propKeys = [ "textConfig" ];
+    }
+    onFirstRun() {
+        const fromProps = this.getLastProps(), toProps = this.getEndProps();
+        this.originalTextConfig = fromProps.textConfig ? [ ...fromProps.textConfig ] : [], 
+        this.valid = !0, this.originalTextConfig && 0 !== this.originalTextConfig.length ? (this.fromTextConfig = vrender_core_1.RichText.TransformTextConfig2SingleCharacter(this.originalTextConfig), 
+        this.toTextConfig = toProps.textConfig && toProps.textConfig.length > 0 ? vrender_core_1.RichText.TransformTextConfig2SingleCharacter(toProps.textConfig) : []) : this.valid = !1;
+    }
+    onEnd(cb) {
+        super.onEnd(cb), cb || (this.toTextConfig.length > 0 ? this.target.setAttribute("textConfig", this.toTextConfig) : this.target.setAttribute("textConfig", []));
+    }
+    onUpdate(end, ratio, out) {
+        if (!this.valid) return;
+        const fromItems = this.fromTextConfig.length, maxTextHideRatio = this.fadeOutChars ? 1 - this.fadeOutDuration : 1;
+        let displayedLength;
+        if ("forward" === this.direction) {
+            if (this.fadeOutChars) {
+                const adjustedRatio = Math.min(1, ratio / maxTextHideRatio);
+                displayedLength = Math.round(fromItems * (1 - adjustedRatio));
+            } else displayedLength = Math.round(fromItems * (1 - ratio));
+            let currentTextConfig = "forward" === this.direction ? this.fromTextConfig.slice(fromItems - displayedLength) : this.fromTextConfig.slice(0, displayedLength);
+            this.fadeOutChars && (currentTextConfig = this.applyFadeEffect(currentTextConfig, ratio, fromItems, displayedLength)), 
+            this.showCursor && displayedLength > 0 && (currentTextConfig = this.addCursor(currentTextConfig, ratio)), 
+            this.target.setAttribute("textConfig", currentTextConfig);
+        } else {
+            if (this.fadeOutChars) {
+                const adjustedRatio = Math.min(1, ratio / maxTextHideRatio);
+                displayedLength = Math.round(fromItems * (1 - adjustedRatio));
+            } else displayedLength = Math.round(fromItems * (1 - ratio));
+            let currentTextConfig = this.fromTextConfig.slice(0, displayedLength);
+            this.fadeOutChars && (currentTextConfig = this.applyFadeEffect(currentTextConfig, ratio, fromItems, displayedLength)), 
+            this.showCursor && displayedLength > 0 && (currentTextConfig = this.addCursor(currentTextConfig, ratio)), 
+            this.target.setAttribute("textConfig", currentTextConfig);
+        }
+    }
+    applyFadeEffect(textConfig, ratio, totalItems, displayedLength) {
+        let fadeIndex;
+        fadeIndex = "forward" === this.direction ? totalItems - displayedLength : displayedLength;
+        const fadeProgress = (ratio - (1 - this.fadeOutDuration)) / this.fadeOutDuration, fadeOpacity = Math.max(0, 1 - Math.min(1, fadeProgress));
+        return textConfig.map(((item, index) => {
+            if ("forward" === this.direction) {
+                if (0 === index && "text" in item) return Object.assign(Object.assign({}, item), {
+                    opacity: fadeOpacity
+                });
+            } else if (index === textConfig.length - 1 && "text" in item) return Object.assign(Object.assign({}, item), {
+                opacity: fadeOpacity
+            });
+            return item;
+        }));
+    }
+    addCursor(textConfig, ratio) {
+        let shouldShowCursor = !0;
+        if (this.blinkCursor) {
+            const blinkRate = .1;
+            shouldShowCursor = Math.floor(ratio / blinkRate) % 2 == 0;
+        }
+        if (shouldShowCursor && textConfig.length > 0) {
+            const cursorIndex = "forward" === this.direction ? 0 : textConfig.length - 1, cursorItem = textConfig[cursorIndex];
+            if ("text" in cursorItem) {
+                const result = [ ...textConfig ];
+                return "forward" === this.direction ? result[cursorIndex] = Object.assign(Object.assign({}, cursorItem), {
+                    text: this.cursorChar + String(cursorItem.text)
+                }) : result[cursorIndex] = Object.assign(Object.assign({}, cursorItem), {
+                    text: String(cursorItem.text) + this.cursorChar
+                }), result;
+            }
+        }
+        return textConfig;
+    }
+}
+
+exports.OutputRichText = OutputRichText;
+//# sourceMappingURL=output-richtext.js.map

package/cjs/custom/richtext/output-richtext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/custom/richtext/output-richtext.ts"],"names":[],"mappings":"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","file":"output-richtext.js","sourcesContent":["import { ACustomAnimate } from '../custom-animate';\nimport type { IRichTextCharacter, IAnimate, IStep, EasingType } from '@visactor/vrender-core';\nimport { RichText } from '@visactor/vrender-core';\n\n/**\n * 富文本退出动画，实现类似打字机的字符逐个消失效果\n * 支持通过beforeText和afterText参数添加前缀和后缀\n * 支持通过showCursor参数显示光标，cursorChar自定义光标字符\n * 支持通过fadeOutChars参数开启字符透明度渐变效果\n * 支持通过direction参数控制消失方向（从头到尾或从尾到头）\n */\nexport class OutputRichText 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 fadeOutChars: boolean = false;\n  private fadeOutDuration: number = 0.3; // 透明度渐变持续时间，以动画总时长的比例表示\n  private direction: 'forward' | 'backward' = 'backward'; // 字符消失方向，默认从尾到头（backward）\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      fadeOutChars?: boolean;\n      fadeOutDuration?: number;\n      direction?: 'forward' | 'backward';\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?.fadeOutChars !== undefined) {\n      this.fadeOutChars = params.fadeOutChars;\n    }\n    if (params?.fadeOutDuration !== undefined) {\n      this.fadeOutDuration = params.fadeOutDuration;\n    }\n\n    // 配置方向\n    if (params?.direction !== undefined) {\n      this.direction = params.direction;\n    }\n\n    this.propKeys = ['textConfig'];\n  }\n\n  onFirstRun(): void {\n    const fromProps = this.getLastProps();\n    const toProps = this.getEndProps();\n\n    // 存储原始配置（这里是起始状态，显示所有文本）\n    this.originalTextConfig = fromProps.textConfig ? [...fromProps.textConfig] : [];\n\n    // 初始化解析结果\n    this.valid = true;\n\n    // 确保from不为空\n    if (!this.originalTextConfig || this.originalTextConfig.length === 0) {\n      this.valid = false;\n      return;\n    }\n\n    // 将文本拆分为单个字符，使用RichText的静态方法\n    this.fromTextConfig = RichText.TransformTextConfig2SingleCharacter(this.originalTextConfig);\n\n    // 目标状态是空文本（或指定的目标）\n    this.toTextConfig =\n      toProps.textConfig && toProps.textConfig.length > 0\n        ? RichText.TransformTextConfig2SingleCharacter(toProps.textConfig)\n        : [];\n  }\n\n  onEnd(cb?: (animate: IAnimate, step: IStep) => void): void {\n    super.onEnd(cb);\n    if (!cb) {\n      // 动画结束时，应用最终textConfig（通常是空的或特定的toTextConfig）\n      if (this.toTextConfig.length > 0) {\n        this.target.setAttribute('textConfig', this.toTextConfig);\n      } else {\n        this.target.setAttribute('textConfig', []);\n      }\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 fromItems = this.fromTextConfig.length;\n\n    // 计算文本显示比例上限 - 如果有渐变效果，需要为尾部字符的渐变留出时间\n    const maxTextHideRatio = this.fadeOutChars ? 1 - this.fadeOutDuration : 1;\n\n    // 根据方向确定字符消失的顺序\n    let displayedLength: number;\n\n    if (this.direction === 'forward') {\n      // 从前往后消失（类似于正向打字效果）\n      if (this.fadeOutChars) {\n        // 当ratio达到maxTextHideRatio时，应该已经隐藏全部文本\n        const adjustedRatio = Math.min(1, ratio / maxTextHideRatio);\n        displayedLength = Math.round(fromItems * (1 - adjustedRatio));\n      } else {\n        // 无渐变效果时，正常隐藏\n        displayedLength = Math.round(fromItems * (1 - ratio));\n      }\n\n      // 构建从头开始删除的文本配置\n      let currentTextConfig =\n        this.direction === 'forward'\n          ? this.fromTextConfig.slice(fromItems - displayedLength) // 从头开始隐藏，保留尾部\n          : this.fromTextConfig.slice(0, displayedLength); // 从尾开始隐藏，保留头部\n\n      // 应用透明度渐变效果\n      if (this.fadeOutChars) {\n        currentTextConfig = this.applyFadeEffect(currentTextConfig, ratio, fromItems, displayedLength);\n      }\n\n      // 如果启用了光标\n      if (this.showCursor && displayedLength > 0) {\n        currentTextConfig = this.addCursor(currentTextConfig, ratio);\n      }\n\n      // 更新富文本的textConfig属性\n      this.target.setAttribute('textConfig', currentTextConfig);\n    } else {\n      // 从后往前消失（类似于退格删除效果）\n      if (this.fadeOutChars) {\n        // 当ratio达到maxTextHideRatio时，应该已经隐藏全部文本\n        const adjustedRatio = Math.min(1, ratio / maxTextHideRatio);\n        displayedLength = Math.round(fromItems * (1 - adjustedRatio));\n      } else {\n        // 无渐变效果时，正常隐藏\n        displayedLength = Math.round(fromItems * (1 - ratio));\n      }\n\n      // 构建从尾开始删除的文本配置\n      let currentTextConfig = this.fromTextConfig.slice(0, displayedLength);\n\n      // 应用透明度渐变效果\n      if (this.fadeOutChars) {\n        currentTextConfig = this.applyFadeEffect(currentTextConfig, ratio, fromItems, displayedLength);\n      }\n\n      // 如果启用了光标\n      if (this.showCursor && displayedLength > 0) {\n        currentTextConfig = this.addCursor(currentTextConfig, ratio);\n      }\n\n      // 更新富文本的textConfig属性\n      this.target.setAttribute('textConfig', currentTextConfig);\n    }\n  }\n\n  // 应用透明度渐变效果\n  private applyFadeEffect(\n    textConfig: IRichTextCharacter[],\n    ratio: number,\n    totalItems: number,\n    displayedLength: number\n  ): IRichTextCharacter[] {\n    // 计算边界字符的索引，这是正在淡出的字符\n    let fadeIndex: number;\n\n    if (this.direction === 'forward') {\n      // 从前往后消失，当前正在淡出的是第displayedLength个字符\n      fadeIndex = totalItems - displayedLength;\n    } else {\n      // 从后往前消失，当前正在淡出的是第displayedLength个字符\n      fadeIndex = displayedLength;\n    }\n\n    // 计算边界字符的透明度\n    const fadeProgress = (ratio - (1 - this.fadeOutDuration)) / this.fadeOutDuration;\n    const fadeOpacity = Math.max(0, 1 - Math.min(1, fadeProgress));\n\n    return textConfig.map((item, index) => {\n      if (this.direction === 'forward') {\n        // 从前往后消失，第一个字符最先淡出\n        if (index === 0 && 'text' in item) {\n          return {\n            ...item,\n            opacity: fadeOpacity\n          };\n        }\n      } else {\n        // 从后往前消失，最后一个字符最先淡出\n        if (index === textConfig.length - 1 && 'text' in item) {\n          return {\n            ...item,\n            opacity: fadeOpacity\n          };\n        }\n      }\n      return item;\n    });\n  }\n\n  // 添加光标\n  private addCursor(textConfig: IRichTextCharacter[], ratio: number): IRichTextCharacter[] {\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 && textConfig.length > 0) {\n      // 确定光标位置（根据direction）\n      const cursorIndex = this.direction === 'forward' ? 0 : textConfig.length - 1;\n      const cursorItem = textConfig[cursorIndex];\n\n      if ('text' in cursorItem) {\n        // 复制数组\n        const result = [...textConfig];\n\n        if (this.direction === 'forward') {\n          // 光标在前面\n          result[cursorIndex] = {\n            ...cursorItem,\n            text: this.cursorChar + String(cursorItem.text)\n          };\n        } else {\n          // 光标在后面\n          result[cursorIndex] = {\n            ...cursorItem,\n            text: String(cursorItem.text) + this.cursorChar\n          };\n        }\n\n        return result;\n      }\n    }\n\n    return textConfig;\n  }\n}\n"]}

package/cjs/custom/richtext/slide-out-richtext.d.ts

@@ -0,0 +1,38 @@
+import { ACustomAnimate } from '../custom-animate';
+import type { IRichTextCharacter, IAnimate, IStep, EasingType } from '@visactor/vrender-core';
+export declare class SlideOutRichText extends ACustomAnimate<{
+    textConfig: IRichTextCharacter[];
+}> {
+    valid: boolean;
+    private fromTextConfig;
+    private toTextConfig;
+    private originalTextConfig;
+    private singleCharConfig;
+    private fadeOutDuration;
+    private slideDirection;
+    private slideDistance;
+    private wordByWord;
+    private wordRegex;
+    private wordGroups;
+    private reverseOrder;
+    constructor(from: {
+        textConfig: IRichTextCharacter[];
+    }, to: {
+        textConfig: IRichTextCharacter[];
+    }, duration: number, easing: EasingType, params?: {
+        fadeOutDuration?: number;
+        slideDirection?: 'up' | 'down' | 'left' | 'right';
+        slideDistance?: number;
+        wordByWord?: boolean;
+        wordRegex?: RegExp;
+        reverseOrder?: boolean;
+    });
+    onFirstRun(): void;
+    private calculateWordGroups;
+    private getTargetDx;
+    private getTargetDy;
+    onEnd(cb?: (animate: IAnimate, step: IStep) => void): void;
+    onUpdate(end: boolean, ratio: number, out: Record<string, any>): void;
+    private updateByWord;
+    private updateByCharacter;
+}

package/cjs/custom/richtext/slide-out-richtext.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.SlideOutRichText = void 0;
+
+const custom_animate_1 = require("../custom-animate"), vrender_core_1 = require("@visactor/vrender-core");
+
+class SlideOutRichText extends custom_animate_1.ACustomAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params), this.fromTextConfig = [], this.toTextConfig = [], 
+        this.originalTextConfig = [], this.singleCharConfig = [], this.fadeOutDuration = .3, 
+        this.slideDirection = "right", this.slideDistance = 30, this.wordByWord = !1, this.wordRegex = /[a-zA-Z]+(-[a-zA-Z]+)*|[\u4e00-\u9fa5]+|[0-9]+|[^\s\w\u4e00-\u9fa5]/g, 
+        this.wordGroups = [], this.reverseOrder = !1, void 0 !== (null == params ? void 0 : params.fadeOutDuration) && (this.fadeOutDuration = params.fadeOutDuration), 
+        void 0 !== (null == params ? void 0 : params.slideDirection) && (this.slideDirection = params.slideDirection), 
+        void 0 !== (null == params ? void 0 : params.slideDistance) && (this.slideDistance = params.slideDistance), 
+        void 0 !== (null == params ? void 0 : params.wordByWord) && (this.wordByWord = params.wordByWord), 
+        void 0 !== (null == params ? void 0 : params.wordRegex) && (this.wordRegex = params.wordRegex), 
+        void 0 !== (null == params ? void 0 : params.reverseOrder) && (this.reverseOrder = params.reverseOrder), 
+        this.propKeys = [ "textConfig" ];
+    }
+    onFirstRun() {
+        const fromProps = this.getLastProps(), toProps = this.getEndProps();
+        this.originalTextConfig = fromProps.textConfig ? [ ...fromProps.textConfig ] : [], 
+        this.valid = !0, this.originalTextConfig && 0 !== this.originalTextConfig.length ? (this.fromTextConfig = vrender_core_1.RichText.TransformTextConfig2SingleCharacter(this.originalTextConfig), 
+        this.toTextConfig = toProps.textConfig && toProps.textConfig.length > 0 ? vrender_core_1.RichText.TransformTextConfig2SingleCharacter(toProps.textConfig) : [], 
+        this.singleCharConfig = this.fromTextConfig.map((item => "text" in item ? Object.assign(Object.assign({}, item), {
+            opacity: 1,
+            dx: 0,
+            dy: 0
+        }) : Object.assign(Object.assign({}, item), {
+            opacity: 1
+        }))), this.wordByWord && this.calculateWordGroups()) : this.valid = !1;
+    }
+    calculateWordGroups() {
+        this.wordGroups = [];
+        let fullText = "";
+        const charMap = {};
+        let match, fullTextIndex = 0;
+        for ((this.fromTextConfig.forEach(((item, configIndex) => {
+            if ("text" in item) {
+                const text = String(item.text);
+                fullText += text, charMap[fullTextIndex] = configIndex, fullTextIndex++;
+            }
+        })), this.wordRegex.lastIndex = 0); null !== (match = this.wordRegex.exec(fullText)); ) {
+            const wordStart = match.index, wordEnd = match.index + match[0].length, wordIndices = [];
+            for (let i = wordStart; i < wordEnd; i++) void 0 !== charMap[i] && wordIndices.push(charMap[i]);
+            wordIndices.length > 0 && this.wordGroups.push(wordIndices);
+        }
+        const allocatedIndices = new Set;
+        this.wordGroups.forEach((group => {
+            group.forEach((index => allocatedIndices.add(index)));
+        }));
+        for (let i = 0; i < this.fromTextConfig.length; i++) "text" in this.fromTextConfig[i] && !allocatedIndices.has(i) && this.wordGroups.push([ i ]);
+    }
+    getTargetDx() {
+        switch (this.slideDirection) {
+          case "left":
+            return -this.slideDistance;
+
+          case "right":
+            return this.slideDistance;
+
+          default:
+            return 0;
+        }
+    }
+    getTargetDy() {
+        switch (this.slideDirection) {
+          case "up":
+            return -this.slideDistance;
+
+          case "down":
+            return this.slideDistance;
+
+          default:
+            return 0;
+        }
+    }
+    onEnd(cb) {
+        super.onEnd(cb), cb || (this.toTextConfig.length > 0 ? this.target.setAttribute("textConfig", this.toTextConfig) : this.target.setAttribute("textConfig", []));
+    }
+    onUpdate(end, ratio, out) {
+        if (!this.valid) return;
+        const maxTextShowRatio = 1 - this.fadeOutDuration;
+        let updatedTextConfig;
+        updatedTextConfig = this.wordByWord && this.wordGroups.length > 0 ? this.updateByWord(ratio, maxTextShowRatio) : this.updateByCharacter(ratio, maxTextShowRatio), 
+        this.target.setAttribute("textConfig", updatedTextConfig);
+    }
+    updateByWord(ratio, maxTextShowRatio) {
+        const totalGroups = this.wordGroups.length, updatedTextConfig = [ ...this.singleCharConfig ];
+        for (let groupIndex = 0; groupIndex < this.wordGroups.length; groupIndex++) {
+            let disappearTime;
+            if (disappearTime = this.reverseOrder ? "left" === this.slideDirection ? groupIndex / totalGroups * maxTextShowRatio : (totalGroups - 1 - groupIndex) / totalGroups * maxTextShowRatio : "left" === this.slideDirection ? (totalGroups - 1 - groupIndex) / totalGroups * maxTextShowRatio : groupIndex / totalGroups * maxTextShowRatio, 
+            ratio < disappearTime) {
+                for (const charIndex of this.wordGroups[groupIndex]) {
+                    const item = updatedTextConfig[charIndex];
+                    "text" in item && (updatedTextConfig[charIndex] = Object.assign(Object.assign({}, item), {
+                        opacity: 1,
+                        dx: 0,
+                        dy: 0
+                    }));
+                }
+                continue;
+            }
+            const animProgress = (ratio - disappearTime) / this.fadeOutDuration, progress = Math.max(0, Math.min(1, animProgress)), dx = this.getTargetDx() * progress, dy = this.getTargetDy() * progress, opacity = 1 - progress;
+            for (const charIndex of this.wordGroups[groupIndex]) {
+                const item = updatedTextConfig[charIndex];
+                "text" in item && (updatedTextConfig[charIndex] = Object.assign(Object.assign({}, item), {
+                    opacity: opacity,
+                    dx: dx,
+                    dy: dy
+                }));
+            }
+        }
+        return updatedTextConfig;
+    }
+    updateByCharacter(ratio, maxTextShowRatio) {
+        const totalItems = this.fromTextConfig.length, updatedTextConfig = [ ...this.singleCharConfig ];
+        for (let index = 0; index < updatedTextConfig.length; index++) {
+            const item = updatedTextConfig[index];
+            if ("text" in item) {
+                let disappearTime;
+                if (disappearTime = this.reverseOrder ? "left" === this.slideDirection ? index / totalItems * maxTextShowRatio : (totalItems - 1 - index) / totalItems * maxTextShowRatio : "left" === this.slideDirection ? (totalItems - 1 - index) / totalItems * maxTextShowRatio : index / totalItems * maxTextShowRatio, 
+                ratio < disappearTime) {
+                    updatedTextConfig[index] = Object.assign(Object.assign({}, item), {
+                        opacity: 1,
+                        dx: 0,
+                        dy: 0
+                    });
+                    continue;
+                }
+                const animProgress = (ratio - disappearTime) / this.fadeOutDuration, progress = Math.max(0, Math.min(1, animProgress)), dx = this.getTargetDx() * progress, dy = this.getTargetDy() * progress, opacity = 1 - progress;
+                updatedTextConfig[index] = Object.assign(Object.assign({}, item), {
+                    opacity: opacity,
+                    dx: dx,
+                    dy: dy
+                });
+            }
+        }
+        return updatedTextConfig;
+    }
+}
+
+exports.SlideOutRichText = SlideOutRichText;
+//# sourceMappingURL=slide-out-richtext.js.map

package/cjs/custom/richtext/slide-out-richtext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/custom/richtext/slide-out-richtext.ts"],"names":[],"mappings":"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","file":"slide-out-richtext.js","sourcesContent":["import { ACustomAnimate } from '../custom-animate';\nimport type { IRichTextCharacter, IAnimate, IStep, EasingType } from '@visactor/vrender-core';\nimport { RichText } from '@visactor/vrender-core';\n\n/**\n * 滑动富文本退出动画，文字会向指定方向滑出，同时逐字消失\n * 支持上、下、左、右四个方向\n * 支持按单词或字符退场\n */\nexport class SlideOutRichText extends ACustomAnimate<{ textConfig: IRichTextCharacter[] }> {\n  declare valid: boolean;\n\n  private fromTextConfig: IRichTextCharacter[] = [];\n  private toTextConfig: IRichTextCharacter[] = [];\n  private originalTextConfig: IRichTextCharacter[] = [];\n  private singleCharConfig: IRichTextCharacter[] = [];\n  private fadeOutDuration: number = 0.3; // 透明度渐变持续时间，以动画总时长的比例表示\n  private slideDirection: 'up' | 'down' | 'left' | 'right' = 'right'; // 滑动方向\n  private slideDistance: number = 30; // 滑动距离（像素）\n  private wordByWord: boolean = false; // 是否按单词为单位进行动画\n  // 默认正则表达式: 匹配英文单词(含中间连字符),连续中文字符,数字,以及独立的符号和空格\n  private wordRegex: RegExp = /[a-zA-Z]+(-[a-zA-Z]+)*|[\\u4e00-\\u9fa5]+|[0-9]+|[^\\s\\w\\u4e00-\\u9fa5]/g;\n  private wordGroups: number[][] = []; // 存储单词分组信息，每个数组包含属于同一单词的字符索引\n  private reverseOrder: boolean = false; // 是否反转字符/单词的消失顺序\n\n  constructor(\n    from: { textConfig: IRichTextCharacter[] },\n    to: { textConfig: IRichTextCharacter[] },\n    duration: number,\n    easing: EasingType,\n    params?: {\n      fadeOutDuration?: number;\n      slideDirection?: 'up' | 'down' | 'left' | 'right';\n      slideDistance?: number;\n      wordByWord?: boolean;\n      wordRegex?: RegExp;\n      reverseOrder?: boolean;\n    }\n  ) {\n    super(from, to, duration, easing, params);\n\n    // 配置透明度渐变效果\n    if (params?.fadeOutDuration !== undefined) {\n      this.fadeOutDuration = params.fadeOutDuration;\n    }\n\n    // 配置滑动方向和距离\n    if (params?.slideDirection !== undefined) {\n      this.slideDirection = params.slideDirection;\n    }\n    if (params?.slideDistance !== undefined) {\n      this.slideDistance = params.slideDistance;\n    }\n\n    // 配置按单词动画\n    if (params?.wordByWord !== undefined) {\n      this.wordByWord = params.wordByWord;\n    }\n    if (params?.wordRegex !== undefined) {\n      this.wordRegex = params.wordRegex;\n    }\n\n    // 配置顺序\n    if (params?.reverseOrder !== undefined) {\n      this.reverseOrder = params.reverseOrder;\n    }\n\n    this.propKeys = ['textConfig'];\n  }\n\n  onFirstRun(): void {\n    const fromProps = this.getLastProps();\n    const toProps = this.getEndProps();\n\n    // 存储原始配置\n    this.originalTextConfig = fromProps.textConfig ? [...fromProps.textConfig] : [];\n\n    // 初始化解析结果\n    this.valid = true;\n\n    // 确保from不为空\n    if (!this.originalTextConfig || this.originalTextConfig.length === 0) {\n      this.valid = false;\n      return;\n    }\n\n    // 将文本拆分为单个字符，使用RichText的静态方法\n    this.fromTextConfig = RichText.TransformTextConfig2SingleCharacter(this.originalTextConfig);\n\n    // 目标状态是空文本（或指定的目标）\n    this.toTextConfig =\n      toProps.textConfig && toProps.textConfig.length > 0\n        ? RichText.TransformTextConfig2SingleCharacter(toProps.textConfig)\n        : [];\n\n    // 创建单字符数组，用于动画初始状态\n    this.singleCharConfig = this.fromTextConfig.map(item => {\n      if ('text' in item) {\n        // 文本字符初始设置为完全可见且无偏移\n        return {\n          ...item,\n          opacity: 1,\n          dx: 0,\n          dy: 0\n        };\n      }\n      return { ...item, opacity: 1 };\n    });\n\n    // 如果启用按单词动画，则计算单词分组\n    if (this.wordByWord) {\n      this.calculateWordGroups();\n    }\n  }\n\n  // 计算单词分组\n  private calculateWordGroups(): void {\n    // 重置单词分组\n    this.wordGroups = [];\n\n    // 构建完整文本用于正则匹配\n    let fullText = '';\n    const charMap: Record<number, number> = {}; // 映射全文索引到字符配置索引\n    let fullTextIndex = 0;\n\n    // 构建全文和映射\n    this.fromTextConfig.forEach((item, configIndex) => {\n      if ('text' in item) {\n        const text = String(item.text);\n        fullText += text;\n        // 为每个字符创建映射\n        charMap[fullTextIndex] = configIndex;\n        fullTextIndex++;\n      }\n    });\n\n    // 使用正则表达式查找单词\n    let match;\n\n    // 重置正则表达式状态\n    this.wordRegex.lastIndex = 0;\n\n    while ((match = this.wordRegex.exec(fullText)) !== null) {\n      const wordStart = match.index;\n      const wordEnd = match.index + match[0].length;\n\n      // 找出属于这个单词的所有字符索引\n      const wordIndices = [];\n\n      for (let i = wordStart; i < wordEnd; i++) {\n        if (charMap[i] !== undefined) {\n          wordIndices.push(charMap[i]);\n        }\n      }\n\n      // 添加到单词分组\n      if (wordIndices.length > 0) {\n        this.wordGroups.push(wordIndices);\n      }\n    }\n\n    // 处理没有分配到任何单词的字符\n    const allocatedIndices = new Set<number>();\n    this.wordGroups.forEach(group => {\n      group.forEach(index => allocatedIndices.add(index));\n    });\n\n    for (let i = 0; i < this.fromTextConfig.length; i++) {\n      if ('text' in this.fromTextConfig[i] && !allocatedIndices.has(i)) {\n        // 单独为每个未分配的字符创建一个\"单词\"\n        this.wordGroups.push([i]);\n      }\n    }\n  }\n\n  // 根据滑动方向计算目标x偏移（最终位置）\n  private getTargetDx(): number {\n    switch (this.slideDirection) {\n      case 'left':\n        return -this.slideDistance;\n      case 'right':\n        return this.slideDistance;\n      default:\n        return 0;\n    }\n  }\n\n  // 根据滑动方向计算目标y偏移（最终位置）\n  private getTargetDy(): number {\n    switch (this.slideDirection) {\n      case 'up':\n        return -this.slideDistance;\n      case 'down':\n        return this.slideDistance;\n      default:\n        return 0;\n    }\n  }\n\n  onEnd(cb?: (animate: IAnimate, step: IStep) => void): void {\n    super.onEnd(cb);\n    if (!cb) {\n      // 动画结束时，应用最终textConfig（通常是空的或特定的toTextConfig）\n      if (this.toTextConfig.length > 0) {\n        this.target.setAttribute('textConfig', this.toTextConfig);\n      } else {\n        this.target.setAttribute('textConfig', []);\n      }\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 maxTextShowRatio = 1 - this.fadeOutDuration;\n\n    let updatedTextConfig: IRichTextCharacter[];\n\n    if (this.wordByWord && this.wordGroups.length > 0) {\n      // 按单词动画\n      updatedTextConfig = this.updateByWord(ratio, maxTextShowRatio);\n    } else {\n      // 按字符动画\n      updatedTextConfig = this.updateByCharacter(ratio, maxTextShowRatio);\n    }\n\n    // 更新富文本的textConfig属性\n    this.target.setAttribute('textConfig', updatedTextConfig);\n  }\n\n  // 按单词更新文本配置\n  private updateByWord(ratio: number, maxTextShowRatio: number): IRichTextCharacter[] {\n    const totalGroups = this.wordGroups.length;\n    const updatedTextConfig = [...this.singleCharConfig];\n\n    // 处理单词分组\n    for (let groupIndex = 0; groupIndex < this.wordGroups.length; groupIndex++) {\n      // 计算这个单词组的消失时间点\n      let disappearTime;\n\n      if (this.reverseOrder) {\n        // 反转顺序 (与入场顺序相反)\n        if (this.slideDirection === 'left') {\n          // 从左到右的顺序 (第一个单词先消失)\n          disappearTime = (groupIndex / totalGroups) * maxTextShowRatio;\n        } else {\n          // 从右到左的顺序 (最后的单词先消失)\n          disappearTime = ((totalGroups - 1 - groupIndex) / totalGroups) * maxTextShowRatio;\n        }\n      } else {\n        // 标准顺序 (与入场顺序相同)\n        if (this.slideDirection === 'left') {\n          // 从右到左的顺序 (最后的单词先消失)\n          disappearTime = ((totalGroups - 1 - groupIndex) / totalGroups) * maxTextShowRatio;\n        } else {\n          // 从左到右的顺序 (第一个单词先消失)\n          disappearTime = (groupIndex / totalGroups) * maxTextShowRatio;\n        }\n      }\n\n      // 如果当前时间还没到显示这个单词的消失时间点，保持可见状态\n      if (ratio < disappearTime) {\n        for (const charIndex of this.wordGroups[groupIndex]) {\n          const item = updatedTextConfig[charIndex];\n          if ('text' in item) {\n            updatedTextConfig[charIndex] = {\n              ...item,\n              opacity: 1,\n              dx: 0,\n              dy: 0\n            };\n          }\n        }\n        continue;\n      }\n\n      // 计算动画进度（0-1之间）\n      const animProgress = (ratio - disappearTime) / this.fadeOutDuration;\n      const progress = Math.max(0, Math.min(1, animProgress));\n\n      // 计算当前偏移和透明度\n      const dx = this.getTargetDx() * progress;\n      const dy = this.getTargetDy() * progress;\n      const opacity = 1 - progress;\n\n      // 更新这个单词的所有字符\n      for (const charIndex of this.wordGroups[groupIndex]) {\n        const item = updatedTextConfig[charIndex];\n        if ('text' in item) {\n          updatedTextConfig[charIndex] = {\n            ...item,\n            opacity,\n            dx,\n            dy\n          };\n        }\n      }\n    }\n\n    return updatedTextConfig;\n  }\n\n  // 按字符更新文本配置\n  private updateByCharacter(ratio: number, maxTextShowRatio: number): IRichTextCharacter[] {\n    const totalItems = this.fromTextConfig.length;\n    const updatedTextConfig = [...this.singleCharConfig];\n\n    // 更新每个字符的状态\n    for (let index = 0; index < updatedTextConfig.length; index++) {\n      const item = updatedTextConfig[index];\n      if ('text' in item) {\n        // 计算每个字符的消失时间点\n        let disappearTime;\n\n        if (this.reverseOrder) {\n          // 反转入场顺序\n          if (this.slideDirection === 'left') {\n            // 从左到右的顺序 (第一个字符先消失)\n            disappearTime = (index / totalItems) * maxTextShowRatio;\n          } else {\n            // 从右到左的顺序 (最后的字符先消失)\n            disappearTime = ((totalItems - 1 - index) / totalItems) * maxTextShowRatio;\n          }\n        } else {\n          // 与入场顺序相同\n          if (this.slideDirection === 'left') {\n            // 从右到左的顺序 (最后的字符先消失)\n            disappearTime = ((totalItems - 1 - index) / totalItems) * maxTextShowRatio;\n          } else {\n            // 标准顺序 (第一个字符先消失)\n            disappearTime = (index / totalItems) * maxTextShowRatio;\n          }\n        }\n\n        // 如果当前时间还没到这个字符的消失时间点，保持可见状态\n        if (ratio < disappearTime) {\n          updatedTextConfig[index] = {\n            ...item,\n            opacity: 1,\n            dx: 0,\n            dy: 0\n          };\n          continue;\n        }\n\n        // 计算动画进度（0-1之间）\n        const animProgress = (ratio - disappearTime) / this.fadeOutDuration;\n        const progress = Math.max(0, Math.min(1, animProgress));\n\n        // 计算当前偏移和透明度\n        const dx = this.getTargetDx() * progress;\n        const dy = this.getTargetDy() * progress;\n        const opacity = 1 - progress;\n\n        updatedTextConfig[index] = {\n          ...item,\n          opacity,\n          dx,\n          dy\n        };\n      }\n    }\n\n    return updatedTextConfig;\n  }\n}\n"]}

package/cjs/custom/richtext/slide-richtext.d.ts

@@ -0,0 +1,36 @@
+import { ACustomAnimate } from '../custom-animate';
+import type { IRichTextCharacter, IAnimate, IStep, EasingType } from '@visactor/vrender-core';
+export declare class SlideRichText extends ACustomAnimate<{
+    textConfig: IRichTextCharacter[];
+}> {
+    valid: boolean;
+    private fromTextConfig;
+    private toTextConfig;
+    private originalTextConfig;
+    private singleCharConfig;
+    private fadeInDuration;
+    private slideDirection;
+    private slideDistance;
+    private wordByWord;
+    private wordRegex;
+    private wordGroups;
+    constructor(from: {
+        textConfig: IRichTextCharacter[];
+    }, to: {
+        textConfig: IRichTextCharacter[];
+    }, duration: number, easing: EasingType, params?: {
+        fadeInDuration?: number;
+        slideDirection?: 'up' | 'down' | 'left' | 'right';
+        slideDistance?: number;
+        wordByWord?: boolean;
+        wordRegex?: RegExp;
+    });
+    onFirstRun(): void;
+    private calculateWordGroups;
+    private getInitialDx;
+    private getInitialDy;
+    onEnd(cb?: (animate: IAnimate, step: IStep) => void): void;
+    onUpdate(end: boolean, ratio: number, out: Record<string, any>): void;
+    private updateByWord;
+    private updateByCharacter;
+}