【動畫進階】類 ChatGpt 多行文本打字效果

今天我們來學習一個有意思的多行文本輸入打字效果，像是這樣：這個效果其實本身並非特別困難，實現的方式也很多，在本文中，我們更多的會聚焦於整個多行打字效果最後的動態游標的實現。也就是如何在文本不斷變長，在不確定行數的情況下，讓文字的最末行右側處，一直有一個不斷閃爍的游標效果：單行文本打字效果在此 ...

今天我們來學習一個有意思的多行文本輸入打字效果，像是這樣：

這個效果其實本身並非特別困難，實現的方式也很多，在本文中，我們更多的會聚焦於整個多行打字效果最後的動態游標的實現。

也就是如何在文本不斷變長，在不確定行數的情況下，讓文字的最末行右側處，一直有一個不斷閃爍的游標效果：

單行文本打字效果

在此之前，我們快速看一個之前在【Web動畫】科技感十足的暗黑字元雨動畫分享過的，非常簡單的單行打字效果動畫。

在這裡的單行打字效果，其核心就是就是讓字元一個一個的出現，像是這樣：

這裡藉助了 animation 的 steps 的特性實現，也就是逐幀動畫。

從左向右和從上向下原理是一樣的，以從左向右為例，假設我們有 26 個英文字元，我們已知 26 個英文字元組成的字元串的長度，那麼我們只需要設定一個動畫，讓它的寬度變化從 0 - 100% 經歷 26 幀即可，配合 overflow: hidden，steps 的每一幀即可展出一個字元。

當然，這裡需要利用一些小技巧，我們如何通過字元的數量知道字元串的長度呢？

劃重點：通過等寬字體的特性，配合 CSS 中的 ch 單位。

如果不瞭解什麼是等寬字體族，可以看看我的這篇文章 -- 《你該知道的字體 font-family》。

CSS 中，ch 單位表示數字 “0” 的寬度。如果字體恰巧又是等寬字體，即每個字元的寬度是一樣的，此時 ch 就能變成每個英文字元的寬度，那麼 26ch 其實也就是整個字元串的長度。

利用這個特性，配合 animation 的 steps，我們可以輕鬆的利用 CSS 實現打字動畫效果：

<h1>Pure CSS Typing animation.</h1>

h1 {
    font-family: monospace;
    width: 26ch;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 3s steps(26, end);
}

@keyframes typing {
    0{
        width: 0;
    }
    100% {
        width: 26ch;
     }
}

就可以得到如下結果啦：

完整的代碼你可以戳這裡：

CodePen Demo -- 純 CSS 實現文字輸入效果

上述單行文本打字效果局限

當然，上述效果一開始已經寫死了最終的文本。這一塊，我們實際中可能是通過 Javascript 不斷的賦值新內容。

不過，即便去除掉文本內容生成的方式這個因素，上述看似美好的動畫效果，還有幾個弊端。

限制了等寬字體，這其實就是非常大的一個問題，正常的頁面，其實用的肯定都不是等寬字體，常見的襯線與非襯線字體，都不是等寬字體。
限制了單行文本，實際效果，類似於 GPT 吐答案這種，單行內容肯定是無法滿足的，我們需要有一種游標效果能適配多行文本的方式。

巧用 background 實現多行游標效果

好，那接下來，我們嘗試換一種思路實現一個適配單行和多行的文本打字效果。

首先，我們將文本內容的生成，替換成使用 Javascript 生成：

<p id="content"></p>

const text = 'Lorem ipsum dolor sit amet consectetur adipisicing elit......';
const contentElement = document.getElementById('content');
let index = 0;

function addNextCharacter() {
  if (index < text.length) {
    contentElement.textContent += text[index];
    index++;
    setTimeout(addNextCharacter, Math.random() * 150 + 30);
  }
}

addNextCharacter();

效果如下：

接下來，我們核心需要實現的就是任意行數下動態游標的效果。

也就是最開始的這個效果，文字最後的游標效果：

讀到這裡，暫停 10 秒，思考一下如果讓你來實現，會用什麼方式實現？能用什麼方式實現？有沒有低成本快速能實現的奇技淫巧？

這裡，我們可以使用行內元素的 background 漸變實現。

複習一下，之前我們講過很多次是 background 在display: inline 和 display: block 下的不同表現。

其核心現象就是 display: inline 內聯元素的 background 展現形式與 display: block 塊級元素（或者 inline-block、flex、grid）不一致。

簡單看個例子：

<p>Lorem .....</p>
<a>Lorem .....</a>

這裡需要註意，<p> 元素是塊級元素，而 <a> 是內聯元素。

我們給它們統一添加上一個從綠色到藍色的漸變背景色：

p, a {
  background: linear-gradient(90deg, blue, green);
}

看看效果：

什麼意思呢？區別很明顯，塊級元素的背景整體是一個漸變整體，而內聯元素的每一行都是會有不一樣的效果，整體連起來串聯成一個整體。

基於上述的 Demo，我們可以給它們添加一個 background-size 的動畫。像是這樣：

<p>Lorem .....</p>
<a>Lorem .....</a>

p, a {
    color: #000;
    background: linear-gradient(90deg, blue, green);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: all 1s linear;
}

p:hover ,
a:hover {
    background-size: 0 100%;
}

效果如下：

完整代碼戳這裡：CodePen Demo -- background & display Animation DEMO

就可以得到這樣不同的動畫，可以看到，在 display: inline 的 <a> 標簽下，動畫效果是以行為單位進行變換的。

針對這個特性，我們將我們的文本容器，改為 display: inline，然後給他設置一個特殊的背景，前 100% - 2px 寬度為一個顏色，最後 2px 為一個顏色。

我們繼續改造一下我們上述的 DEMO：

<p id="content"></p>

p {
    display: inline;
    background: linear-gradient(90deg, #fc0, #fc0 calc(100% - 2px), #f00 calc(100% - 2px), #f00);
}

其中核心的背景代碼 background: linear-gradient(90deg, #fc0, #fc0 calc(100% - 2px), #f00 calc(100% - 2px), #f00) 表達的含義就是前 100% - 2px 寬度為橙色，最後 2px 為紅色。

看看，此時整個的效果：

好好理解一下：

基於上述這個效果：

我們只需要把前 100% - 2px 寬度的橙色，設置為透明
最後 2px 的紅色，設置成 #000 黑色到 transparent 透明的動態變化

完整的 CSS 代碼如下：

:root {
    --pointerColor: #000;
}
p {
    display: inline;
    background: linear-gradient(90deg, transparent, transparent calc(100% - 2px), var(--pointerColor) calc(100% - 2px), var(--pointerColor));
    animation: colorChange .8s linear infinite;
    padding-right: 4px;
}
@keyframes colorChange {
    0%, 50% {
        --pointerColor: #000;
    }
    50%, 100% {
        --pointerColor: transparent;
    }
}

如此一來，我們就成功的實現了任意行數下動態游標的效果。得到了最初的完整效果：