SVG怎么實現(xiàn)復(fù)雜線條動畫

本篇內(nèi)容介紹了“SVG怎么實現(xiàn)復(fù)雜線條動畫”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

事物都是朝著熵增焓減的方向發(fā)展的，復(fù)雜線條也肯定比有序線條要多。

所以，很多時候，我們無法人工去畫出一些十分復(fù)雜動畫的線條，這個時候，就要借助我們前端的好幫手 PS 和 AI：

好了，假定我們現(xiàn)在要制作下圖 GIF 這樣的一個 loading 圖：

上面這個 SVG 線條動畫的路徑 path ，如果靠自己手工一個點一個點定位調(diào)試畫出來的話，嘿嘿嘿你去試試。

使用 PS 導(dǎo)出路徑

估計靠手工能畫出來，也沒了大半條命。好，輪到工具上場，看看我們的原圖在 PS 下長什么樣子(支持透明通道的 PNG、GIF 為佳)：

好，選中選框工具，按下 CTRL 選中圖層， 再選擇建立工作路徑：

這個時候會彈出一個設(shè)定容差大小的選擇，可以用不同大小的容差多試幾次，直到得到一個自己滿意的路徑。

• 容差是什么?可以理解為一種精確度，在選取顏色時所設(shè)置的選取范圍，容差越大，選取的范圍也越大，其數(shù)值是在0-255之間。

好，這個時候，路徑算是建立完成了，可以把圖層的透明度設(shè)置為 0 ，就能清晰的看到路徑長啥樣：

嗯，路徑還挺帥的。

好，到了 PS 中的最后一步，點擊文件選項，導(dǎo)出路徑到 illustrator ，看圖，照著操作就好：

在 illustrator 中生成 SVG 文件

打開 AI ，打開剛剛用 PS 導(dǎo)出的 *.ai 文件。

• 沒有 AI ?身為前端居然連 AI 也沒裝(￣△￣;) ，其實我也是因為 SVG 才上手的，趕緊下一個吧。

可能你看到的是一片空白，別慌，使用選擇工具選一個矩形，就能選中路徑啦。

如果你是 PS 鋼筆工具小能手，還可以繼續(xù)對路徑進(jìn)行修改，直到自己滿意為止。

OK，接下來就是調(diào)整畫布大小，最好是路徑左上角和畫布左上角對齊，然后選中存儲為 SVG 文件。

好，其實 AI 也沒做什么，路徑是使用 PS 生成的，為什么不直接用 PS 生成 *.svg 文件呢?因為我用的版本 PS 還沒支持直接存儲為 SVG  格式。然后其實也可以直接在 AI 上繪制路徑，這個就看設(shè)計師或者你對哪個工具更熟悉了。

獲取 SVG 的 path 路徑

OK，最后把剛剛保存的 *.svg 路徑的文件用瀏覽器打開，一片空白是正常的，右鍵查看網(wǎng)頁源代碼：

大功告成，這里面，路徑就是我們需要的路徑了!

好，把我們要的整個拿出來，運用上一篇文章的線條動畫知識，給它賦予簡單的動畫效果就好：

CodePen Demo -- SVG Path Animation[2]

利用這個技巧，我們就可以去生成各類復(fù)雜的 SVG 動畫了：

使用 javascript 計算 path 路徑長度

還有一個問題，線條動畫需要知道整個 path 路徑的長度，簡單的線條我們還可以利用加減法算出整個圖形的長度。那么復(fù)雜路徑的長度怎么計算?

利用一段簡單的 js 可以完成：

<svg> 
    <path d="..."> 
</svg> 

var obj = document.querySelector("path"); var length = obj.getTotalLength();  console.log(length); // 377.0433

好了，有了復(fù)雜圖形的一些路徑，我們就可以制作出很多酷炫 SVG 動畫效果了。撒花。

“SVG怎么實現(xiàn)復(fù)雜線條動畫”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！