作者TKirby ( :D)
看板Web_Design
标题Re: [讨论] 画SVG时的座标真的要用手画吗(?)
时间Tue Jun 20 10:42:32 2017
向量编辑的话也可以考虑 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的路径慢慢试
: 但我觉得这也太慢了吧
: 而且根本不合理的感觉
: 我想请问各位设计师大大在做这类型的设计时
: 都会怎麽去做路径的设计呀?
: 还是真的大家也是这样一个数字一个数字的去试呀?
: 想听听大家的建议~!感谢!!
--
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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1497926564.A.1D3.html