最近幾年不管是WEB端頁面還是APP，使用交互動(dòng)效越來越多，加了動(dòng)效的UI頁面看上去不再那么枯燥無味，能很好的抓住用戶眼球，既提升了用戶交互體驗(yàn)同時(shí)也更好的展示了產(chǎn)品。通常我們會(huì)在哪些場景下使用動(dòng)畫呢？例如菜單圖標(biāo)、載入動(dòng)畫，空白頁，產(chǎn)品介紹等都可以使用動(dòng)畫，下面是一些示例：

今天給大家講解一下如何制作一個(gè)svg格式的動(dòng)畫，開始之前先和大家說一下svg是什么，目前web或者app中的動(dòng)畫大多使用svg格式，svg英語全稱是Scalable Vector Graphics，它是一種可縮放的矢量圖像圖形文件格式，這種格式的文件具有邊緣清晰、文件體積小、傳輸方便的特點(diǎn)，因此在網(wǎng)頁設(shè)計(jì)以及APP中比較常用。可以使用Illustrator軟件或使用

專業(yè)的svg編輯器進(jìn)行設(shè)計(jì)輸出，svg支持瀏覽器及任何文字處理工具打開。因此svg格式是一種開放標(biāo)準(zhǔn)的矢量圖形語言，可讓你設(shè)計(jì)激動(dòng)人心的、高分辨率的圖形頁面。

如果你具有一些代碼能力，還可以直接用代碼來描繪圖像，通過改變部分代碼來使圖像具有交互功能，并可以隨時(shí)插入到HTML中通過瀏覽器或編譯器來觀看。

綜合起來SVG優(yōu)勢如下：

1. 可被非常多的工具讀取和修改

2. 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強(qiáng)。

3. SVG 可隨意縮放

4. SVG 圖像可在任何的分辨率下被高質(zhì)量地打印

5. SVG 圖像中的文本是可選的，同時(shí)也是可搜索的（很適合制作地圖）

6. SVG 可以與 JavaScript 技術(shù)一起運(yùn)行

7. SVG 是開放的標(biāo)準(zhǔn)

8. SVG 文件是純粹的 XML

目前制作SVG動(dòng)畫的軟件主要使用AE（需要插件加持）或者在線的SVG動(dòng)畫工具，如svgjson.com等，如果使用AE需要安裝bodymovie插件，我平時(shí)大部分動(dòng)畫都是使用svgjson工具完成的，所以今天給大家分享的svg動(dòng)畫教程主要也是使用在線工具svgjson來完成（完全免費(fèi)），它支持導(dǎo)出svg或json格式動(dòng)畫，可以滿足不同的需求，目前該軟件雖然是英文版的，但是上手還是比較容易，為了更好讓英語不是特別好的同學(xué)快速上手，我下面做了一個(gè)關(guān)鍵功能的中英對比說明。

軟件地址：https://www.svgjson.com/editor-page/

如制作一個(gè)loading動(dòng)畫

制作要點(diǎn)：

1. 創(chuàng)建2個(gè)圓形，一個(gè)底色（淺灰色）一個(gè)旋轉(zhuǎn)的圓圈（藍(lán)色）

2. 在Store中設(shè)置Stroke Dash Array的圓圈長度，圓圈長度可以從Information中獲取

3. 設(shè)置Stroke Dash Array后，開始旋轉(zhuǎn)圓圈的長度，我設(shè)置了400，大家可以根據(jù)自己的需要進(jìn)行個(gè)性化設(shè)置

4. 第四步我們來設(shè)置動(dòng)畫，先選擇藍(lán)色的圓圈，然后在Transform中設(shè)置旋轉(zhuǎn)動(dòng)畫，第0秒為0，第10秒為3600
度（記住別忘記按關(guān)鍵幀動(dòng)畫按鈕，第一幀設(shè)置了動(dòng)畫，后面更改參數(shù)會(huì)自動(dòng)生成動(dòng)畫關(guān)鍵幀）

5. 按空格鍵或者點(diǎn)擊時(shí)間條上的播放按鈕看看效果，如果沒有問題選擇導(dǎo)出SVG動(dòng)畫，一個(gè)loading動(dòng)畫就完成
了。

完成后效果

上面的動(dòng)畫是通過Angle（角度）來實(shí)現(xiàn)的旋轉(zhuǎn)動(dòng)畫，接下來我們可以通過Stroke Dash Offset來設(shè)置旋轉(zhuǎn)動(dòng)畫

loading動(dòng)畫進(jìn)階教程

先看最終效果

由于svgjson的繪制能力相對較弱，所以我在其他軟件中先畫了如下圖這個(gè)動(dòng)畫的基本元素（需要保存為svg格式），然后通過svgjson中的導(dǎo)入svg方式導(dǎo)入。

1. 首先把“按鈕左”和“”放在一起拼湊成一個(gè)圓，然后把“按鈕中間部分”也放在圓中間，并且把它的Scale X值設(shè)為0.

2. 把載入的圓圈放在剛剛的紅色圓中，并設(shè)置Stroke Dash Array值和Stroke Dash Offset動(dòng)畫（具體參照上面的動(dòng)畫教程）

3. 把載入成功的勾號放在載入圓圈中，然后設(shè)置動(dòng)畫Stroke Dash Array值和Stroke Dash Offset動(dòng)畫

4. 再設(shè)置按鈕左和按鈕右位移動(dòng)畫，同時(shí)也需要“按鈕中間部分”的Scale X的動(dòng)畫

   
   

通過上面的2個(gè)教程，相信大家對svgjson這個(gè)軟件有了一個(gè)基本的使用能力，svgjson中的Stroke屬性下的Stroke Dash Array和Stroke Dash Offset功能還是蠻強(qiáng)大的，可以通過這2個(gè)參數(shù)設(shè)置很多豐富的動(dòng)畫效果。

下面的動(dòng)畫主要使用x軸縮放功能實(shí)現(xiàn)的交互，當(dāng)然也可以使用Stroke Dash Offset參數(shù)實(shí)現(xiàn)動(dòng)畫效果。

這個(gè)動(dòng)畫的核心點(diǎn)在設(shè)置對象的中心錨點(diǎn)位置，默認(rèn)對象的中心點(diǎn)在中心，這個(gè)教程是把對象中心點(diǎn)移到了左側(cè)

接下來給大家演示如何制作一個(gè)變形動(dòng)畫，變形動(dòng)畫也是一個(gè)非常常見的交互

這個(gè)教程重點(diǎn)是對象的縮放，縮放前需要設(shè)置錨點(diǎn)位置，然后就是設(shè)置x軸和y軸的偏移值。

總體來說，svgjson網(wǎng)站提供的動(dòng)畫能力還是很強(qiáng)的下面是我制作的項(xiàng)目樣例：

原文地址：站酷

作者：Snmendala

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.tuitetiyu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)