关于 ChatGPT 回答的时候，文字渐显的效果是如何实现的？

[17681880207]

ChatGPT 官网回答的时候的效果~
请教下各位老哥，有了解和知道的吗？

[concernedz]

一个字一个字出来的效果吗？我记得是 SSE 吧？

[thenxkk]

阮一峰这篇文章有说： https://www.ruanyifeng.com/blog/2017/05/server-sent_events.html

[chairuosen]

sse 也是一大段一大段拿的，文字逐字蹦出来只是前端效果

[chairuosen]

一大段字排成数组，设置一个游标定时向后移动，渲染取数组 slice 游标的结果

[chenliangngng]

这功能我做过，前端拿到任意的文本后，随机截取然后拼接，说白了就是假的

[xiaoz]

SSE 可以实现，openai 官方的 API 接口有个选项就是开启 stream 流式传输。具体可以问问 AI

[murmurkerman]

你是说渐变动画么，就一个简单的渐变 shader ，每个新增的文本加上一一个固定时间的动画就好了，就会实现一个渐显的动画。然后优化下动画性能。

[vace]

可以 F12 看源码，SSE 响应的字符，用 <span class="_fadeIn"> 包裹，通过 css 的 animation 和 keyframes 定义一个 700ms 的淡入动画。等整段响应完成，合并字符为段落。

[17681880207]

@concernedz
@thenxkk
@chairuosen #3
@chairuosen #4
@chenliangngng
@xiaoz
感谢各位老哥的答疑，可能我的表述不是很清楚，我想表达是的最新文字出来的渐显动画效果~😋

[learnshare]

处理过简单的效果。前端获取到大段内容，切分为多个片段（元素），再逐步通过显示。

其中细节也很多，比如：

+ 需要整段获取内容，防止 Markdown 渲染为 HTML 时的错乱
+ 需要根据内容长度，合理调整切片数量和长度，以及动画效果
+ 列表也需要有合适的滚动动作

[pdog18]

是不是可以尝试把你的这个问题问 ChatGPT

[lawted]

可以看下这个库： https://motion-primitives.com/docs/text-effect

[17681880207]

@lawted
感谢！！！！！我的老天鹅~

[linkopeneyes]

这个东西有的时候还挺麻烦的，sse 每次给的字数不是固定的，所以有的时候会一次性一大段，导致很陡，还需要写个工具处理文字输出