svg系列：2. svg path完成图片途径动画

2019年8月31日 288次阅读 来源: 棱镜

原文链接

为了以后产物能够的动画需求，我们须要调研种种可行的前端动画手艺。置信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魔棒东西去除白色背景，并选中途径，然后右键，竖立事情途径：

《svg系列：2. svg path完成图片途径动画》

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

《svg系列：2. svg path完成图片途径动画》

在ai当选中途径，存储为svg花样。然后在编辑器中翻开svg即可检察到path的d属性了！

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

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

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

《svg系列：2. svg path完成图片途径动画》

应用这个道理，我们将实线的长度从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动画库完成须要的设想结果，做到手艺天真服务于产物。

    原文作者：棱镜
    原文地址: https://segmentfault.com/a/1190000018704640
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞