Re: [討論] 畫SVG時的座標真的要用手畫嗎(?)

看板Web_Design作者TKirby ( :D)時間8年前 (2017/06/20 10:42)推噓0(0推 0噓 0→)

留言0則, 0人參與討論串2/2 (看更多)

向量編輯的話也可以考慮 Vectr, 完全免費的向量圖編輯軟體 (vectr.com) 有桌機版也可以到網站上用, 之前見過 Vectr 的 founders, 是兩位相當 nice 的外國人~ 是說... 光就文字, 不需要太複雜的話，不一定要畫，也不一定要用 animejs 用 css animation 就可以了~ 下例使用 stroke-dasharray 的動畫控制邊框長出: <?xml version="1.0" encoding="utf-8"?> <svg xmlns="" rel="nofollow">http://www.w3.org/2000/svg"> <style type="text/css"> @keyframes stroke { 0% { stroke-dasharray: 0 320; } 50% { stroke-dasharray: 320 320; } 100% { stroke-dasharray: 0 320; } } text { font-size: 64px; stroke-width: 2; fill: none; animation: stroke 2s ease-in-out infinite; } </style> <text y="80" x="10">loading</text> </svg> 結果大概像這樣: http://tkirby.org/archive/test.svg 我做了一個範例放到 https://loading.io/spinner/stroke/ 你可以調調參數玩看看當然效果還是有差, 要再複雜一點的形狀或動畫，還是得把文字路徑化~ ※ 引述《HenryLiKing (亨利王子)》之銘言： : 小弟非本科生 : 但是很喜歡那些很漂亮的網頁，所以都會去查一些好玩的套件玩~ : 最近看到這個套件 : anime.js : http://animejs.com/ : 他裡面的這個lineDrawing可以把SVG化的文字做好帥的特效喔!! : http://animejs.com/documentation/#lineDrawing : 我想要做我的名字，結果做出這樣... : http://imgur.com/a/R30bF : 我的作法是在紙上自己畫一次座標再用那個Path的路徑慢慢試 : 但我覺得這也太慢了吧 : 而且根本不合理的感覺 : 我想請問各位設計師大大在做這類型的設計時 : 都會怎麼去做路徑的設計呀? : 還是真的大家也是這樣一個數字一個數字的去試呀? : 想聽聽大家的建議~!感謝!! -- loading.css - css animation for loader https://loading.io/animation/ css-spinner - pure css loader https://loading.io/css/ -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 59.115.119.27 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1497926564.A.1D3.html