SVG 做 個人logo 動起來，工作筆記
d 最近看到了日本的網站，我還滿喜歡他們的設計出場模式。(圖1)
 |
| 日本網站(圖1) |
於是我也來做一個!
由於我沒有要設計比較複雜的svg logo ，就直接用 線上figma 做logo (圖2)
 |
| figma 製作logo (圖2) |
figma 有些功能 很像illustrator ，它有個方便個功能是 就是可以直接將鋼筆、文字線條 轉成 vector。在使用figma 的outline 轉成vector的時候，有時鋼筆會跑掉，就需要再做調整。(圖3)
 |
| 轉成SVG需要調整(圖3) |
如果有個單字需要調整的特別多，不如就單個字直接重新製作轉vector 會比較快。
設計思維
參考圖1 的動畫設計思維，第一步是先跑出文字的外框做描邊，第二步做內部填色，第三步 動畫，動起來。
第一步-SVG線搞:
在做文字的時候，就不做填色，用stoke設計外框。
figma轉成svg 出來的path 也就是路徑外框，不填色。(圖5)
 |
| copy svg (圖5) |
這時在html上，要確保 看到的 是否和figma 設計的一樣，因為有時候figma 轉成svg 路徑會跑掉。(圖6)
 |
| 網頁上查看SVG(圖6) |
第二步-填色:
這次我想要在H、D、N上做填色，所以就做了HDN的圖層。(圖7)
 |
| 填色圖層(圖7) |
第三步-動畫:
利用了stroke-dasharray 將原本的path 做成虛線，再利用 stroke-dashoffset 遮住虛線，利用兩者 一個顯示 一個隱藏，再搭配逐間動畫 看起來線條會跑起來。(圖8)
 |
| 讓線條跑起來(圖8) |
在設計線在跑的時候，如果stroke-dasharray 切越多，就是虛線越多。 如果看起來要順 可以將 stroke-dasharray 長度調長，大概是文字的長度。 有的時候如果stroke-dasharray 太長，那描邊有跟沒有一樣。(圖9)
 |
| CSS 動畫設定(圖9) |
在這次的設計中，我把文字短的path (A、D、I)，stroke-dasharray 調成300，較長的文字用500，動畫跑約3秒。(圖10)
 |
| 設定不同的dasharray長度(圖10) |
當第一個描邊動畫跑完(3~6秒)，在跑第2個填色動畫，所以第2個的秒數 要delay 4秒(fade-in
)。(圖11)
 |
| 填色CSS(圖11) |
成果
心得
做這種動畫把以前學的動畫偵格(flash)概念都用上了，只是在css 切成0~100% 不太好算動畫在用figma 轉SVG有時要去校調。
 |
| rive做動畫 |
留言
張貼留言