2022-2-22 鶴鶴
最近幾年不管是WEB端頁面還是APP，使用交互動效越來越多，加了動效的UI頁面看上去不再那么枯燥無味，能很好的抓住用戶眼球，既提升了用戶交互體驗同時也更好的展示了產品。通常我們會在哪些場景下使用動畫呢？例如菜單圖標、載入動畫，空白頁，產品介紹等都可以使用動畫，下面是一些示例：
今天給大家講解一下如何制作一個svg格式的動畫，開始之前先和大家說一下svg是什么，目前web或者app中的動畫大多使用svg格式，svg英語全稱是Scalable Vector Graphics，它是一種可縮放的矢量圖像圖形文件格式，這種格式的文件具有邊緣清晰、文件體積小、傳輸方便的特點，因此在網頁設計以及APP中比較常用。可以使用Illustrator軟件或使用
專業的svg編輯器進行設計輸出，svg支持瀏覽器及任何文字處理工具打開。因此svg格式是一種開放標準的矢量圖形語言，可讓你設計激動人心的、高分辨率的圖形頁面。
如果你具有一些代碼能力，還可以直接用代碼來描繪圖像，通過改變部分代碼來使圖像具有交互功能，并可以隨時插入到HTML中通過瀏覽器或編譯器來觀看。
綜合起來SVG優勢如下：
可被非常多的工具讀取和修改
與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
SVG 可隨意縮放
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）
SVG 可以與 JavaScript 技術一起運行
SVG 是開放的標準
SVG 文件是純粹的 XML
目前制作SVG動畫的軟件主要使用AE（需要插件加持）或者在線的SVG動畫工具，如svgjson.com等，如果使用AE需要安裝bodymovie插件，我平時大部分動畫都是使用svgjson工具完成的，所以今天給大家分享的svg動畫教程主要也是使用在線工具svgjson來完成（完全免費），它支持導出svg或json格式動畫，可以滿足不同的需求，目前該軟件雖然是英文版的，但是上手還是比較容易，為了更好讓英語不是特別好的同學快速上手，我下面做了一個關鍵功能的中英對比說明。
軟件地址：https://www.svgjson.com/editor-page/
如制作一個loading動畫
制作要點：
創建2個圓形，一個底色（淺灰色）一個旋轉的圓圈（藍色）
在Store中設置Stroke Dash Array的圓圈長度，圓圈長度可以從Information中獲取
3. 設置Stroke Dash Array后，開始旋轉圓圈的長度，我設置了400，大家可以根據自己的需要進行個性化設置
4. 第四步我們來設置動畫，先選擇藍色的圓圈，然后在Transform中設置旋轉動畫，第0秒為0，第10秒為3600
度（記住別忘記按關鍵幀動畫按鈕，第一幀設置了動畫，后面更改參數會自動生成動畫關鍵幀）
5. 按空格鍵或者點擊時間條上的播放按鈕看看效果，如果沒有問題選擇導出SVG動畫，一個loading動畫就完成
了。
完成后效果
上面的動畫是通過Angle（角度）來實現的旋轉動畫，接下來我們可以通過Stroke Dash Offset來設置旋轉動畫
loading動畫進階教程
先看最終效果
由于svgjson的繪制能力相對較弱，所以我在其他軟件中先畫了如下圖這個動畫的基本元素（需要保存為svg格式），然后通過svgjson中的導入svg方式導入。
首先把“按鈕左”和“”放在一起拼湊成一個圓，然后把“按鈕中間部分”也放在圓中間，并且把它的Scale X值設為0.
把載入的圓圈放在剛剛的紅色圓中，并設置Stroke Dash Array值和Stroke Dash Offset動畫（具體參照上面的動畫教程）
把載入成功的勾號放在載入圓圈中，然后設置動畫Stroke Dash Array值和Stroke Dash Offset動畫
再設置按鈕左和按鈕右位移動畫，同時也需要“按鈕中間部分”的Scale X的動畫
通過上面的2個教程，相信大家對svgjson這個軟件有了一個基本的使用能力，svgjson中的Stroke屬性下的Stroke Dash Array和Stroke Dash Offset功能還是蠻強大的，可以通過這2個參數設置很多豐富的動畫效果。
下面的動畫主要使用x軸縮放功能實現的交互，當然也可以使用Stroke Dash Offset參數實現動畫效果。
這個動畫的核心點在設置對象的中心錨點位置，默認對象的中心點在中心，這個教程是把對象中心點移到了左側
接下來給大家演示如何制作一個變形動畫，變形動畫也是一個非常常見的交互
這個教程重點是對象的縮放，縮放前需要設置錨點位置，然后就是設置x軸和y軸的偏移值。
總體來說，svgjson網站提供的動畫能力還是很強的下面是我制作的項目樣例：
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( m.izc.net.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。