深入WordPress預(yù)覽加載動(dòng)畫

WordPress在5.0版本中引入了塊編輯器（又名Gutenberg），隨之而來(lái)的是一個(gè)漂亮的新的文章預(yù)覽屏幕，顯示W(wǎng)ordPress徽標(biāo)在預(yù)覽加載時(shí)自行繪制。

這就是保存文章草稿并在編輯器中點(diǎn)擊“預(yù)覽”按鈕時(shí)看到的畫面。他們是如何實(shí)現(xiàn)的呢？我很難查看頁(yè)面的源代碼，因?yàn)轭A(yù)覽加載速度很快，但我確實(shí)看到了SVG被用于WordPress徽標(biāo)。這正是我所需要的，因?yàn)槲业哪X海中立刻回想起Chris在2014年寫的一篇文章，該文章使用stroke-dasharray和stroke-dashoffset屬性來(lái)創(chuàng)建相同的效果。

這是Chris在那篇文章中分享的示例：

[CodePen鏈接](See the Pen bGyoz by Chris Coyier (@chriscoyier) on CodePen.)

此后，我已經(jīng)能夠獲得CSS代碼來(lái)確認(rèn)WordPress繪圖確實(shí)使用了相同的技術(shù)，但我將分享我在嘗試反向工程時(shí)是如何分解問(wèn)題的。

我們正在使用內(nèi)聯(lián)SVG

WordPress版本的一個(gè)巧妙之處在于我們使用了兩個(gè)SVG路徑而不是一個(gè)。這意味著我們有兩個(gè)似乎同時(shí)繪制的部分。以下是內(nèi)聯(lián)在HTML中的SVG。我們還有“正在生成預(yù)覽”文本，它可以位于SVG外部。

<svg aria-hidden="true" focusable="false" role="img" viewbox="0 0 96 96" xmlns="http://www.w3.org/2000/svg"><path d="M48 12c19.9 0 36 16.1 36 36S67.9 84 48 84 12 67.9 12 48s16.1-36 36-36" fill="none"></path><path d="M69.5 46.4c0-3.9-1.4-6.7-2.6-8.8-1.6-2.6-3.1-4.9-3.1-7.5 0-2.9 2.2-5.7 5.4-5.7h.4C63.9 19.2 56.4 16 48 16c-11.2 0-21 5.7-26.7 14.4h2.1c3.3 0 8.5-.4 8.5-.4 1.7-.1 1.9 2.4.2 2.6 0 0-1.7.2-3.7.3L40 67.5l7-20.9L42 33c-1.7-.1-3.3-.3-3.3-.3-1.7-.1-1.5-2.7.2-2.6 0 0 5.3.4 8.4.4 3.3 0 8.5-.4 8.5-.4 1.7-.1 1.9 2.4.2 2.6 0 0-1.7.2-3.7.3l11.5 34.3 3.3-10.4c1.6-4.5 2.4-7.8 2.4-10.5zM16.1 48c0 12.6 7.3 23.5 18 28.7L18.8 35c-1.7 4-2.7 8.4-2.7 13zm32.5 2.8L39 78.6c2.9.8 5.9 1.3 9 1.3 3.7 0 7.3-.6 10.6-1.8-.1-.1-.2-.3-.2-.4l-9.8-26.9zM76.2 36c0 3.2-.6 6.9-2.4 11.4L64 75.6c9.5-5.5 15.9-15.8 15.9-27.6 0-5.5-1.4-10.8-3.9-15.3.1 1 .2 2.1.2 3.3z" fill="none"></path></svg><p>Generating preview...</p>

第一個(gè)路徑是一個(gè)橢圓，作為第二個(gè)路徑的邊界，第二個(gè)路徑是WordPress徽標(biāo)的形狀。最好為每個(gè)路徑賦予一個(gè)類——特別是如果這不是頁(yè)面上的唯一元素——但我決定不使用類，因?yàn)檫@是演示中的唯一元素。在這種情況下，我們可以使用CSS選擇這兩個(gè)路徑，或者使用偽選擇器（例如path:nth-child(2)）分別選擇它們。

還有一些其他的輔助操作。例如，SVG獲得屬性以使其更易于訪問(wèn)，例如將其標(biāo)識(shí)為圖像，將其隱藏在屏幕閱讀器之外，并防止其被聚焦。

我們需要稍微設(shè)置一下SVG樣式

非常非常簡(jiǎn)單的樣式。我們需要一個(gè)描邊，因?yàn)槁窂缴蠜]有填充顏色。否則我們將看到很多空白。好吧，是一個(gè)不可見的形狀，但本質(zhì)上是沒有任何東西。

svg {
  stroke: #555;
  stroke-width: 0.5;
  width: 250px;
}

這給了我們兩個(gè)路徑的輪廓。stroke-width屬性的好處在于它接受十進(jìn)制值，因此我們可以使線條更細(xì)一些。這樣繪制看起來(lái)就像是用鉛筆畫的一樣。

這里的寬度是相當(dāng)任意的，但它很重要，因?yàn)槲覀儗⑹褂玫?code>stroke-dasharray和stroke-dashoffset屬性依賴于它。如果這些屬性值小于SVG的大小，則繪制將停止完成。如果它太大，則繪制速度會(huì)太快。

現(xiàn)在我們知道了寬度并且可以看到路徑描邊，我們可以相應(yīng)地設(shè)置stroke-dasharray和stroke-dashoffset。

svg path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}

比SVG略大，并且破折號(hào)之間有很大的空間，這應(yīng)該差不多合適?？梢哉{(diào)整這些值以根據(jù)您的喜好調(diào)整動(dòng)畫。

其余的只是使用Chris的技術(shù)

繪制是一個(gè)使用一個(gè)關(guān)鍵幀的CSS動(dòng)畫。如果我們將stroke-dashoffset從零開始，則路徑在初始加載時(shí)將不可見，并在動(dòng)畫達(dá)到100%時(shí)增長(zhǎng)到我們之前設(shè)置的300值。同樣，我們將偏移量設(shè)置為300，以便描邊破折號(hào)及其之間的空間將擴(kuò)展到SVG之外以覆蓋整個(gè)內(nèi)容。

所有魔法都只是五行代碼：

@keyframes draw {
  0% {
    stroke-dashoffset: 0;
  }
}

將動(dòng)畫命名為您喜歡的任何名稱。我們可以只在0%定義動(dòng)畫，因?yàn)?00%是隱式的。

哦！我們還必須將動(dòng)畫附加到路徑，所以：

svg path {
  animation: draw 2s ease-out infinite alternate;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}

您也可以調(diào)整這些值來(lái)加快或減慢速度。緩動(dòng)效果使動(dòng)畫具有輕微的脈沖效果，其中開始和結(jié)束的速度比運(yùn)動(dòng)的中間部分慢一些。

現(xiàn)在全部放在一起！

我之前提到過(guò)，但我最終能夠從實(shí)際實(shí)現(xiàn)中獲取源代碼，它非常接近，使用了相同的原理。

以上是挖掘WordPress中的預(yù)覽加載動(dòng)畫的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！