wpf实现类似chatgpt的逐字打印效果-kb88凯时官网登录

背景

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

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

技术要点与实现

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

• 方法一：根据字符串长度n，添加n个关键帧discretestringkeyframe，第一帧的value为字符串的第一个字符，紧接着的关键帧都比上一帧的value多一个字符，直到最后一帧的value是完整的目标字符串。实现效果如下所示：
  
• 方法二：首先把textblock的字体颜色设置为透明，然后通过texteffect的positionstart和positioncount属性控制应用动画效果的子字符串的起始位置以及长度，同时使用coloranimation设置texteffect的foreground属性由透明变为目标颜色（假定是黑色）。实现效果如下所示：
  

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

public class typingcharanimationbehavior : behavior
{
    private storyboard _storyboard;
    protected override void onattached()
    {
        base.onattached();
        this.associatedobject.loaded  = associatedobject_loaded; ;
        this.associatedobject.unloaded  = associatedobject_unloaded;
        bindingoperations.setbinding(this, typingcharanimationbehavior.internaltextproperty, new binding("tag") { source = this.associatedobject });
    }
    private void associatedobject_unloaded(object sender, routedeventargs e)
    {
        stopeffect();
    }
    private void associatedobject_loaded(object sender, routedeventargs e)
    {
        if (isenabled)
            begineffect(internaltext);
    }
    protected override void ondetaching()
    {
        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();
        }
    }
    private string internaltext
    {
        get { return (string)getvalue(internaltextproperty); }
        set { setvalue(internaltextproperty, value); }
    }
    private static readonly dependencyproperty internaltextproperty =
    dependencyproperty.register("internaltext", typeof(string), typeof(typingcharanimationbehavior),
    new propertymetadata(oninternaltextchanged));
    private static void oninternaltextchanged(dependencyobject d, dependencypropertychangedeventargs e)
    {
        var source = d as typingcharanimationbehavior;
        if (source._storyboard != null)
        {
            source._storyboard.stop(source.associatedobject);
            source._storyboard.children.clear();
        }
        source.seteffect(e.newvalue == null ? string.empty : e.newvalue.tostring());
    }
    public bool isenabled
    {
        get { return (bool)getvalue(isenabledproperty); }
        set { setvalue(isenabledproperty, value); }
    }
    public static readonly dependencyproperty isenabledproperty =
        dependencyproperty.register("isenabled", typeof(bool), typeof(typingcharanimationbehavior), new propertymetadata(true, (d, e) =>
        {
            bool b = (bool)e.newvalue;
            var source = d as typingcharanimationbehavior;
            source.seteffect(source.internaltext);
        }));
    private void seteffect(string text)
    {
        if (string.isnullorempty(text) || this.associatedobject.isloaded == false)
        {
            stopeffect();
            return;
        }
        begineffect(text);
    }
    private void stopeffect()
    {
        if (_storyboard != null)
        {
            _storyboard.stop(this.associatedobject);
        }
    }
    private void begineffect(string text)
    {
        stopeffect();
        int textlength = text.length;
        if (textlength < 1  || isenabled == false) return;
        if (_storyboard == null)
            _storyboard = new storyboard();
        double duration = 0.15d;
        stringanimationusingkeyframes frames = new stringanimationusingkeyframes();
        storyboard.settargetproperty(frames, new propertypath(textblock.textproperty));
        frames.duration = timespan.fromseconds(textlength * duration);
        for(int i=0;i