十分鐘、五步驟,SVG 動起來!
前言在 Codepen 上常常看到很多會設計又懂寫前端的高手,用 SVG 畫出很漂亮的圖案後,還能讓他們產生可愛的動畫,我一直很好奇他們是怎麼實作的,總覺得很困難,好像得對 SVG 透徹了解,並且自己畫出那些 SVG 圖案,才有辦法實作動畫。但其實不然,今天就來分享一個簡單的小技巧,讓你在短短十分鐘內就能讓一個靜態的 SVG 圖案活躍起來! 簡單看個成品,你可以點選下面範例中的 build 按鈕,可以看到原本靜止的 SVG 房子動了起來
前言在 Codepen 上常常看到很多會設計又懂寫前端的高手,用 SVG 畫出很漂亮的圖案後,還能讓他們產生可愛的動畫,我一直很好奇他們是怎麼實作的,總覺得很困難,好像得對 SVG 透徹了解,並且自己畫出那些 SVG 圖案,才有辦法實作動畫。但其實不然,今天就來分享一個簡單的小技巧,讓你在短短十分鐘內就能讓一個靜態的 SVG 圖案活躍起來! 簡單看個成品,你可以點選下面範例中的 build 按鈕,可以看到原本靜止的 SVG 房子動了起來