原标题:SVG 线条动画入门
(点击上方公众号,可快速关注)
作者:伯乐在线专栏作者 - chokcoco
如需转载,发送「转载」二字查看说明
通常我们说的 Web 动画,包含了三大类。
CSS3 动画
java 动画(canvas)
html 动画(SVG)
个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画。
举个栗子
SVG 线条动画,在一些特定的场合下可以解决使用 CSS 无法完成的动画。尤其是在进度条方面,看看最近项目里的一个小需求,一个这种形状的进度条:
把里面的进度条单独拿出来,也就是需要实现这样一个效果:
脑洞大开一下,使用 CSS3 如何实现这样一个进度条呢。
CSS3 是可以做到的,就是很麻烦。但是如果采用 SVG 的话,迎刃而解。
See the Pen 不规则进度条 by Chokcoco (@