用反應彈簧變形SVG

自小我就被變形效果所吸引。形狀變化的動畫總能抓住我的注意力。第一次看到變形效果讓我不禁疑惑“哇，他們是怎麼做到的？”從那時起，我就創建了演示程序並撰寫了一篇關於這種效果的文章。

在支持變形的不同動畫庫方面，有很多選擇。它們中的許多都很好，並提供了許多功能。最近，我迷上了react-spring。 React-spring是一個基於React構建的簡潔的物理動畫庫。 Adam Rackis最近發布了一個不錯的概述。該庫具有許多功能，包括（以及許多其他功能）SVG變形。事實上，react-spring的美妙之處在於它如何支持變形。它允許您直接在定義SVG路徑描述符的標記中進行變形。從簿記的角度來看，這是很好的。 SVG路徑描述符通常位於您預期它們所在的位置。

以下是本文探討內容的視頻：

這是一個入職序列中的變形效果。在這裡，它用作背景效果。它旨在補充前景動畫；使其更突出，而不是佔據場景。

創建SVG文檔

我們要做的第一件事是創建底層模型。通常，一旦我對我想做什麼有了清晰的認識，我就會創建某種設計。我的大多數探索都始於模型，並以演示結束。在大多數情況下，這意味著在我的矢量編輯器中創建一個SVG文檔。我使用Inkscape繪製我的SVG。

創建SVG文檔時，我使用精確的比例。我發現精確一點更好。對我來說，當我使用與瀏覽器和代碼編輯器中相同的坐標係時，它有助於我感知我想創建的內容。例如，假設您即將創建一個24px ✕ 30px的SVG圖標，包括填充。最好的方法是使用完全相同的尺寸——一個寬24像素，高30像素的SVG文檔。如果比例結果不正確，則可以隨時稍後調整。從這個意義上說，SVG是寬容的。它是可縮放的，無論你做什麼。

我們創建的SVG文檔寬度為256像素，高度為464像素。

繪製模型

創建模型時，我們需要考慮放置節點的位置以及使用多少個節點。這很重要。這是我們為動畫奠定基礎的地方。建模就是變形的全部內容。我們有一組節點轉換為另一組節點。這些節點集合必須具有完全相同的節點數。其次，這些集合應該以某種方式相關聯。

如果矢量形狀之間的關係沒有經過仔細考慮，動畫將不完美。每個節點都會影響動畫。它們的位置和曲率必須恰到好處。有關SVG路徑中節點構造方式的更多詳細信息，請參閱MDN上貝塞爾曲線的解釋。

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

我整理了一個筆來說明當集合相關性差與準確設計時的情況。在下面的示例中，左側的變形效果中的節點是隨機放置的。構成數字一和二的節點沒有關係。在正確的示例中，節點的放置計劃更仔細。這帶來了更連貫的體驗。

第一個模型

線條工具是我們用來繪製第一個矢量形狀的工具。由於我們創建的模型更抽象，因此它稍微寬容一些。我們仍然需要考慮位置和曲率，但這允許更大的隨意性。

至於向量和大小，創建變形模型也是如此。這是一個迭代過程。如果第一次不正確，我們總是可以返回並進行調整。通常需要一到兩次迭代才能使動畫閃耀。以下是完成後的模型外觀。

結果是一個具有八個節點的平滑抽象SVG形狀。

第二和第三個模型

第一個模型完成後，就可以繪製第二個模型（我們也可以將其視為狀態）。這是第一組將變形到的形狀。這可能是最終狀態，即單個變形效果。或者它可能是沿途的一步，就像一個關鍵幀。在我們正在查看的情況下，有三個步驟。同樣，每個模型都必須與前一個模型相關聯。確保模型匹配的一種方法是將第二個向量創建為第一個向量的副本。這樣，我們就知道模型具有相同的節點數以及相同的外觀和感覺。

小心編輯器。矢量編輯器通常針對文件大小和格式進行優化。保存更改時，它很可能會使模型不兼容。我已經養成在保存文件後檢查SVG代碼的習慣。如果您熟悉路徑描述符格式，這也有幫助。如果您不習慣它，它有點神秘。在矢量編輯器的首選項中禁用優化也是一個好主意。

對第三個形狀重複上述過程。複製、重新定位所有節點並設置第三種顏色。

燈光、攝像機……動作!

創建模型後，我們完成了大部分工作。現在是時候查看動畫部分了。 React-spring帶有一組我們可以用於動畫和變形的鉤子。 useSpring是此示例中效果的理想選擇。它旨在用於像我們正在創建的這樣的單個動畫。以下是使用useSpring鉤子啟動動畫的方法。

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

以上為我們提供了一個動畫屬性x，圍繞它構建我們的變形效果。這些動畫屬性的一大優點是我們可以更改它們來創建幾乎任何類型的動畫。如果值不正確，我們可以通過插值來更改它。

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

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

我們現在已經準備好將我們的模型（路徑描述符）與標記組合起來。通過將animated關鍵字添加到JSX代碼中，我們激活了react-spring的動畫系統。通過對先前命名的interpolate進行插值調用，我們將拖動距離轉換為變形形狀。輸出數組包含前面討論過的模型。為了將它們放在適當的位置，我們只需將路徑描述符從SVG文件複製到標記中。現在，三個不同的描述符d，來自三個不同的路徑元素，從三個不同的SVG文件複製，組合成一個。以下是使用react-spring動畫驅動的JSX節點的外觀。

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

讓我們看看標準JSX路徑元素與我們當前擁有的元素之間的區別。為了獲得變形動畫，我們有：

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

開發環境

我還沒有找到用於處理SVG的完美開發環境。目前，我在矢量編輯器、IDE和瀏覽器之間來回切換。涉及一些複製和一些冗餘。它並不完美，但它有效。我過去曾嘗試過解析SVG的腳本。我仍然沒有找到可以應用於所有場景的東西。也許只是我做錯了。如果不是，如果使用SVG的Web開發能夠更無縫一些，那就太好了。

我們開始吧！

最後但並非最不重要的是，演示！

感謝您的閱讀！

以上是用反應彈簧變形SVG的詳細內容。更多資訊請關注PHP中文網其他相關文章！