iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 30
5

SVG手寫動畫-Bye!

終於可以跟鐵人賽說再見!

最後來用一下這30天學得css和svg動畫做個手寫動畫吧~
以下範例用到svg最特別的路徑動畫,而最後一個點則是用css動畫寫的~
完整codepen連結在這裡

SVG好用工具分享

  • D3.js:SVG視覺化圖表框架
  • snap.svg:SVG動畫框架
  • IcoMoon:可將做好的icon的svg檔上傳,變成iconfont,就可以在CSS直接套用文字樣式

心得結論

  • 最後一天了,沒想到我真的完成了30天的鐵人賽
    因為我是一個很容易半途而廢的人,這次的30天逼自己利用下班或放假的空閒時間深入學習CSS和SVG動畫部分,雖然最後一週內容糟到自己都不敢看,但是只能閉著眼睛按送出,能完成30天連我自己都覺得不可思議。

  • 在30天學習中遇到的最大困難就是:
    剛好在鐵人賽開始的每個週末,必須都要台北台南家往返,有參加的人都了解,週末是趕工的好機會,但也怪我自己之前沒有寫庫存。就這樣,四個週末都這樣來回,也在第三個週末家中發生狀況,心情上的低落,那時候真的好想放棄,但我的浪流連九程式匠自然產生的佛系碼農專區 組員們都充滿正能量,是同事也是互相激勵的朋友,大家互助合作提醒po文,在這樣的氛圍下,覺得自己也不能放棄,謝謝他們,也慶幸自己最後堅持下來。

  • 最後~
    身為一個剛從設計師要轉前端的人,目前在公司剛在使用JS及Vue,因為沒基礎,在公司要看的東西實在太多,光要控制畫面已經搞的我頭昏眼花,希望能全心把程式學習放在真正的程式控制上,讓動畫的部分盡量由原本會的CSS呈現。所以用幾乎沒有程式邏輯的CSS/SVG來控制動畫,除了節省效能,對於我來說其實也很有幫助的。

相信今年的我都完成了,明年的我應該...也可以吧!?


上一篇
SVG-animation(二)
系列文
30天讓設計師搞定CSS/SVG動畫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
SunAllen
iT邦研究生 1 級 ‧ 2018-11-14 13:34:43

恭喜大大完賽! /images/emoticon/emoticon42.gif

好看的CSS動畫!!!

謝謝你~~/images/emoticon/emoticon02.gif

1
淺水員
iT邦大師 6 級 ‧ 2018-11-14 15:49:15

我還滿喜歡 SVG+SMIL 的
不過 chrome 對於 SMIL 好像不是很支持
有時候都不大敢用...

可以看看Can I use,應該可以用喔~Chromec和Safari支援了!IE還是不行QQhttps://ithelp.ithome.com.tw/upload/images/20181114/201115006vJZRgWrlZ.png

淺水員 iT邦大師 6 級 ‧ 2018-11-15 12:46:35 檢舉

好喔,謝謝你的資訊

1
挖洗菜呱
iT邦新手 5 級 ‧ 2018-11-15 11:10:05

閉著眼睛按送出 XDDDD
我懂!!!!XDDDDD

慘不忍睹XD /images/emoticon/emoticon16.gif

我要留言

立即登入留言