使用 MacSVG 建立 SVG 動畫

開源 SVG：牆上的魔法字。

新巴比倫的攝政王伯沙撒沒有注意到他在盛宴期間神奇地書寫在牆上的文字。但是，如果他在公元前 539 年有一臺膝上型電腦和良好的網際網路連線，他可能會透過在瀏覽器上閱讀 SVG 來避開那些討厭的波斯人。

出現在網頁上的動畫文字和物件是建立使用者興趣和參與度的好方法。有幾種方法可以實現這一點，例如影片嵌入、動畫 GIF 或幻燈片 —— 但你也可以使用可縮放向量圖形（SVG）。

SVG 影像與 JPG 不同，因為它可以縮放而不會丟失其解析度。向量影像是由點而不是畫素建立的，所以無論它放大到多大，它都不會失去解析度或畫素化。充分利用可縮放的靜態影像的一個例子是網站的徽標。

動起來，動起來

你可以使用多種繪圖程式建立 SVG 影像，包括開源的 Inkscape 和 Adobe Illustrator。讓你的影像“能動起來”需要更多的努力。幸運的是，有一些開源解決方案甚至可以引起伯沙撒的注意。

MacSVG 是一款可以讓你的影像動起來的工具。你可以在 GitHub 上找到原始碼。

根據其官網說，MacSVG 由阿肯色州康威的 Douglas Ward 開發，是一個“用於設計 HTML5 SVG 藝術和動畫的開源 Mac OS 應用程式”。

我想使用 MacSVG 來建立一個動畫簽名。我承認我發現這個過程有點令人困惑，並且在我第一次嘗試建立一個實際的動畫 SVG 影像時失敗了。

重要的是首先要了解要展示的書法內容實際寫的是什麼。

動畫文字背後的屬性是 stroke-dasharray。將該術語分成三個單詞有助於解釋正在發生的事情：“stroke” 是指用筆（無論是物理的筆還是數字化筆）製作的線條或筆畫。“dash” 意味著將筆劃分解為一系列折線。“array” 意味著將整個東西生成為陣列。這是一個簡單的概述，但它可以幫助我理解應該發生什麼以及為什麼。

使用 MacSVG，你可以匯入圖形（.PNG）並使用鋼筆工具描繪書寫路徑。我使用了草書來表示我的名字。然後，只需應用該屬性來讓書法動畫起來、增加和減少筆劃的粗細、改變其顏色等等。完成後，動畫的書法將匯出為 .SVG 檔案，並可以在網路上使用。除書寫外，MacSVG 還可用於許多不同型別的 SVG 動畫。

在 WordPress 中書寫

我準備在我的 WordPress 網站上傳和分享我的 SVG 示例，但我發現 WordPress 不允許進行 SVG 媒體匯入。幸運的是，我找到了一個方便的外掛：Benbodhi 的 SVG 支援外掛允許快速、輕鬆地匯入我的 SVG，就像我將 JPG 匯入媒體庫一樣。我能夠在世界各地向巴比倫人展示我寫在牆上的魔法字。

我在 Brackets 中開源了 SVG 的原始碼，結果如下：

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" height="360px" style="zoom: 1;" cursor="default" id="svg_document" width="480px" baseProfile="full" version="1.1" preserveAspectRatio="xMidYMid meet" viewBox="0 0 480 360"><title id="svg_document_title">Path animation with stroke-dasharray</title><desc id="desc1">This example demonstrates the use of a path element, an animate element, and the stroke-dasharray attribute to simulate drawing.</desc><defs id="svg_document_defs"></defs><g id="main_group"></g><path stroke="#004d40" id="path2" stroke-width="9px" d="M86,75 C86,75 75,72 72,61 C69,50 66,37 71,34 C76,31 86,21 92,35 C98,49 95,73 94,82 C93,91 87,105 83,110 C79,115 70,124 71,113 C72,102 67,105 75,97 C83,89 111,74 111,74 C111,74 119,64 119,63 C119,62 110,57 109,58 C108,59 102,65 102,66 C102,67 101,75 107,79 C113,83 118,85 122,81 C126,77 133,78 136,64 C139,50 147,45 146,33 C145,21 136,15 132,24 C128,33 123,40 123,49 C123,58 135,87 135,96 C135,105 139,117 133,120 C127,123 116,127 120,116 C124,105 144,82 144,81 C144,80 158,66 159,58 C160,50 159,48 161,43 C163,38 172,23 166,22 C160,21 155,12 153,23 C151,34 161,68 160,78 C159,88 164,108 163,113 C162,118 165,126 157,128 C149,130 152,109 152,109 C152,109 185,64 185,64 " fill="none" transform=""><animate values="0,1739;1739,0;" attributeType="XML" begin="0; animate1.end+5s" id="animateSig1" repeatCount="indefinite" attributeName="stroke-dasharray" fill="freeze" dur="2"></animate></path></svg>

你會使用 MacSVG 做什麼？

---

via: https://opensource.com/article/18/10/macsvg-open-source-tool-animation

作者：Jeff Macharyas 選題：lujun9972 譯者：wxy 校對：wxy

本文由 LCTT 原創編譯，Linux中國 榮譽推出