在 React 中创建动画打字效果

2022-09-12 10:01:51 阅读：254 来源： 互联网

标签：localTypingIndex 动画 TextTyper 短语间隔打字 React 文本我们

在 React 中创建动画打字效果

这背后的想法是，我们从状态渲染文本并保持一次更新一个字符的状态变量，但有一点延迟。

每次更新状态时，我们的组件都会重新渲染显示一个又一个字符“键入”的文本。

所以首先在我们的 React 应用程序中，我们将创建一个组件。让我们命名 文字打字机 .我们将需要有 使用状态 和 使用效果 挂钩，所以我们可以立即导入它们：

 从“反应”中导入反应，{ useState，useEffect }； 常量 TextTyper=() => {  
 const [typedText, setTypedText] = useState(""); 返回<span>{typedText}</span>  
 } 导出默认 TextTyper

在状态中，我们声明了一个变量 打字文本 在里面渲染 跨度 HTML 元素。这将是我们要更新的变量。

假设我们要打印“香蕉”。首先我们将渲染空字符串，然后我们将添加“B”到 打字文本 并在页面中看到它，然后我们将它更新为“Ba”，等等......

让我们创建一个函数 打字渲染 .它需要 3 个参数：要输入的整个短语，更新器方法，这将是我们的 设置类型文本 和一个间隔值来告诉函数渲染每个字符之间的延迟。

在这个函数中，我们将使用变量 本地打字索引 遍历传入字符串中字符的索引并一一获取。我们还将声明一个变量 本地打字 镜像应该处于状态的内容并在其中添加字母以说明状态：

 从“反应”中导入反应，{ useState，useEffect }； 常量 TextTyper=() => {  
 const [typedText, setTypedText] = useState(""); const typingRender =（文本，更新程序，间隔）=> {  
 // 用于遍历短语索引的本地计数器  
 让 localTypingIndex = 0;  
 // 要添加字符并放入状态的本地字符串  
 让 localTyping = "";  
 如果（文本）{  
 // 如果我们要输入一个短语，我们将开始间隔  
 让打印机 = setInterval(() => {  
 // 如果我们的本地索引计数器小于我们继续前进的短语的长度  
 if (localTypingIndex < text.length) {  
 // 我们设置为用短语声明我们的本地字符串  
 updater((localTyping += text[localTypingIndex]));  
 // 并增加本地索引  
 localTypingIndex += 1;  
 } 别的 {  
 // 一旦我们到达短语的结尾，我们重置本地索引  
 localTypingIndex = 0;  
 // 用短语清除本地字符串  
 localTyping = "";  
 // 清除停止的间隔  
 清除间隔（打印机）；  
 }  
 }， 间隔）;  
 }  
 }; 返回<span>{typedText}</span>  
 } 导出默认 TextTyper

现在我们有了打字功能，是时候执行它了。我们希望在最初渲染组件时发生一次，因此我们将使用 使用效果 具有空的依赖项数组：

 常量 TextTyper=() => {  
 const [typedText, setTypedText] = useState("");  
 // 声明保存短语的变量  
 const text = '这将是一个一个字符打印的短语'  
 // 声明一个间隔为 100 毫秒的变量  
 常数间隔 = 100  
 const typingRender =（文本，更新程序，间隔）=> {  
 让 localTypingIndex = 0;  
 让 localTyping = "";  
 如果（文本）{  
 让打印机 = setInterval(() => {  
 if (localTypingIndex < text.length) {  
 updater((localTyping += text[localTypingIndex]));  
 localTypingIndex += 1;  
 } 别的 {  
 localTypingIndex = 0;  
 localTyping = "";  
 清除间隔（打印机）；  
 }  
 }， 间隔）;  
 }  
 };  
 // 在第一次渲染时运行这个效果  
 使用效果（（）=> {  
 // 调用传递短语的函数，状态和间隔 var 的 setter 方法  
 打字渲染（文本，setTypedText，间隔）；  
 }, [文本, 间隔]); 返回<span>{typedText}</span>  
 } 导出默认 TextTyper

现在组件可以正常工作了，但我们可以让它更灵活，所以它工作的所有数据都将通过 props 来，我们甚至可以设置变量来控制我们想要在哪个 HTML 元素中呈现我们的短语：

 从“反应”中导入反应，{ useState，useEffect }； 常量 TextTyper=({  
 // 现在所需的短语、间隔和 HTML 元素将通过 props 来，我们在这里有一些默认值  
 文字=“”，  
 间隔 = 100，  
 标记=“跨度”  
 }) => {  
 const [typedText, setTypedText] = useState(""); const typingRender =（文本，更新程序，间隔）=> {  
 让 localTypingIndex = 0;  
 让 localTyping = "";  
 如果（文本）{  
 让打印机 = setInterval(() => {  
 if (localTypingIndex < text.length) {  
 updater((localTyping += text[localTypingIndex]));  
 localTypingIndex += 1;  
 } 别的 {  
 localTypingIndex = 0;  
 localTyping = "";  
 清除间隔（打印机）；  
 }  
 }， 间隔）;  
 }  
 };  
 使用效果（（）=> {  
 打字渲染（文本，setTypedText，间隔）；  
 }, [文本, 间隔]); 返回<Markup>{typedText}</Markup>  
 } 导出默认 TextTyper

所以现在如果我们想使用它，我们可以导入组件并通过传递一些道具来渲染它：

 // 在 App.js 中导入我们的组件  
 从 './TextTyper' 导入 TextTyper 函数应用程序（）{  
 const textToRender = '这将是一个一个字符打印的短语'  
 返回 （  
 <div className="App">  
 {/* 渲染它通过 */}  
 <TextTyper text={textToRender} interval={10} Markup={"code"} />  
 </div>  
 );  
 } 导出默认应用程序；

这是工作代码的链接沙盒 .

你也可以安装和导入这个组件和 npm 或者 纱

本文链接：https://www.qanswer.top/30420/50411209

标签：localTypingIndex,动画,TextTyper,短语,间隔,打字,React,文本,我们
来源： https://www.cnblogs.com/amboke/p/16685550.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

在 React 中创建动画打字效果

在 React 中创建动画打字效果