5行代碼帶你實現一個js的打字效果

前言

有次看電影🎬， 看到屏幕上一個個的文字蹦出來， 感受像是有人在打字同樣， 以爲挺有意思， 因而這裏也用js實現了一個。

項目體驗地址： 打字效果體驗

項目源碼地址： 源碼地址

效果預覽

最簡單的打字效果

只要五行代碼， 這裏直接貼出來：

const dom = document.querySelector('.content')
const data = '最簡單的打字效果代碼'.split('')
    let index = 0
    function writing(index) {
        if (index < data.length) {
            dom.innerHTML += data[index]
            setTimeout(writing.bind(this), 200, ++index)
        }
    }
複製代碼

是否是超級簡單， 如今只要執行這個函數， 你就能看到這樣的效果了：

實現原理：

經過setTimeout設置一個時間的間隔， 每隔必定時間向dom中插入對應的數據， 並將index加1， 而後從新調用這個寫函數。

在字的後面加上模擬的閃爍光標

思路：

經過一個僞類after將光標定在dom的最後面， 並給一個顯示隱藏的循環動畫模擬光標的閃爍

::after{
    content: '|';
    animation: blink 1s infinite
}
@keyframes blink{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
複製代碼

經過css3的animation咱們就實現了一個閃爍的光標效果。

實現：

咱們能夠把上面的代碼放在一個class中， 而後咱們執行writing時將這個class加到對應的dom中便可。

實現輸入漢字加拼音

這裏依賴一個插件pinyin， 你們能夠經過npm安裝

npm install pinyin
複製代碼

使用也很簡單，咱們只要把文本傳入這個插件的方法中， 返回的就是每一個漢字的拼音的數組。

import Pinyin from 'pinyin'
let data = '漢字'
let pinyinData = Pinyin(data)       //['han', 'zi']
複製代碼

而後咱們經過模板字符串注入到對應的文字後面便可：

this.content.innerHTML += `${arr[index]}<sup>(${pinyinData[index]})</sup>`
複製代碼

這樣就實現了加拼音的簡單效果了。

加動畫

加動畫的代碼也很簡單， 關鍵是思路。

我開始的想法是將每一個文字用span標籤包裹起來， 給每一個span加動畫便可。後來發現這樣行不通， 由於每次dom中的innerHTML實際上是從新渲染的， 那樣的話， 以前的span也會一直有動畫， 這不是咱們想要的效果。

解決方案：

給每一個span加個class實現動畫， 但在下個span渲染時清除以前span的class， 這樣就實現了只有當前的span有動畫了.

我這裏直接選擇了正則匹配粗暴的將class去掉。 你們也能夠尋找一種更好的方式解決。

代碼以下：

this.content.innerHTML = this.content.innerHTML.replace(/span-animation/g, '') + `<span class="span-animation">${arr[index]}</span>`
複製代碼

實現效果：

後話

這並不是最佳實踐， 只是偶然所想， 給各位道友提供個思路，拋磚引玉， O(∩_∩)O哈哈~