1. 项目概述为什么是DoTween TextMeshPro如果你还在用Unity自带的UI Text组件或者用Legacy Text配合Coroutine和string.Substring来写打字机效果那真的有点“复古”了。在Unity 2022及以后的版本里TextMeshPro简称TMP早已成为UI文本渲染的事实标准它提供了无与伦比的清晰度、丰富的字体效果和强大的富文本支持。而DoTween作为Unity社区里最受欢迎的动画插件之一以其简洁的API和出色的性能著称。把这两者结合起来做打字动画你得到的将不再是一个简单的“逐字显示”效果而是一个可以轻松控制速度、缓动、事件回调并且性能开销极低的现代化解决方案。我最近在重构一个对话系统时彻底抛弃了旧方案。旧方案里每显示一个字都要new一个字符串频繁触发UI重建在移动设备上对话一长就能感觉到轻微的卡顿。改用DoTween驱动TMP后动画流畅得像德芙而且代码量减少了70%逻辑清晰得一眼就能看懂。这个组合特别适合需要大量文字交互的游戏比如视觉小说、RPG对话、或者需要动态信息提示的UI。2. 核心思路拆解DoTween如何驱动TMP2.1 TextMeshPro的核心优势与动画瓶颈首先我们得明白为什么要换掉Legacy Text。Legacy Text使用的是系统字体纹理放大容易模糊且功能单一。TextMeshPro使用的是Signed Distance FieldSDF字体技术在任何分辨率下都能保持边缘锐利还支持轮廓、阴影、发光等复杂效果并且可以通过color#FF0000这样的/color标签实现局部富文本。但是TMP的“富文本”特性也给传统的打字动画带来了挑战。传统的做法是每帧修改text属性的字符串例如text fullText.Substring(0, currentIndex)。对于TMP直接修改text属性会导致整个文本网格的重建和富文本的重新解析即使只增加一个字开销也很大。更优雅的方式是控制TMP用于渲染的“可见字符数”。2.2 DoTween的DOFloat方法与maxVisibleCharacters属性这就是DoTween大显身手的地方。TMP有一个非常关键的属性叫maxVisibleCharacters。它决定了文本组件实际渲染多少个字符。比如一段有50个字符的文本设置maxVisibleCharacters 10就只会显示前10个字。我们的核心思路是使用DoTween对一个浮点数从0到总字符数进行补间动画并将这个值实时赋值给maxVisibleCharacters属性。DoTween的DOFloat方法可以创建一个浮点数的补间动画。我们让它从0动画到目标文本的总长度持续一段时间。在动画的每一帧DoTween会计算出一个当前的浮点数值比如25.7我们将其转换为整数Mathf.FloorToInt后赋值给maxVisibleCharacters。这样字符就会随着动画进度逐个“出现”。这种方法的好处是性能极佳动画的驱动完全在DoTween的高效补间引擎内我们只在每帧回调中执行一次简单的赋值操作。TMP内部会根据maxVisibleCharacters的变化高效地更新渲染避免了字符串的频繁拼接和重建。控制力强DoTween提供了丰富的缓动函数Ease你可以轻松实现“先快后慢”、“弹性出现”、“来回反弹”等效果。易于扩展可以方便地暂停、继续、重启动画或者与DoTween的其他动画如淡入、位置移动组合成序列。2.3 方案对比协程 vs DoTween为了更直观我们对比一下两种主流方案特性传统协程方案DoTween TMP方案核心实现yield return new WaitForSeconds循环拼接字符串DOFloat驱动maxVisibleCharacters性能开销中。每帧字符串操作、UI重建。低。仅每帧赋值一个整数。代码复杂度中。需要管理协程、计时器、停止逻辑。低。DoTween封装了所有动画逻辑。功能丰富度低。实现复杂效果如弹性需自己写算法。高。直接使用DoTween内置的30种缓动函数。可组合性差。与其他动画同步困难。优秀。可轻松放入Sequence中串行或并行。维护性差。状态分散在多个变量中。好。动画句柄Tween集中管理状态。注意如果你的项目还没有导入DoTween可以通过Unity的Package Manager的“My Registries”或从Asset Store下载。这是本方案唯一需要的外部依赖但其带来的开发效率提升是绝对值得的。3. 完整代码实现与逐行解析理论讲完了我们直接上干货。下面是一个我项目中正在使用的、功能比较完整的TMP_Typewriter组件代码。你可以直接将它挂载到任何一个带有TextMeshProUGUI组件的GameObject上。using DG.Tweening; // DoTween命名空间 using TMPro; // TextMeshPro命名空间 using UnityEngine; using UnityEngine.Events; [RequireComponent(typeof(TextMeshProUGUI))] public class TMP_Typewriter : MonoBehaviour { // 对外公开的可配置参数 [Header(动画设置)] [SerializeField] private float charsPerSecond 30f; // 打字速度字符/秒 [SerializeField] private Ease easeType Ease.Linear; // 缓动类型 [SerializeField] private bool playOnAwake false; // 是否唤醒时播放 [Header(音效与事件)] [SerializeField] private AudioClip typeSound; // 每个字符的音效可选 [SerializeField] private UnityEvent onCharacterPrinted; // 每打一个字符的事件 [SerializeField] private UnityEvent onPrintCompleted; // 打印完成的事件 // 内部引用与状态 private TextMeshProUGUI _targetText; private Tween _typewriterTween; private string _fullText; private int _totalVisibleCharacters; private AudioSource _audioSource; // 用于播放音效 private void Awake() { // 获取组件引用 _targetText GetComponentTextMeshProUGUI(); _audioSource GetComponentAudioSource(); if (_audioSource null typeSound ! null) { // 如果需要音效但没有AudioSource自动添加一个 _audioSource gameObject.AddComponentAudioSource(); _audioSource.playOnAwake false; } // 保存初始的完整文本 _fullText _targetText.text; // 初始状态下隐藏所有文字 _targetText.maxVisibleCharacters 0; if (playOnAwake) { // 如果配置了唤醒播放稍等一帧确保所有组件初始化完成 StartPrinting(); } } /// summary /// 开始播放打字动画 /// /summary /// param namenewText可选如果传入则替换原有文本/param public void StartPrinting(string newText null) { // 1. 停止可能正在进行的旧动画 StopPrinting(); // 2. 更新文本内容如果提供了新文本 if (!string.IsNullOrEmpty(newText)) { _fullText newText; _targetText.text _fullText; // 强制TMP立即生成文本网格以便正确获取字符数 _targetText.ForceMeshUpdate(); } // 3. 获取总字符数包括富文本标签 _totalVisibleCharacters _fullText.Length; // 重置可见字符数 _targetText.maxVisibleCharacters 0; // 4. 计算动画总时长 float duration _totalVisibleCharacters / charsPerSecond; // 5. 创建DoTween浮点补间动画 float currentCharCount 0; _typewriterTween DOTween.To( () currentCharCount, // 动画的起始值获取器 x { currentCharCount x; int visibleCount Mathf.FloorToInt(currentCharCount); _targetText.maxVisibleCharacters visibleCount; // 触发“每字符”事件和音效 // 只有当visibleCount增加时才触发避免同一帧重复触发 if (visibleCount _targetText.maxVisibleCharacters) { OnCharacterPrinted(); } }, _totalVisibleCharacters, // 动画目标值 duration // 动画持续时间 ).SetEase(easeType) // 设置缓动函数 .OnComplete(OnPrintCompleted) // 设置完成回调 .SetAutoKill(false); // 不要自动销毁方便重复使用和控制 // 6. 播放动画 _typewriterTween.Play(); } /// summary /// 立即完成所有打字动画 /// /summary public void CompletePrinting() { if (_typewriterTween ! null _typewriterTween.IsActive()) { _typewriterTween.Complete(); // DoTween会立即跳到动画终点并触发OnComplete } else { // 如果没有动画在运行则直接设置状态 _targetText.maxVisibleCharacters _totalVisibleCharacters; OnPrintCompleted(); } } /// summary /// 停止打字动画 /// /summary public void StopPrinting() { if (_typewriterTween ! null _typewriterTween.IsActive()) { _typewriterTween.Kill(); // 杀死动画不会触发OnComplete _typewriterTween null; } } /// summary /// 每显示一个字符时调用 /// /summary private void OnCharacterPrinted() { // 播放音效 if (typeSound ! null _audioSource ! null) { _audioSource.PlayOneShot(typeSound); } // 调用UnityEvent可以在Inspector里关联其他方法 onCharacterPrinted?.Invoke(); } /// summary /// 打字动画全部完成时调用 /// /summary private void OnPrintCompleted() { _targetText.maxVisibleCharacters _totalVisibleCharacters; onPrintCompleted?.Invoke(); } // 清理当组件禁用或物体销毁时确保DoTween动画被正确清理 private void OnDisable() { StopPrinting(); } private void OnDestroy() { if (_typewriterTween ! null) { _typewriterTween.Kill(); } } }3.1 关键代码段深度解析让我们拆解几个核心函数理解其设计意图1.StartPrinting方法这是动画的启动器。它首先调用StopPrinting()来清理可能存在的旧动画这是一个好习惯防止多个动画叠加造成混乱。然后它通过_targetText.ForceMeshUpdate()强制TMP立即更新网格。这一步至关重要因为TMP的文本解析和网格生成可能是延迟的如果不强制更新_fullText.Length获取的长度可能不准确导致动画时长计算错误。2.DOTween.To方法这是DoTween的核心补间方法。它接受四个主要参数Getter (() currentCharCount): 一个返回动画当前起始值的函数。这里我们用一个局部变量currentCharCount来记录。Setter (x { ... }): 一个在动画每帧被调用的函数参数x是DoTween计算出的当前插值。我们在这里做三件事 a. 更新currentCharCount x。 b. 将浮点数x向下取整得到整数visibleCount并赋值给_targetText.maxVisibleCharacters。这就是字符逐个出现的魔法所在。 c. 通过判断visibleCount是否比上一帧的_targetText.maxVisibleCharacters大来触发“每打一字”的事件和音效。这个判断避免了在一帧内因为浮点数精度问题多次触发。EndValue (_totalVisibleCharacters): 动画的最终值即总字符数。Duration: 动画时长由总字符数除以每秒字符数得出。3. 链式调用.SetEase(easeType).OnComplete(...).SetAutoKill(false).SetEase(): 定义了数值变化的速度曲线。Ease.Linear是匀速Ease.OutQuad是慢入快出Ease.OutElastic则带有弹性效果。你可以在Inspector里直接选择实时预览不同效果。.OnComplete(): 注册一个动画完成时的回调函数我们在这里触发完成事件。.SetAutoKill(false):这是一个重要的性能优化点。默认情况下DoTween动画播放完成后会自动销毁以释放内存。但我们的打字动画组件可能会被频繁触发如对话逐句显示。设置AutoKill为false后这个Tween对象不会被销毁下次调用StartPrinting时我们可以重用或由StopPrinting安全清理避免了频繁创建和销毁带来的GC垃圾回收压力。4. 音效与事件系统我设计了两个UnityEventonCharacterPrinted和onPrintCompleted。这体现了良好的组件设计思想——高内聚低耦合。打字组件只负责核心的动画逻辑至于打字时屏幕要震动、角色要点头、日志要记录这些外部反应都通过UnityEvent在Inspector里拖拽绑定。这样这个组件就可以在任何项目中复用而不用修改一行代码。4. 高级用法与实战技巧有了基础组件我们来看看如何把它玩出花来应对实际项目中的复杂需求。4.1 与对话系统集成按句播放与跳过在视觉小说或RPG中对话通常是一句一句出现的。我们可以写一个简单的对话管理器。public class DialogueManager : MonoBehaviour { public TMP_Typewriter typewriter; public string[] dialogueLines; // 对话数组 private int _currentLineIndex 0; void Start() { if (typewriter ! null dialogueLines.Length 0) { PlayNextLine(); } } void Update() { // 当玩家按下“确定”键时 if (Input.GetKeyDown(KeyCode.Space) || Input.GetMouseButtonDown(0)) { if (typewriter.IsPlaying()) // 需要给TMP_Typewriter添加一个IsPlaying属性 { // 如果正在播放则立即完成当前行 typewriter.CompletePrinting(); } else { // 如果当前行已播放完则播下一行 PlayNextLine(); } } } void PlayNextLine() { if (_currentLineIndex dialogueLines.Length) { typewriter.StartPrinting(dialogueLines[_currentLineIndex]); _currentLineIndex; } else { Debug.Log(对话结束); // 触发结束事件关闭对话框等... } } } // 需要在TMP_Typewriter中添加一个属性来查询动画状态 public bool IsPlaying() { return _typewriterTween ! null _typewriterTween.IsPlaying(); }这个管理器实现了经典的“按空格加速/跳过当前句播完再按空格播下一句”的逻辑。4.2 创造特殊效果富文本与字符级动画TMP的富文本标签在打字动画中会被正确处理吗答案是会的而且效果很棒。maxVisibleCharacters属性是按渲染字符索引的富文本标签如color、b本身不占索引。所以动画会平滑地显示出带有颜色、加粗等格式的文字。你甚至可以结合DoTween的Sequence序列为单个字符添加额外动画。比如让每个新出现的字符先放大再缩回营造一种“敲击”感。// 这是一个扩展思路不一定直接集成到基础组件中 public void StartPrintingWithBounce(string text) { _targetText.text text; _targetText.ForceMeshUpdate(); _targetText.maxVisibleCharacters 0; int totalChars text.Length; float charDuration 1f / charsPerSecond; Sequence sequence DOTween.Sequence(); for (int i 0; i totalChars; i) { int charIndex i; // 闭包需要局部变量 float startTime i * charDuration; // 主序列在对应时间点增加可见字符数 sequence.InsertCallback(startTime, () { _targetText.maxVisibleCharacters charIndex 1; OnCharacterPrinted(); // 触发音效等 // 子动画让当前字符的局部缩放动画 TMP_CharacterInfo charInfo _targetText.textInfo.characterInfo[charIndex]; Vector3[] vertices _targetText.textInfo.meshInfo[charInfo.materialReferenceIndex].vertices; // 获取字符的四个顶点TMP是四边形 Vector3 charMidTop (vertices[charInfo.vertexIndex] vertices[charInfo.vertexIndex 1]) / 2; Vector3 charMidBottom (vertices[charInfo.vertexIndex 2] vertices[charInfo.vertexIndex 3]) / 2; Vector3 charCenter (charMidTop charMidBottom) / 2; // 这里可以创建一个临时的GameObject或者使用其他方式来做字符级动画 // 例如修改顶点实现缩放较复杂需操作mesh // 更简单的方案可以实例化一个简单的Sprite放在字符位置做缩放动画 CreateBounceEffectAtPosition(charCenter); }); } sequence.OnComplete(OnPrintCompleted); sequence.Play(); _typewriterTween sequence; // 用Sequence代替简单的Tween }提示字符级的顶点操作属于TMP的高级用法涉及到textInfo和meshInfo。如果你不熟悉网格操作可以采用上面注释提到的替代方案在字符出现的位置实例化一个简单的UI粒子或Sprite用DoTween对它做缩放动画模拟敲击效果。虽然效果略有不同但实现起来简单很多。4.3 性能优化要点重用Tween对象如前所述务必使用.SetAutoKill(false)并妥善管理Tween生命周期。在OnDisable和OnDestroy中清理是防止内存泄漏和空引用的好习惯。避免每帧ForceMeshUpdate除非文本内容改变否则不要在Update或动画回调中频繁调用ForceMeshUpdate()。我们的方案只在StartPrinting时调用一次。音效对象池如果打字速度极快比如每秒100字每字一个音效可能会创建大量AudioSource。建议使用对象池来管理音效播放或者限制音效的播放频率例如每0.05秒最多播放一次。对于超长文本如果一次要显示成千上万个字符比如滚动日志可以考虑分页或虚拟化。即只动画显示当前视口内的部分通过滚动来控制。但这已经超出了基础打字动画的范畴。5. 常见问题排查与解决方案在实际使用中你可能会遇到以下问题。这里是我的踩坑记录问题1打字动画不播放文本直接全部显示或完全不显示。检查1maxVisibleCharacters初始值。确保在Awake或StartPrinting开始时将其设置为0。检查2文本内容是否为空。如果_fullText是空字符串或null动画时长会是0导致立即完成。检查3DoTween初始化。确认DoTween插件已正确导入并且在场景中有一个DOTween.Init的调用通常DoTween会在首次使用时自动初始化。问题2动画速度不稳定时快时慢。原因这通常与帧率有关。DOTween.To默认使用Update作为时间基准受Time.timeScale影响。如果你的游戏有暂停或时间缩放动画也会变慢。解决方案使用.SetUpdate(true)可以让动画忽略Time.timeScale使用真实时间。或者使用DOTween.To的另一个重载指定使用固定时间步长。问题3富文本标签被当作字符显示出来了。现象屏幕上出现了colorred这样的字面字符。原因与解决这通常是因为你在动画过程中动态修改了_targetText.text。TMP在解析富文本时如果你在标签中途截断字符串会导致解析错误。我们的方案全程只修改maxVisibleCharacters不修改text属性所以能完美支持富文本。请确保你的逻辑没有在动画中途去改text。问题4在动画播放时文本的布局如自动换行很奇怪。原因maxVisibleCharacters只是隐藏字符但这些字符仍然占据着布局空间。如果第一行末尾是一个很长的单词它可能会被截断导致换行位置与最终完整文本不同。解决方案这是一个已知的TMP特性。如果这对你的UI造成严重困扰可以考虑以下两种方案预先布局在动画开始前将完整文本设置进去并立即设置maxVisibleCharacters 0。这样TMP会按照完整文本进行布局动画过程中布局就不会再变化。使用nobr标签在你知道可能需要强制不断开的地方使用TMP的nobr不换行标签包裹。问题5我想在动画进行到某个特定字符比如逗号、句号时暂停一下。解决方案这需要更精细的控制。你不能再用简单的DOFloat了。你需要将文本按标点分割成多个段落然后使用DoTween的Sequence来串联多个动画并在段落之间插入延迟sequence.AppendInterval(0.5f)。public void StartPrintingWithPauses(string text, char[] pauseChars) { // 分割文本的逻辑此处简化 // 假设我们按句号分割 string[] sentences text.Split(。); Sequence sequence DOTween.Sequence(); int accumulatedLength 0; foreach (var sentence in sentences) { string sentenceWithDot sentence 。; int sentenceLength sentenceWithDot.Length; sequence.AppendCallback(() { _targetText.text _fullText; // 始终显示全文以保证布局 _targetText.maxVisibleCharacters accumulatedLength; }); // 为这个句子创建打字动画 Tween sentenceTween DOTween.To( () accumulatedLength, x { _targetText.maxVisibleCharacters Mathf.FloorToInt(x); }, accumulatedLength sentenceLength, sentenceLength / charsPerSecond ).SetEase(easeType); sequence.Append(sentenceTween); // 在句子结束后添加一个停顿 sequence.AppendInterval(0.3f); // 停顿0.3秒 accumulatedLength sentenceLength; } sequence.OnComplete(OnPrintCompleted); sequence.Play(); _typewriterTween sequence; }这个方案更复杂但提供了最高的控制自由度可以实现任何你想要的节奏感。
1. 项目概述为什么是DoTween TextMeshPro如果你还在用Unity自带的UI Text组件或者用Legacy Text配合Coroutine和string.Substring来写打字机效果那真的有点“复古”了。在Unity 2022及以后的版本里TextMeshPro简称TMP早已成为UI文本渲染的事实标准它提供了无与伦比的清晰度、丰富的字体效果和强大的富文本支持。而DoTween作为Unity社区里最受欢迎的动画插件之一以其简洁的API和出色的性能著称。把这两者结合起来做打字动画你得到的将不再是一个简单的“逐字显示”效果而是一个可以轻松控制速度、缓动、事件回调并且性能开销极低的现代化解决方案。我最近在重构一个对话系统时彻底抛弃了旧方案。旧方案里每显示一个字都要new一个字符串频繁触发UI重建在移动设备上对话一长就能感觉到轻微的卡顿。改用DoTween驱动TMP后动画流畅得像德芙而且代码量减少了70%逻辑清晰得一眼就能看懂。这个组合特别适合需要大量文字交互的游戏比如视觉小说、RPG对话、或者需要动态信息提示的UI。2. 核心思路拆解DoTween如何驱动TMP2.1 TextMeshPro的核心优势与动画瓶颈首先我们得明白为什么要换掉Legacy Text。Legacy Text使用的是系统字体纹理放大容易模糊且功能单一。TextMeshPro使用的是Signed Distance FieldSDF字体技术在任何分辨率下都能保持边缘锐利还支持轮廓、阴影、发光等复杂效果并且可以通过color#FF0000这样的/color标签实现局部富文本。但是TMP的“富文本”特性也给传统的打字动画带来了挑战。传统的做法是每帧修改text属性的字符串例如text fullText.Substring(0, currentIndex)。对于TMP直接修改text属性会导致整个文本网格的重建和富文本的重新解析即使只增加一个字开销也很大。更优雅的方式是控制TMP用于渲染的“可见字符数”。2.2 DoTween的DOFloat方法与maxVisibleCharacters属性这就是DoTween大显身手的地方。TMP有一个非常关键的属性叫maxVisibleCharacters。它决定了文本组件实际渲染多少个字符。比如一段有50个字符的文本设置maxVisibleCharacters 10就只会显示前10个字。我们的核心思路是使用DoTween对一个浮点数从0到总字符数进行补间动画并将这个值实时赋值给maxVisibleCharacters属性。DoTween的DOFloat方法可以创建一个浮点数的补间动画。我们让它从0动画到目标文本的总长度持续一段时间。在动画的每一帧DoTween会计算出一个当前的浮点数值比如25.7我们将其转换为整数Mathf.FloorToInt后赋值给maxVisibleCharacters。这样字符就会随着动画进度逐个“出现”。这种方法的好处是性能极佳动画的驱动完全在DoTween的高效补间引擎内我们只在每帧回调中执行一次简单的赋值操作。TMP内部会根据maxVisibleCharacters的变化高效地更新渲染避免了字符串的频繁拼接和重建。控制力强DoTween提供了丰富的缓动函数Ease你可以轻松实现“先快后慢”、“弹性出现”、“来回反弹”等效果。易于扩展可以方便地暂停、继续、重启动画或者与DoTween的其他动画如淡入、位置移动组合成序列。2.3 方案对比协程 vs DoTween为了更直观我们对比一下两种主流方案特性传统协程方案DoTween TMP方案核心实现yield return new WaitForSeconds循环拼接字符串DOFloat驱动maxVisibleCharacters性能开销中。每帧字符串操作、UI重建。低。仅每帧赋值一个整数。代码复杂度中。需要管理协程、计时器、停止逻辑。低。DoTween封装了所有动画逻辑。功能丰富度低。实现复杂效果如弹性需自己写算法。高。直接使用DoTween内置的30种缓动函数。可组合性差。与其他动画同步困难。优秀。可轻松放入Sequence中串行或并行。维护性差。状态分散在多个变量中。好。动画句柄Tween集中管理状态。注意如果你的项目还没有导入DoTween可以通过Unity的Package Manager的“My Registries”或从Asset Store下载。这是本方案唯一需要的外部依赖但其带来的开发效率提升是绝对值得的。3. 完整代码实现与逐行解析理论讲完了我们直接上干货。下面是一个我项目中正在使用的、功能比较完整的TMP_Typewriter组件代码。你可以直接将它挂载到任何一个带有TextMeshProUGUI组件的GameObject上。using DG.Tweening; // DoTween命名空间 using TMPro; // TextMeshPro命名空间 using UnityEngine; using UnityEngine.Events; [RequireComponent(typeof(TextMeshProUGUI))] public class TMP_Typewriter : MonoBehaviour { // 对外公开的可配置参数 [Header(动画设置)] [SerializeField] private float charsPerSecond 30f; // 打字速度字符/秒 [SerializeField] private Ease easeType Ease.Linear; // 缓动类型 [SerializeField] private bool playOnAwake false; // 是否唤醒时播放 [Header(音效与事件)] [SerializeField] private AudioClip typeSound; // 每个字符的音效可选 [SerializeField] private UnityEvent onCharacterPrinted; // 每打一个字符的事件 [SerializeField] private UnityEvent onPrintCompleted; // 打印完成的事件 // 内部引用与状态 private TextMeshProUGUI _targetText; private Tween _typewriterTween; private string _fullText; private int _totalVisibleCharacters; private AudioSource _audioSource; // 用于播放音效 private void Awake() { // 获取组件引用 _targetText GetComponentTextMeshProUGUI(); _audioSource GetComponentAudioSource(); if (_audioSource null typeSound ! null) { // 如果需要音效但没有AudioSource自动添加一个 _audioSource gameObject.AddComponentAudioSource(); _audioSource.playOnAwake false; } // 保存初始的完整文本 _fullText _targetText.text; // 初始状态下隐藏所有文字 _targetText.maxVisibleCharacters 0; if (playOnAwake) { // 如果配置了唤醒播放稍等一帧确保所有组件初始化完成 StartPrinting(); } } /// summary /// 开始播放打字动画 /// /summary /// param namenewText可选如果传入则替换原有文本/param public void StartPrinting(string newText null) { // 1. 停止可能正在进行的旧动画 StopPrinting(); // 2. 更新文本内容如果提供了新文本 if (!string.IsNullOrEmpty(newText)) { _fullText newText; _targetText.text _fullText; // 强制TMP立即生成文本网格以便正确获取字符数 _targetText.ForceMeshUpdate(); } // 3. 获取总字符数包括富文本标签 _totalVisibleCharacters _fullText.Length; // 重置可见字符数 _targetText.maxVisibleCharacters 0; // 4. 计算动画总时长 float duration _totalVisibleCharacters / charsPerSecond; // 5. 创建DoTween浮点补间动画 float currentCharCount 0; _typewriterTween DOTween.To( () currentCharCount, // 动画的起始值获取器 x { currentCharCount x; int visibleCount Mathf.FloorToInt(currentCharCount); _targetText.maxVisibleCharacters visibleCount; // 触发“每字符”事件和音效 // 只有当visibleCount增加时才触发避免同一帧重复触发 if (visibleCount _targetText.maxVisibleCharacters) { OnCharacterPrinted(); } }, _totalVisibleCharacters, // 动画目标值 duration // 动画持续时间 ).SetEase(easeType) // 设置缓动函数 .OnComplete(OnPrintCompleted) // 设置完成回调 .SetAutoKill(false); // 不要自动销毁方便重复使用和控制 // 6. 播放动画 _typewriterTween.Play(); } /// summary /// 立即完成所有打字动画 /// /summary public void CompletePrinting() { if (_typewriterTween ! null _typewriterTween.IsActive()) { _typewriterTween.Complete(); // DoTween会立即跳到动画终点并触发OnComplete } else { // 如果没有动画在运行则直接设置状态 _targetText.maxVisibleCharacters _totalVisibleCharacters; OnPrintCompleted(); } } /// summary /// 停止打字动画 /// /summary public void StopPrinting() { if (_typewriterTween ! null _typewriterTween.IsActive()) { _typewriterTween.Kill(); // 杀死动画不会触发OnComplete _typewriterTween null; } } /// summary /// 每显示一个字符时调用 /// /summary private void OnCharacterPrinted() { // 播放音效 if (typeSound ! null _audioSource ! null) { _audioSource.PlayOneShot(typeSound); } // 调用UnityEvent可以在Inspector里关联其他方法 onCharacterPrinted?.Invoke(); } /// summary /// 打字动画全部完成时调用 /// /summary private void OnPrintCompleted() { _targetText.maxVisibleCharacters _totalVisibleCharacters; onPrintCompleted?.Invoke(); } // 清理当组件禁用或物体销毁时确保DoTween动画被正确清理 private void OnDisable() { StopPrinting(); } private void OnDestroy() { if (_typewriterTween ! null) { _typewriterTween.Kill(); } } }3.1 关键代码段深度解析让我们拆解几个核心函数理解其设计意图1.StartPrinting方法这是动画的启动器。它首先调用StopPrinting()来清理可能存在的旧动画这是一个好习惯防止多个动画叠加造成混乱。然后它通过_targetText.ForceMeshUpdate()强制TMP立即更新网格。这一步至关重要因为TMP的文本解析和网格生成可能是延迟的如果不强制更新_fullText.Length获取的长度可能不准确导致动画时长计算错误。2.DOTween.To方法这是DoTween的核心补间方法。它接受四个主要参数Getter (() currentCharCount): 一个返回动画当前起始值的函数。这里我们用一个局部变量currentCharCount来记录。Setter (x { ... }): 一个在动画每帧被调用的函数参数x是DoTween计算出的当前插值。我们在这里做三件事 a. 更新currentCharCount x。 b. 将浮点数x向下取整得到整数visibleCount并赋值给_targetText.maxVisibleCharacters。这就是字符逐个出现的魔法所在。 c. 通过判断visibleCount是否比上一帧的_targetText.maxVisibleCharacters大来触发“每打一字”的事件和音效。这个判断避免了在一帧内因为浮点数精度问题多次触发。EndValue (_totalVisibleCharacters): 动画的最终值即总字符数。Duration: 动画时长由总字符数除以每秒字符数得出。3. 链式调用.SetEase(easeType).OnComplete(...).SetAutoKill(false).SetEase(): 定义了数值变化的速度曲线。Ease.Linear是匀速Ease.OutQuad是慢入快出Ease.OutElastic则带有弹性效果。你可以在Inspector里直接选择实时预览不同效果。.OnComplete(): 注册一个动画完成时的回调函数我们在这里触发完成事件。.SetAutoKill(false):这是一个重要的性能优化点。默认情况下DoTween动画播放完成后会自动销毁以释放内存。但我们的打字动画组件可能会被频繁触发如对话逐句显示。设置AutoKill为false后这个Tween对象不会被销毁下次调用StartPrinting时我们可以重用或由StopPrinting安全清理避免了频繁创建和销毁带来的GC垃圾回收压力。4. 音效与事件系统我设计了两个UnityEventonCharacterPrinted和onPrintCompleted。这体现了良好的组件设计思想——高内聚低耦合。打字组件只负责核心的动画逻辑至于打字时屏幕要震动、角色要点头、日志要记录这些外部反应都通过UnityEvent在Inspector里拖拽绑定。这样这个组件就可以在任何项目中复用而不用修改一行代码。4. 高级用法与实战技巧有了基础组件我们来看看如何把它玩出花来应对实际项目中的复杂需求。4.1 与对话系统集成按句播放与跳过在视觉小说或RPG中对话通常是一句一句出现的。我们可以写一个简单的对话管理器。public class DialogueManager : MonoBehaviour { public TMP_Typewriter typewriter; public string[] dialogueLines; // 对话数组 private int _currentLineIndex 0; void Start() { if (typewriter ! null dialogueLines.Length 0) { PlayNextLine(); } } void Update() { // 当玩家按下“确定”键时 if (Input.GetKeyDown(KeyCode.Space) || Input.GetMouseButtonDown(0)) { if (typewriter.IsPlaying()) // 需要给TMP_Typewriter添加一个IsPlaying属性 { // 如果正在播放则立即完成当前行 typewriter.CompletePrinting(); } else { // 如果当前行已播放完则播下一行 PlayNextLine(); } } } void PlayNextLine() { if (_currentLineIndex dialogueLines.Length) { typewriter.StartPrinting(dialogueLines[_currentLineIndex]); _currentLineIndex; } else { Debug.Log(对话结束); // 触发结束事件关闭对话框等... } } } // 需要在TMP_Typewriter中添加一个属性来查询动画状态 public bool IsPlaying() { return _typewriterTween ! null _typewriterTween.IsPlaying(); }这个管理器实现了经典的“按空格加速/跳过当前句播完再按空格播下一句”的逻辑。4.2 创造特殊效果富文本与字符级动画TMP的富文本标签在打字动画中会被正确处理吗答案是会的而且效果很棒。maxVisibleCharacters属性是按渲染字符索引的富文本标签如color、b本身不占索引。所以动画会平滑地显示出带有颜色、加粗等格式的文字。你甚至可以结合DoTween的Sequence序列为单个字符添加额外动画。比如让每个新出现的字符先放大再缩回营造一种“敲击”感。// 这是一个扩展思路不一定直接集成到基础组件中 public void StartPrintingWithBounce(string text) { _targetText.text text; _targetText.ForceMeshUpdate(); _targetText.maxVisibleCharacters 0; int totalChars text.Length; float charDuration 1f / charsPerSecond; Sequence sequence DOTween.Sequence(); for (int i 0; i totalChars; i) { int charIndex i; // 闭包需要局部变量 float startTime i * charDuration; // 主序列在对应时间点增加可见字符数 sequence.InsertCallback(startTime, () { _targetText.maxVisibleCharacters charIndex 1; OnCharacterPrinted(); // 触发音效等 // 子动画让当前字符的局部缩放动画 TMP_CharacterInfo charInfo _targetText.textInfo.characterInfo[charIndex]; Vector3[] vertices _targetText.textInfo.meshInfo[charInfo.materialReferenceIndex].vertices; // 获取字符的四个顶点TMP是四边形 Vector3 charMidTop (vertices[charInfo.vertexIndex] vertices[charInfo.vertexIndex 1]) / 2; Vector3 charMidBottom (vertices[charInfo.vertexIndex 2] vertices[charInfo.vertexIndex 3]) / 2; Vector3 charCenter (charMidTop charMidBottom) / 2; // 这里可以创建一个临时的GameObject或者使用其他方式来做字符级动画 // 例如修改顶点实现缩放较复杂需操作mesh // 更简单的方案可以实例化一个简单的Sprite放在字符位置做缩放动画 CreateBounceEffectAtPosition(charCenter); }); } sequence.OnComplete(OnPrintCompleted); sequence.Play(); _typewriterTween sequence; // 用Sequence代替简单的Tween }提示字符级的顶点操作属于TMP的高级用法涉及到textInfo和meshInfo。如果你不熟悉网格操作可以采用上面注释提到的替代方案在字符出现的位置实例化一个简单的UI粒子或Sprite用DoTween对它做缩放动画模拟敲击效果。虽然效果略有不同但实现起来简单很多。4.3 性能优化要点重用Tween对象如前所述务必使用.SetAutoKill(false)并妥善管理Tween生命周期。在OnDisable和OnDestroy中清理是防止内存泄漏和空引用的好习惯。避免每帧ForceMeshUpdate除非文本内容改变否则不要在Update或动画回调中频繁调用ForceMeshUpdate()。我们的方案只在StartPrinting时调用一次。音效对象池如果打字速度极快比如每秒100字每字一个音效可能会创建大量AudioSource。建议使用对象池来管理音效播放或者限制音效的播放频率例如每0.05秒最多播放一次。对于超长文本如果一次要显示成千上万个字符比如滚动日志可以考虑分页或虚拟化。即只动画显示当前视口内的部分通过滚动来控制。但这已经超出了基础打字动画的范畴。5. 常见问题排查与解决方案在实际使用中你可能会遇到以下问题。这里是我的踩坑记录问题1打字动画不播放文本直接全部显示或完全不显示。检查1maxVisibleCharacters初始值。确保在Awake或StartPrinting开始时将其设置为0。检查2文本内容是否为空。如果_fullText是空字符串或null动画时长会是0导致立即完成。检查3DoTween初始化。确认DoTween插件已正确导入并且在场景中有一个DOTween.Init的调用通常DoTween会在首次使用时自动初始化。问题2动画速度不稳定时快时慢。原因这通常与帧率有关。DOTween.To默认使用Update作为时间基准受Time.timeScale影响。如果你的游戏有暂停或时间缩放动画也会变慢。解决方案使用.SetUpdate(true)可以让动画忽略Time.timeScale使用真实时间。或者使用DOTween.To的另一个重载指定使用固定时间步长。问题3富文本标签被当作字符显示出来了。现象屏幕上出现了colorred这样的字面字符。原因与解决这通常是因为你在动画过程中动态修改了_targetText.text。TMP在解析富文本时如果你在标签中途截断字符串会导致解析错误。我们的方案全程只修改maxVisibleCharacters不修改text属性所以能完美支持富文本。请确保你的逻辑没有在动画中途去改text。问题4在动画播放时文本的布局如自动换行很奇怪。原因maxVisibleCharacters只是隐藏字符但这些字符仍然占据着布局空间。如果第一行末尾是一个很长的单词它可能会被截断导致换行位置与最终完整文本不同。解决方案这是一个已知的TMP特性。如果这对你的UI造成严重困扰可以考虑以下两种方案预先布局在动画开始前将完整文本设置进去并立即设置maxVisibleCharacters 0。这样TMP会按照完整文本进行布局动画过程中布局就不会再变化。使用nobr标签在你知道可能需要强制不断开的地方使用TMP的nobr不换行标签包裹。问题5我想在动画进行到某个特定字符比如逗号、句号时暂停一下。解决方案这需要更精细的控制。你不能再用简单的DOFloat了。你需要将文本按标点分割成多个段落然后使用DoTween的Sequence来串联多个动画并在段落之间插入延迟sequence.AppendInterval(0.5f)。public void StartPrintingWithPauses(string text, char[] pauseChars) { // 分割文本的逻辑此处简化 // 假设我们按句号分割 string[] sentences text.Split(。); Sequence sequence DOTween.Sequence(); int accumulatedLength 0; foreach (var sentence in sentences) { string sentenceWithDot sentence 。; int sentenceLength sentenceWithDot.Length; sequence.AppendCallback(() { _targetText.text _fullText; // 始终显示全文以保证布局 _targetText.maxVisibleCharacters accumulatedLength; }); // 为这个句子创建打字动画 Tween sentenceTween DOTween.To( () accumulatedLength, x { _targetText.maxVisibleCharacters Mathf.FloorToInt(x); }, accumulatedLength sentenceLength, sentenceLength / charsPerSecond ).SetEase(easeType); sequence.Append(sentenceTween); // 在句子结束后添加一个停顿 sequence.AppendInterval(0.3f); // 停顿0.3秒 accumulatedLength sentenceLength; } sequence.OnComplete(OnPrintCompleted); sequence.Play(); _typewriterTween sequence; }这个方案更复杂但提供了最高的控制自由度可以实现任何你想要的节奏感。
—APK Java层崩溃)
)
