自小我就被變形效果所吸引。形狀變化的動(dòng)畫總能抓住我的注意力。第一次看到變形效果讓我不禁疑惑“哇，他們是怎么做到的？”從那時(shí)起，我就創(chuàng)建了演示程序并撰寫了一篇關(guān)于這種效果的文章。

在支持變形的不同動(dòng)畫庫(kù)方面，有很多選擇。它們中的許多都很好，并提供了許多功能。最近，我迷上了react-spring。React-spring是一個(gè)基于React構(gòu)建的簡(jiǎn)潔的物理動(dòng)畫庫(kù)。Adam Rackis最近發(fā)布了一個(gè)不錯(cuò)的概述。該庫(kù)具有許多功能，包括（以及許多其他功能）SVG變形。事實(shí)上，react-spring的美妙之處在于它如何支持變形。它允許您直接在定義SVG路徑描述符的標(biāo)記中進(jìn)行變形。從簿記的角度來看，這是很好的。SVG路徑描述符通常位于您預(yù)期它們所在的位置。

以下是本文探討內(nèi)容的視頻：

這是一個(gè)入職序列中的變形效果。在這里，它用作背景效果。它旨在補(bǔ)充前景動(dòng)畫；使其更突出，而不是占據(jù)場(chǎng)景。

創(chuàng)建SVG文檔

我們要做的第一件事是創(chuàng)建底層模型。通常，一旦我對(duì)我想做什么有了清晰的認(rèn)識(shí)，我就會(huì)創(chuàng)建某種設(shè)計(jì)。我的大多數(shù)探索都始于模型，并以演示結(jié)束。在大多數(shù)情況下，這意味著在我的矢量編輯器中創(chuàng)建一個(gè)SVG文檔。我使用Inkscape繪制我的SVG。

創(chuàng)建SVG文檔時(shí)，我使用精確的比例。我發(fā)現(xiàn)精確一點(diǎn)更好。對(duì)我來說，當(dāng)我使用與瀏覽器和代碼編輯器中相同的坐標(biāo)系時(shí)，它有助于我感知我想創(chuàng)建的內(nèi)容。例如，假設(shè)您即將創(chuàng)建一個(gè)24px ? 30px的SVG圖標(biāo)，包括填充。最好的方法是使用完全相同的尺寸——一個(gè)寬24像素，高30像素的SVG文檔。如果比例結(jié)果不正確，則可以隨時(shí)稍后調(diào)整。從這個(gè)意義上說，SVG是寬容的。它是可縮放的，無論你做什么。

我們創(chuàng)建的SVG文檔寬度為256像素，高度為464像素。

繪制模型

創(chuàng)建模型時(shí)，我們需要考慮放置節(jié)點(diǎn)的位置以及使用多少個(gè)節(jié)點(diǎn)。這很重要。這是我們?yōu)閯?dòng)畫奠定基礎(chǔ)的地方。建模就是變形的全部?jī)?nèi)容。我們有一組節(jié)點(diǎn)轉(zhuǎn)換為另一組節(jié)點(diǎn)。這些節(jié)點(diǎn)集合必須具有完全相同的節(jié)點(diǎn)數(shù)。其次，這些集合應(yīng)該以某種方式相關(guān)聯(lián)。

如果矢量形狀之間的關(guān)系沒有經(jīng)過仔細(xì)考慮，動(dòng)畫將不完美。每個(gè)節(jié)點(diǎn)都會(huì)影響動(dòng)畫。它們的位置和曲率必須恰到好處。有關(guān)SVG路徑中節(jié)點(diǎn)構(gòu)造方式的更多詳細(xì)信息，請(qǐng)參閱MDN上貝塞爾曲線的解釋。

其次，我們需要同時(shí)考慮兩種形狀。其中一個(gè)向量可能包含在另一個(gè)向量中找不到的部分。或者，兩個(gè)模型之間可能存在其他差異。對(duì)于這些情況，最好在某些地方插入額外的節(jié)點(diǎn)。最好制定策略。例如，這個(gè)角在那里，這條直線膨脹成曲線等等。

我整理了一個(gè)筆來說明當(dāng)集合相關(guān)性差與準(zhǔn)確設(shè)計(jì)時(shí)的情況。在下面的示例中，左側(cè)的變形效果中的節(jié)點(diǎn)是隨機(jī)放置的。構(gòu)成數(shù)字一和二的節(jié)點(diǎn)沒有關(guān)系。在正確的示例中，節(jié)點(diǎn)的放置計(jì)劃更仔細(xì)。這帶來了更連貫的體驗(yàn)。

第一個(gè)模型

線條工具是我們用來繪制第一個(gè)矢量形狀的工具。由于我們創(chuàng)建的模型更抽象，因此它稍微寬容一些。我們?nèi)匀恍枰紤]位置和曲率，但這允許更大的隨意性。

至于向量和大小，創(chuàng)建變形模型也是如此。這是一個(gè)迭代過程。如果第一次不正確，我們總是可以返回并進(jìn)行調(diào)整。通常需要一到兩次迭代才能使動(dòng)畫閃耀。以下是完成后的模型外觀。

結(jié)果是一個(gè)具有八個(gè)節(jié)點(diǎn)的平滑抽象SVG形狀。

第二和第三個(gè)模型

第一個(gè)模型完成后，就可以繪制第二個(gè)模型（我們也可以將其視為狀態(tài)）。這是第一組將變形到的形狀。這可能是最終狀態(tài)，即單個(gè)變形效果?；蛘咚赡苁茄赝镜囊徊?，就像一個(gè)關(guān)鍵幀。在我們正在查看的情況下，有三個(gè)步驟。同樣，每個(gè)模型都必須與前一個(gè)模型相關(guān)聯(lián)。確保模型匹配的一種方法是將第二個(gè)向量創(chuàng)建為第一個(gè)向量的副本。這樣，我們就知道模型具有相同的節(jié)點(diǎn)數(shù)以及相同的外觀和感覺。

小心編輯器。矢量編輯器通常針對(duì)文件大小和格式進(jìn)行優(yōu)化。保存更改時(shí)，它很可能會(huì)使模型不兼容。我已經(jīng)養(yǎng)成在保存文件后檢查SVG代碼的習(xí)慣。如果您熟悉路徑描述符格式，這也有幫助。如果您不習(xí)慣它，它有點(diǎn)神秘。在矢量編輯器的首選項(xiàng)中禁用優(yōu)化也是一個(gè)好主意。

對(duì)第三個(gè)形狀重復(fù)上述過程。復(fù)制、重新定位所有節(jié)點(diǎn)并設(shè)置第三種顏色。

燈光、攝像機(jī)……動(dòng)作!

創(chuàng)建模型后，我們完成了大部分工作?，F(xiàn)在是時(shí)候查看動(dòng)畫部分了。React-spring帶有一組我們可以用于動(dòng)畫和變形的鉤子。useSpring是此示例中效果的理想選擇。它旨在用于像我們正在創(chuàng)建的這樣的單個(gè)動(dòng)畫。以下是使用useSpring鉤子啟動(dòng)動(dòng)畫的方法。

<code>const [{ x }, set] = useSpring(() => ({
? x: 0,
}));</code>

以上為我們提供了一個(gè)動(dòng)畫屬性x，圍繞它構(gòu)建我們的變形效果。這些動(dòng)畫屬性的一大優(yōu)點(diǎn)是我們可以更改它們來創(chuàng)建幾乎任何類型的動(dòng)畫。如果值不正確，我們可以通過插值來更改它。

第二個(gè)參數(shù)，set函數(shù)，允許我們觸發(fā)更新。下面是一段代碼片段，展示了它的用法。它使用來自react-use-gesture庫(kù)的手勢(shì)處理程序useDrag更新動(dòng)畫值x。我們可以在react-spring中觸發(fā)動(dòng)畫的方式有很多。

<code>const bind = useDrag(
? ({ movement: [x] }) => {
? ? // ...
? ? set({ x });
? },
);</code>

我們現(xiàn)在已經(jīng)準(zhǔn)備好將我們的模型（路徑描述符）與標(biāo)記組合起來。通過將animated關(guān)鍵字添加到JSX代碼中，我們激活了react-spring的動(dòng)畫系統(tǒng)。通過對(duì)先前命名的interpolate進(jìn)行插值調(diào)用，我們將拖動(dòng)距離轉(zhuǎn)換為變形形狀。輸出數(shù)組包含前面討論過的模型。為了將它們放在適當(dāng)?shù)奈恢?，我們只需將路徑描述符從SVG文件復(fù)制到標(biāo)記中?，F(xiàn)在，三個(gè)不同的描述符d，來自三個(gè)不同的路徑元素，從三個(gè)不同的SVG文件復(fù)制，組合成一個(gè)。以下是使用react-spring動(dòng)畫驅(qū)動(dòng)的JSX節(jié)點(diǎn)的外觀。

<code><svg ...="">
? <animated.path c="" d="{x.to({" first="" model="" output:="" range:="" second="" third="" z=""></animated.path></svg></code>

讓我們看看標(biāo)準(zhǔn)JSX路徑元素與我們當(dāng)前擁有的元素之間的區(qū)別。為了獲得變形動(dòng)畫，我們有：

• 添加了animated關(guān)鍵字以使JSX路徑元素與React spring一起動(dòng)畫，
• 將描述符d從字符串更改為React spring插值，以及
• 將距離x轉(zhuǎn)換為三個(gè)路徑描述符之間的關(guān)鍵幀動(dòng)畫。

開發(fā)環(huán)境

我還沒有找到用于處理SVG的完美開發(fā)環(huán)境。目前，我在矢量編輯器、IDE和瀏覽器之間來回切換。涉及一些復(fù)制和一些冗余。它并不完美，但它有效。我過去曾嘗試過解析SVG的腳本。我仍然沒有找到可以應(yīng)用于所有場(chǎng)景的東西。也許只是我做錯(cuò)了。如果不是，如果使用SVG的Web開發(fā)能夠更無縫一些，那就太好了。

我們開始吧！

最后但并非最不重要的是，演示！

感謝您的閱讀！

以上是用反應(yīng)彈簧變形SVG的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！