SVG路径动画解密

Posted 2020-11-04 lonelyxmas

原文:SVG路径动画解密

原文链接：http://www.gbtags.com/gb/share/5581.htm

SVG路径动画效果现在貌似越来越多网站都使用了，给我的感觉就像是一段时间的流行而已，刚一出来大家都感觉很炫酷，时间久了也就审美疲劳啦！如果还不知道什么是SVG路径动画的童鞋，快来看一个demo吧：http://tympanus.net/Development/SVGDrawingAnimation/

课程库相关课程：?常用的三种生成SVG图形动画方式

怎么样？是不是很炫酷！另外这种技术还可以实现将logo外径作为loading的进度环，比如现在的天猫app里的加载进度条。想知道这是怎么实现的吗，我也是前些天略微研究了一下，在此分享出来吧！

要做出一个这样的特效首先有几个关键点：

1. 核心技术：SVG路径图+SVG样式（stroke-dasharray和stroke-dashoffset），stroke-dasharray用于创建虚线，也就是把svg图用虚线来画，这个属性可以是一个数组，数组里面的值就是虚线的值，依次循环。详情：http://www.w3cschool.cc/svg/svg-stroke.html，而stroke-dashoffset顾名思义就是虚线在原路径上的相对偏移量了。
2. 开发前准备：将png图在ai中打开，利用钢笔工具描边，画出描边的路径并另存为SVG矢量图，这就是要html中要用的路径了（大神如果可以在html中直接用path画出想要的路径可以直接画！）
3. 实现原理：利用css3的animation动画特效来控制stroke-dasharray和stroke-dashoffset值的改变，以达到路径动画的效果

是不是恍然大悟了，看上去很简单的样子吧！这里来个本站的代码分享：?demo传送门

?现在详细说明一下demo，这个demo中最下面那个不规则形状

就是我用illustrator钢笔随手画的一个闭合路径，然后另存为.svg文件，打开后将<svg>代码部分考到html中，并稍微改动一下成为

1. <svg width="400px" height="400px">
2. <path id="test" fill="none" stroke="#fff" stroke-width="3" d="M197,218c0,0-112,31-23,77s95,82,110,16s246.28,104,13.64-69S108,130.477,197,218z"/>
3. <path fill="none" stroke="#fff" stroke-width="3" d="M197,218c0,0-112,31-23,77s95,82,110,16s246.28,104,13.64-69S108,130.477,197,218z" opacity="0.05"/>
4. </svg>

?这个样子，svg内的两个path是完全相同的，第一个是用来描边的，第二个是一个背景路径而已，可以根据需求选择性删掉。

CSS部分是重点：

1. #test {
2. stroke-dasharray: 0,852.45;/*表示虚线描边。数组是虚线数组。详解：http://www.w3cschool.cc/svg/svg-stroke.html。[0，图路径长]*/
3. stroke-dashoffset: 0;/*表示虚线的起始偏移*/
4. -webkit-animation: polanim 3s linear infinite ;
5. -webkit-animation-fill-mode:both ;
6. }
7. ?
8. @-webkit-keyframes polanim {
9. 0% {
10. stroke-dasharray: 0, 852.45;
11. stroke-dashoffset:0;
12. }
14. 50% {
15. stroke-dasharray: 852.45, 0;
16. stroke-dashoffset:0;
17. }
19. 100% {
20. stroke-dasharray: 0, 852.45;
21. stroke-dashoffset:-852.45;
22. }
23. }

?给需要描边的那个path定义一个id（class也行），然后在css中定义了stroke-dasharray、?stroke-dashoffset这两个关键点，唯一疑惑的就是那个stroke-dasharray: 0,852.45;的那个852.45了吧，这个值就是整个路径的长度。前50%的动画通过animation来动态改变stroke-dasharray的值，就好像一个路径上的虚线的实部分从短到长，而虚部分从长到短从而达到了路径动画的效果，后50%的动画是想让路径画完后，再按照路径消失一圈，这里用到了stroke-dasharray和stroke-dashoffset的同时改变，也就是虚线的实部分从长到短的同时再改变虚线的偏移量，把实部分往回拉。如果实在想不通的话就反复试着改这几个参数值来看看各是什么效果好啦。

哦 对了，整个路径的长度852.45可以用js提前计算出来，代码是：

1. var path = document.getElementById(‘test‘);
2. var length = path.getTotalLength();
3. console.log(length)

?在css动画设置中设置不同的百分比时间和不规则的stroke-dasharray\stroke-dashoffset就可以像demo中那个logo似的达到不那么死板的效果

原文链接：http://www.gbtags.com/gb/share/5581.htm