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