WPF实现类似ChatGPT的逐字打印效果.docx

第

WPF实现类似ChatGPT的逐字打印效果

前一段时间ChatGPT类的应用十分火爆，这类应用在回答用户的问题时逐字打印输出，像极了真人打字回复消息。出于对这个效果的兴趣，决定用WPF模拟这个效果。

真实的ChatGPT逐字输出效果涉及其语言生成模型原理以及服务端与前端通信机制，本文不做过多阐述，重点是如何用WPF模拟这个效果。

技术要点与实现

对于这个逐字输出的效果，我想到了两种实现方法:

方法一：根据字符串长度n，添加n个关键帧DiscreteStringKeyFrame，第一帧的Value为字符串的第一个字符，紧接着的关键帧都比上一帧的Value多一个字符，直到最后一帧的Value是完整的目标字符串。实现效果如下所示：

方法二：首先把TextBlock的字体颜色设置为透明，然后通过TextEffect的PositionStart和PositionCount属性控制应用动画效果的子字符串的起始位置以及长度，同时使用ColorAnimation设置TextEffect的Foreground属性由透明变为目标颜色（假定是黑色）。实现效果如下所示：

由于方案二的思路与WPF实现跳动的字符效果中的效果实现思路非常类似，具体实现不再详述。接下来我们看一下方案一通过关键帧动画拼接字符串的具体实现。

publicclassTypingCharAnimationBehavior:BehaviorTextBlock

privateStoryboard_storyboard;

protectedoverridevoidOnAttached()

base.OnAttached();

this.AssociatedObject.Loaded+=AssociatedObject_Loaded;;

this.AssociatedObject.Unloaded+=AssociatedObject_Unloaded;

BindingOperations.SetBinding(this,TypingCharAnimationBehavior.InternalTextProperty,newBinding(Tag){Source=this.AssociatedObject});

privatevoidAssociatedObject_Unloaded(objectsender,RoutedEventArgse)

StopEffect();

privatevoidAssociatedObject_Loaded(objectsender,RoutedEventArgse)

if(IsEnabled)

BeginEffect(InternalText);

protectedoverridevoidOnDetaching()

base.OnDetaching();

this.AssociatedObject.Loaded-=AssociatedObject_Loaded;

this.AssociatedObject.Unloaded-=AssociatedObject_Unloaded;

this.ClearValue(TypingCharAnimationBehavior.InternalTextProperty);

if(_storyboard!=null)

_storyboard.Remove(this.AssociatedObject);

_storyboard.Children.Clear();

privatestringInternalText

get{return(string)GetValue(InternalTextProperty);}

set{SetValue(InternalTextProperty,value);}

privatestaticreadonlyDependencyPropertyInternalTextProperty=

DependencyProperty.Register(InternalText,typeof(string),typeof(TypingCharAnimationBehavior),

newPropertyMetadata(OnInternalTextChanged));

privatestaticvoidOnInternalTextChanged(De