首页 > 其他分享> > 在 React 中创建动画打字效果

在 React 中创建动画打字效果

2022-09-12 10:01:51 作者：互联网

在 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