svg系列：2. svg path实现图片路径动画

原文连接

为了以后产品可能的动画需求，咱们须要调研各类可行的前端动画技术。相信CSS3动画和JS动画咱们日常已经接触不少了，而SVG技术则不多用，事实上SVG也是一种强大的动画解决方案，能够帮咱们解决传统动画作不到的技术痛点。

SVG简介

• SVG(Scalable Vector Graphics)，可缩放矢量图形，具备放大缩小不失真的特性，能够用来建立矢量图。
• SVG1.1 于 2003 年 1 月 14 日成为 W3C 推荐标准。
• SVG本质上是用XML语言描述的，因此它能够和DOM结构同样被CSS和JS编程控制，经过连续地改变SVG图形属性就能够建立SVG动画。
• SVG可用文本编辑器编辑，也可经过Adobe Illustator等专业编辑软件处理。

SVG文件可单独使用，使用XML定义并包含DTD声明：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red" />
</svg>

在现代浏览器中，咱们能够直接在HTML代码中嵌入SVG代码：

<div class="svg-wrap">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
  </svg>
</div>

SVG path

SVG能够绘制许多形状，这里不一一介绍，重点介绍下svg path，它是svg形状中功能最为强大的一个，也是咱们前端动画会常常用到的形状。

顾名思义，path定义的是一组路径，你能够用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其余的形状，例如贝塞尔曲线、2次曲线等曲线。path元素的形状是经过它的 d 属性决定的，d属性中一般以字母为命令，以下所示：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

如下path 定义了一个三角形：它开始于位置150 0，到达位置75 200，而后从那里开始到225 200，最后在150 0关闭路径。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M150 0 L75 200 L225 200 Z" />
</svg>

注意：绘制复杂的path路径应尽量借助设计工具，人为计算path的d属性耗时耗力，也不是目前的学习重点。

path的其余经常使用属性有：

• stroke 定义路径颜色
• stroke-width 定义路径宽度，单位像素
• stroke-dasharray 用于建立虚线
• fill 定义path闭合区域的填充颜色

基于svg path实现图片路径动画

点击这里查看demo：

WPS Logo Demo

这个效果的实现并不复杂，首先咱们须要wps logo的svg资源，能够借助photoshop 和 Adobe Illustrator 从图片中生成svg路径。

第一步，使用ps魔棒工具去除白色背景，并选中路径，而后右键，创建工做路径：

点击菜单-> 文件 -> 导出 -> 导出路径到ai ：

在ai中选中路径，存储为svg格式。而后在编辑器中打开svg便可查看到path的d属性了！

以后，在代码里建立svg图形，并指定其stroke-width等属性。

动画方面，使用css animation控制path的stroke-dasharray属性来实现动画，这个属性能够将path绘制为虚线。

如 stroke-dasharray: 10px 20px; 就定义了实线的长度是10px，空白的长度是20px，以下图所示：

利用这个原理，咱们将实线的长度从0逐渐变为path总长度，将空白的长度逐渐变为0，就能够实现相似“绘图”的效果了~

#wps-logo-path {
  animation: wpsLogo 3s ease-in-out forwards;
}

@keyframes wpsLogo {
    0% {
        stroke-dasharray: 0 1078px;
    }
    100% {
        stroke-dasharray: 1078px 0;
    }
}

path的总长度能够这样计算 $('#wpsLogoPath')[0].getTotalLength()

动画过程当中，能够设置监听，在动画的不一样阶段执行不一样的钩子函数：

document.addEventListener('webkitAnimationEnd', function(e) {

}

代码中，咱们还定义了线性渐变，用来填充path闭合区域内的背景值，fill: url(#wpslinear)

<defs>
  <linearGradient id="wpslinear" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#FB5A43"/>
    <stop offset="100%" stop-color="#FD3258"/>
  </linearGradient>
</defs>

到这一步，svg path动画的demo就基本作完了，咱们可利用这个原理实现更复杂的svg path动画，如多个path的过渡动画，物体沿不规则path移动等等。svg技术自己仍是很复杂的，短期掌握svg有必定的难度，必要时能够借助svg动画库实现须要的设计效果，作到技术灵活服务于产品。