SVG+CSS动画实现动效（流光、呼吸等效果）

流光效果

• 绘制流光线条
  创建SVG，根据UI给的背景图，定位到图上每条管道（即流光线条的路径）的起始点以及拐点，绘制折线。绘制折线的时候按照下图方框通过class分组，这几组的光线流动是同时出发的。
  svg相关知识点：https://www.w3school.com.cn/svg/index.asp

<svg width="100%" height="100%" class="added-wrap_svg" :class="{toPause: pause}">
    // 线条光晕
    <filter id="filter1" x="-120%" y="-120%" width="400%" height="400%">
      <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0"></feOffset>
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="6"></feGaussianBlur>
      <feBlend in="SourceGraphic" in2="blurOut" mode="multiply"></feBlend>
    </filter>
    // 绘制折线
    <polyline class="cleanToMarket" points="1233,976 1239,983 1267,983"/>
    <polyline class="cleanToMarket" points="1233,992 1239,999 1274,999"/>
    <polyline class="cleanToMarket" points="1226,1010 1284,1010"/>
    <polyline class="cleanToMarket" points="1233,1028 1239,1022 1274,1022"/>
    <polyline class="cleanToMarket" points="1232,1045 1239,1039 1267,1039"/>
</svg>

折线样式

polyline{
  stroke: #E5DA40;
  fill: transparent;
  stroke-width: 2;
  stroke-linecap: round;
  animation: act 3s linear infinite;
}

• 让光线动起来
  上边画出来的是一整条长的实线，接下来我们会用到SVG的两个属性：stoke-dasharray和stroke-dashoffset。

stoke-dasharray：用于创建虚线。
stroke-dasharray = ‘10’
stroke-dasharray = ‘10, 5’
stroke-dasharray = ‘20, 10, 5’

stroke-dasharray为一个参数时： 其实是表示虚线长度和每段虚线之间的间距，
如：stroke-dasharray = ‘10’ 表示：虚线长10，间距10，然后重复虚线长10，间距10
两个参数或者多个参数时：一个表示长度，一个表示间距，
如：stroke-dasharray = ‘10, 5’ 表示：虚线长10，间距5，然后重复虚线长10，间距5；
如：stroke-dasharray = ‘20, 10, 5’ 表示：虚线长20，间距10，虚线长5，接着是间距20，虚线10，间距5，之后开始如此循环

stroke-dashoffset：这个属性是相对于起始点的偏移，正数偏移x值的时候，相当于往左移动了x个长度单位，负数偏移x的时候，相当于往右移动了x个长度单位。

感兴趣的可以参考https://www.cnblogs.com/daisygogogo/p/11044353.html

这里相当于一条管道上，只有一段虚线，然后让这条虚线从左至右移动起来。
首先获取到所有的折线

var char = 'http://www.w3.org/2000/svg'
var polylines = document.getElementsByTagNameNS(char, 'polyline')

每条折线，获取到折线的长度，设置虚线，如第一组，设置虚线长80，间距为该条折线的长度，将偏移量设置为80px，虚线就会往左移动80px，这样初始时相当于虚线隐藏了。

然后，设置虚线移动动画，即设置偏移量为折线的长度。

这样，流光效果就出来了。

polylines.forEach((i, index) => {
      // 获取折线长度
      const len = i.getTotalLength()
      // 设置滤镜
      i.style.filter = 'url(#filter1)'
      // 设置虚线和间隔
      i.style.strokeDasharray = '80,' + len
      // 设置偏移量
      i.style.strokeDashoffset = 80
      // 设置动画名称
      i.style.animationName = 'act' + index
      var style = document.styleSheets[0]
      // 插入动画规则
      style.insertRule('@Keyframes act' + index + '{100% {stroke-dashoffset: ' + (-(len)) + '}}', 1)
      if (i.classList[0] === 'cleanToMarket') {
        i.style.strokeDasharray = '20,' + len
        i.style.strokeDashoffset = 20
        i.style.strokeWidth = 1
        // 动画延迟
        i.style.animationDelay = '3s'
      }
      if (i.classList[0] === 'marketToEmpowerment') {
        i.style.strokeDasharray = '30,' + len
        i.style.strokeDashoffset = 30
        i.style.strokeWidth = 1
        i.style.animationDelay = '6s'
      }
      if (i.classList[0] === 'operatioCcenter') {
        i.style.animationDelay = '9s'
      }
      if (i.classList[0] === 'empowermentToLib') {
        i.style.strokeDasharray = '60,' + len
        i.style.strokeDashoffset = 60
        i.style.strokeWidth = 1
        i.style.animationDelay = '9s'
      }
      if (i.classList[0] === 'libToEmpowerment') {
        i.style.strokeDasharray = '60,' + len
        i.style.strokeDashoffset = 60
        i.style.strokeWidth = 1
        i.style.animationDelay = '12s'
      }
      if (i.classList[0] === 'libToService') {
        i.style.animationDelay = '12s'
      }
      if (i.classList[0] === 'serviceToApply') {
        i.style.animationDelay = '15s'
      }
 })

上下浮动

@keyframes float{
  0%{transform:translateY(0)}
  50%{transform:translateY(6px)}
  100%{transform:translateY(0)}
}

忽闪

@keyframes dataMarket {  0% {    opacity: 1;  }  50% {    opacity: 0;  }  100% {    opacity: 1;  }}

发光

@keyframes showBlur{
  0% {
    filter: blur(0px);
  }
  50% {
    filter: blur(50px);
  }
  100% {
    filter: blur(0px);
  }
}

动画暂停

animation-play-state: paused