鹅厂原创 | svg描边绘制动画实现方式

鹅厂原创 | svg描边绘制动画实现方式

罗雪罗雪

作者:blackerqian
腾讯IEG事业群 UI工程师


0 写在前面

这篇文章主要讲利用SVG来实现web页面上的描边绘制动画的两种原理。同时涉及到从AI软件导出SVG的方法。



1 案例效果


扫光效果和描边效果,如图:





2 SVG的导出方法


首页需要设计师做一个相同或者等比文字矢量图,也就是AI文件。

用AI打开文件之后利用左侧工具栏里的“直接选择工具”,全选之后右击“转化成复合路径”,然后菜单里选择“将文档存储为SVG”。

这样导出来的就是path路径代码了。如图所示:


举例:



导出之后的代码片段,比如案例“hello”代码片段里有些属性是AI软件自动生成的,我们可以提取到CSS里调用。

简化之后的SVG代码片段为:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 y="0px" width="624px" height="128px" viewBox="0 0 624 128" style="enable-background:new 0 0 624 128;" xml:space="preserve">
 <path d="M274,58c9.665,7.459,16.527,12.854,10.194,24.194
 c-6.233,11.162-10.186,9.534-18.023,3.635c-1.151-7.571,1.163-16.923,4.003-23.651c23.121,2.333-4.574,38.267-24.246,34.845
 c-24.29-4.225-11.639-40.013-7.906-55.498c-0.728,17.849-16.004,40.561-31.745,50.662c-28.765,18.458-11.853-37.834-9.256-48.536
 c3.229,12.612,0.08,15.385-8.324,24.071c-7.737,7.998-12.716,17.235-21.674,24.007c-10.276,7.768-22.897,13.659-29.772,0.222
 c-4.562-8.917-5.797-21.189,7.602-14.804C145.413,89.615,142.604,97.565,129,99c-9.743,1.027-17.44-2.264-21.028-10.972
 c-3.883-9.422,0.674-21.767-12.388-15.222C87.506,76.853,78.318,89.92,83,100.127c2.002-8.152,4.133-18.866,4.997-28.346
 C89.029,60.441,94.371,43.283,90,33"/>
</svg>

CSS代码片段:

<style>
path {
  stroke-dasharray: 633;
  stroke: black;
  stroke-width: 5;
  fill: #f00;
  fill-opacity:0;

}
</style>

当然边框颜色可以随心所欲的更改喽!


这样SVG的路径导出过程就已经完成了,下一步就可以利用CSS编写样式和动画效果了。



3 动画实现的两种原理

在这里我们需要运用:

stroke-dashoffset和stroke-dasharray两个属性:

  • stroke-dashoffset属性是指虚线的起始偏移量。
  • stroke-dasharray属性指虚线段的样式(实线段长度、间隔段长度)

这个两种原理呢。

也就是利用CSS改变stroke-dashoffset或者stroke-dasharray,即一种是虚线线段不变的情况下改变偏移量,另一种是偏移量不变的情况下改变虚线线段长度。

通过下面两张gif图就能看出两个属性的区别了。

stroke-dashoffset



stroke-dasharray





原理一、通过改变stroke-dashoffset

css代码片段:

<style>
path {
  stroke-dasharray: 633;
  -webkit-animation: dash 2s linear;
  animation: dash 2s linear;
  stroke: black;
  stroke-width: 5;
  fill: #f00;
  fill-opacity:0;

}
@-webkit-keyframes dash {
  from {
    stroke-dashoffset: -633;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  from {
    stroke-dashoffset: -633;
  }
  to {
    stroke-dashoffset: 0;
  }
}
</style>

原理二、通过改变stroke-dasharray

css代码片段:

<style>
path {
  stroke-dashoffset: 633;
  -webkit-animation: dash 2s linear;
  animation: dash 2s linear;
  stroke: black;
  stroke-width: 5;
  fill: #f00;
  fill-opacity:0;

}
@-webkit-keyframes dash {
  from {
    stroke-dasharray: 633,633;
  }
  to {
	stroke-dasharray: 633,0;
  }
}
@keyframes dash {
  from {
    stroke-dasharray: 633,633;
  }
  to {
	stroke-dasharray: 633,0;
  }
}
</style>

获取路径的长度方法

最后这里需要说明一下css代码片段。

其中“633”为实例中“hello”路径的长度,通过document.querySelectorAll("path")[xxxxxxxxxx].getTotalLength()可以获取路径长度。

-------------------------------------------------------

通过这两种原理,通过结合CSS3动画就能做出炫酷的扫光效果了,让slogen焕发光彩!



文章被以下专栏收录
4 条评论
推荐阅读