點(diǎn)擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來(lái)

前言

首先祝大家2019新年快樂(lè)，萬(wàn)事大吉，豬事順利，闔家歡樂(lè)。

前面文章SVG 線(xiàn)條動(dòng)畫(huà)基礎(chǔ)入門(mén)知識(shí)學(xué)習(xí)到了基礎(chǔ)知識(shí)，現(xiàn)在來(lái)給大家講講如何制作SVG 制作復(fù)雜圖形線(xiàn)條動(dòng)畫(huà)。

假如你有這樣的一個(gè)gif，要用svg畫(huà)出來(lái)，你能想到什么辦法了？

上面這個(gè) SVG 線(xiàn)條動(dòng)畫(huà)的路徑 path ，如果自己手工一個(gè)點(diǎn)一個(gè)點(diǎn)定位調(diào)試畫(huà)出來(lái)的話(huà)，估計(jì)你的累趴下(也不一定能搞定)。

下面我來(lái)告訴大家一個(gè)簡(jiǎn)單的方法，準(zhǔn)備好工具。

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

導(dǎo)入圖片

用魔術(shù)棒or套索工具,選擇區(qū)域

右擊-->建立工作路徑-->容差2個(gè)像素吧(可以用不同大小的容差多試幾次，直到得到一個(gè)自己滿(mǎn)意的路徑。)。

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

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

在 illustrator 中生成 SVG 文件

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

可能你看到的是一片空白，別慌，使用ctrl+a全選，就能選中路徑啦。

看到了吧，這上面有多少個(gè)點(diǎn)，太多，都不想數(shù)，所以手工畫(huà)是不可能的啦。

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

好，其實(shí)吧 AI 也沒(méi)做什么，路徑是使用 PS 生成的，為什么不直接用 PS 生成 *.svg 文件呢？因?yàn)槲矣玫陌姹?PS 還沒(méi)支持直接存儲(chǔ)為 SVG 格式。然后其實(shí)也可以直接在 AI 上繪制路徑，這個(gè)就看設(shè)計(jì)師或者你對(duì)哪個(gè)工具更熟悉了。

獲取 SVG 的 path 路徑

把剛剛保存的 *.svg 路徑的文件用瀏覽器打開(kāi)，右鍵查看網(wǎng)頁(yè)源代碼：

這里的path就是我們要的路徑了

運(yùn)用動(dòng)畫(huà)

.container { width: 400px; margin: 20px auto; } .yy { stroke-width: 5; stroke: #f987ae; animation: lineMove 13s ease-out infinite; } @keyframes lineMove { 0% { stroke-dasharray: 0, 4891; } 50% { stroke-dasharray: 4891, 4891; fill: rgba(0, 0, 0, 0); opacity: 1; } 100% { stroke-dasharray: 4891, 4891; fill: rgba(249, 135, 174, 1); opacity: 0; } }

這里的stroke-dasharray長(zhǎng)度，可以通過(guò)js來(lái)獲取

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

是不是很簡(jiǎn)單了？趕緊自己試試吧。

公告

喜歡小編的點(diǎn)擊關(guān)注，了解更多知識(shí)！

源碼地址和源文件下載請(qǐng)點(diǎn)擊下方“了解更多”

總結(jié)

以上是生活随笔為你收集整理的svg 动画_根据AI导出的SVG path制作SVG线条动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。