svg路径蒙版动画

Posted 2021-01-03 oubenruing

 

svg路径蒙版动画，是比较实用的一种动画效果，能够绘制如下图所示的动画。

 

 

 

 

接下来细说这样的动画是如何做成的:

1.准备工作

2.SVG路径动画

3.SVG路径蒙版动画

4.复杂图形的编辑技巧

 

 

1.准备工作

首先通过AI绘制需要制作蒙版的图（这个图片也可以通过ps导入） 并且绘制路径，路径方向要注意开始方向，并且不要填充~

 

 通过图层可以看到有路径以及图片

然后点击文件→储存为→svg  保存svg文件。

使用文本编辑器打开svg文件，就可以看到svg的代码。

 

路径得到后通过下面代码获取路径长度~~

 <svg>
        <path id="Path1" d="M238,8L75.3,103.7c0,0-5.3,7.7-18,0S10.3,73,10.3,73"/>
 </svg>
 <script>
        path = document.getElementById(‘Path1‘),
        pathLen = path.getTotalLength();//获取路径总长度
        alert(pathLen);
 </script>

 

准备工作完成，接下来详细解释SVG里面的各项内容~

 

 

2.SVG路径动画

SVG元素中的<path> 标签

下面就为大家展示path标签绘制出来的svg是什么样子

 

点击查看代码示例

 

里面的内容是什么意思呢

 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<path stroke="black" fill="none" stroke-width="2px" d="M238,8L75.3,103.7c0,0-5.3,7.7-18,0S10.3,73,10.3,73"></path>

</svg>

 

其中<svg>标签的内容是svg图片格式的固定格式字段，不用理会它。

 

而path中只有以下几个重要的参数：

stroke：笔画颜色  这里是“black”黑色，同样可以使用#000000来表示；

fill：填充路径none，不填充（当路径有填充时，路径自动闭合，其中颜色就是该字段填写的颜色，制作动画的路径都不需要填充，所以为none）；

stroke-width：笔画宽度

d：这个参数就代表了path的路径。

 

通过以上的简单代码直接嵌入到html中或者另存为.svg的文件我们就得到了一个简单的svg的path图形，接下来我们给路径加上css动画。

点击查看代码示例

 

这里解释下关键添加的代码

 

<style type="text/css">
      .Path1{stroke-dasharray:266 266;stroke-dashoffset:266;animation:Path1_draw 7200ms linear 0ms infinite}
     @keyframes Path1_draw{10%{stroke-dashoffset: 266}50%{ stroke-dashoffset: 0;}100%{ stroke-dashoffset: 0;}}
  </style>

 

首先在path的属性中加入 class="Path1"

 

然后我们在下面添加CSS动画

.Path1中有三个字段

stroke-dasharray：画笔序列，表示带颜色的部分（上文中的strock：black）长266；然后透明266；由此反复填充满路径。
（这里之所以填写的266，是因为上文中的path路径的长度是266,因为我要让显示颜色的序列最终填满路径)

stroke-dashoffset：画笔序列偏移，这里266表示stroke-dasharray向前偏移266。

animation:css动画 五个参数分别是:关键帧@keyframes，动画总时间，动画模式linear（线性），动画开始的延迟（0ms），动画循环infinite（无限循环）。

关键帧Path1_draw解释：百分比时间的时候{属性：变化值}。（从0-10%的偏移还是266，10%-50%偏移0 图像按照strock-dasharray的绘制显现在管道中，50%-100%持续显示）

Path路径动画绘制完成。

 

 

3.SVG路径蒙版动画

svg蒙版只需做三件事：

1.在之前的path上外部加上和<defs><mask>的标签，并且在mask中添加id

2.在svg中需要添加蒙版的图片处添加mask="url(#id)" 即可

3.path中的stroke属性就代表传统的蒙版，黑色代表透明，白色代表显示，这里要修改为white。stroke-width的宽度要足以覆盖图片，因此改大该值。 

如以下代码所示。

点击查看代码示例

为了方便展示使用ai导出svg图片时，我使用了嵌入选项，将底图嵌入到了svg中，因此上述代码中image中存在大量信息，不影响关键代码的浏览。

至此，简单的路径蒙版动画绘制完成。

 

4.复杂图形的编辑技巧

上述的3点只是完成了一个简单路径蒙版原件的制作，那么整个图形应该有些什么关键的地方需要注意呢？

1.制作完成图像的时候推荐首先使用ps将图片分层处理好，前景图，背景图，以及需要制作蒙版的元素分开，按照图层排列好，将图层都转换为智能对象，

然后导出psd的源文件，再将源文件导入ai中生成svg图片。

2.绘制路径时，需要将元素单独放置到一个AI的画板中，并且将画板调整到元素大小，否则制作的svg动画位置不正确会导致蒙版失效。

3.如本文开头的样例图所示，其中4条发光的管道匹配了4条不同的路径，这里为了满足流动的效果调整了几个管道不同的显示时间；

但本文并没有直接调整animation中的延迟时间和动画时间，而是通过调整了

stroke-dasharray:266 355;stroke-dashoffset:355;

这个值来延迟动画绘制的时间。因为动画使用了无限循环的播放方式，如果直接调整动画播放时间和延时，会导致之后循环的动画时间错乱。

4.本文也考虑过直接使用 strock-dasharray：0 0 到 strock-dasharray：266 0，而省去stroke-dashoffset的方式绘制动画，

但是由于设置了stroke-width，导致动画开始时会多露出一点，因此弃用该方式。

 

最后附上文章开头样例图的svg，以供参考。（嵌入了图片，代码很长） 

 

总结

以上就是路径蒙版动画的全部内容，希望对大家有所帮助。