向量編輯的話也可以考慮 Vectr, 完全免費的向量圖編輯軟體 (vectr.com)
有桌機版也可以到網站上用, 之前見過 Vectr 的 founders, 是兩位相當 nice 的外國人~
是說... 光就文字, 不需要太複雜的話，不一定要畫，也不一定要用 animejs
用 css animation 就可以了~ 下例使用 stroke-dasharray 的動畫控制邊框長出:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="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的路徑慢慢試
: 但我覺得這也太慢了吧
: 而且根本不合理的感覺
: 我想請問各位設計師大大在做這類型的設計時
: 都會怎麼去做路徑的設計呀?
: 還是真的大家也是這樣一個數字一個數字的去試呀?
: 想聽聽大家的建議~!感謝!!