中文字幕av高清_国产视频一二区_男女羞羞羞视频午夜视频_成人精品一区_欧美色视_在线视频这里只有精品

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 從React中的短語列表中鍵入動畫

從React中的短語列表中鍵入動畫

來源:千鋒教育
發布人:syq
時間: 2022-09-22 13:24:30 1663824270

  你一定看過所有這些很酷的動畫,其中單詞只是在頁面上自動鍵入? 有沒有想過在 React 中是如何完成的?

從React中的短語列表中鍵入動畫

在這里,我將逐步指導您制作具有附加功能的打字動畫,其中每2秒隨機選擇一個短語并鍵入它。

從 React 中的短語列表中鍵入動畫95

  先決條件

  React 鉤子的基本知識,如使用狀態和使用效果。

  步驟1

  在組件中導入要播放動畫的掛鉤。在這里,我們將使用使用狀態和使用效果鉤子。

從 React 中的短語列表中鍵入動畫169

  第 2 步

  我們需要一個數組來存儲我們想要使用的短語,如下所示:

從 React 中的短語列表中鍵入動畫204

  然后,我們將需要一些狀態,它們是:

  文本:頁面上顯示的當前文本

  全文:我們希望看到的最終文本

  索引:這是頁面上顯示的字符的當前索引。

從 React 中的短語列表中鍵入動畫273

  第 3 步

  現在我們需要編寫鍵入動畫邏輯。

  邏輯:隨著索引的增加,我們將 fullText 狀態的下一個字符添加到文本狀態中,最終顯示在我們的頁面上。

  我們希望每200毫秒增加一次索引,所以我們可以使用超時函數(內置于JS中)來實現,這將像這樣實現:

從 React 中的短語列表中鍵入動畫401

  步驟4

  需要使用使用效果掛鉤,每次索引值更改時調用 timeOut 函數。

  因此,在繼續制作動畫之前,我們會檢查索引是否小于全文的長度。如果索引超過長度,則無需進一步動畫,因為我們的 fullText 已經顯示。

從 React 中的短語列表中鍵入動畫510

  步驟5

  更改全文以從我們的文本列表數組中隨機選擇一個短語。

  只有當索引超過全文的長度時,才會發生這種情況(因為只有這樣,才會顯示以前的全文)。所以這將是另一個條件。

  在這里,我們需要 textList 的長度,以便為 fullText 選擇一個介于 0 和 l 之間的隨機索引。

從 React 中的短語列表中鍵入動畫652

  現在,需要做些什么來隨機選擇一個新短語,每2秒?

  我們需要將文本狀態的值更改為空 (“ ”)

  我們需要將全文的值更改為文本列表的隨機索引位置。

  我們需要將索引設置為 0,以便它從 fullText 的初始位置開始。

  我們需要將所有這些放在一個超時函數中,該函數每2秒觸發一次

從 React 中的短語列表中鍵入動畫792

  將步驟 5 代碼放在您在步驟 4 中創建的 useEffect 掛鉤的 else 條件中。

從 React 中的短語列表中鍵入動畫840

  步驟6

  將文本呈現在您希望顯示的位置:

從 React 中的短語列表中鍵入動畫862

  最終代碼:

從 React 中的短語列表中鍵入動畫870

  瞧!有你很酷的打字動畫。

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT
主站蜘蛛池模板: 国产女人和拘做受视频 | 国产亚洲精品久久 | 三级av网站| 日韩精品一区二区三区第95 | 久久久久成人网 | 久久国产精品视频 | 日韩精品一区二区三区中文在线 | 精品久久99| 国产va| 国产一区二区三区不卡在线观看 | 欧美一区二区成人 | 久久精品欧美一区二区三区不卡 | 亚洲在线免费观看 | 精品一区二区久久久久久久网站 | 99re6热在线精品视频播放 | 午夜视频| 亚洲一区二区视频在线 | 九九九九精品九九九九 | av不卡一区二区 | 国产精品毛片无码 | 国产一区二区三区久久久 | 香蕉大人久久国产成人av | 伊人网国产 | 国产精品欧美一区二区三区不卡 | 爱爱日韩 | 欧美国产精品一区 | 日本三级在线视频 | 国产激情在线 | 成人在线观看亚洲 | 亚洲精品一区二区网址 | 欧美成人一区二区 | 国产女人和拘做受在线视频 | 超碰综合 | 亚洲第一国产视频 | 久久精品一区二区三区四区 | 成人免费视频观看视频 | 精品欧美一二三区 | 国产精品视频免费观看 | 日韩在线播放一区 | 在线日本中文字幕 | 超碰人人精品 |