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