流光效果

• 繪制流光線條
  創(chuàng)建SVG，根據(jù)UI給的背景圖，定位到圖上每條管道（即流光線條的路徑）的起始點以及拐點，繪制折線。繪制折線的時候按照下圖方框通過class分組，這幾組的光線流動是同時出發(fā)的。
  svg相關(guān)知識點：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：用于創(chuàng)建虛線。
stroke-dasharray = ‘10’
stroke-dasharray = ‘10, 5’
stroke-dasharray = ‘20, 10, 5’

stroke-dasharray為一個參數(shù)時： 其實是表示虛線長度和每段虛線之間的間距，
如：stroke-dasharray = ‘10’ 表示：虛線長10，間距10，然后重復(fù)虛線長10，間距10
兩個參數(shù)或者多個參數(shù)時：一個表示長度，一個表示間距，
如：stroke-dasharray = ‘10, 5’ 表示：虛線長10，間距5，然后重復(fù)虛線長10，間距5；
如：stroke-dasharray = ‘20, 10, 5’ 表示：虛線長20，間距10，虛線長5，接著是間距20，虛線10，間距5，之后開始如此循環(huán)

stroke-dashoffset：這個屬性是相對于起始點的偏移，正數(shù)偏移x值的時候，相當(dāng)于往左移動了x個長度單位，負(fù)數(shù)偏移x的時候，相當(dāng)于往右移動了x個長度單位。

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

這里相當(dāng)于一條管道上，只有一段虛線，然后讓這條虛線從左至右移動起來。
首先獲取到所有的折線

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

每條折線，獲取到折線的長度，設(shè)置虛線，如第一組，設(shè)置虛線長80，間距為該條折線的長度，將偏移量設(shè)置為80px，虛線就會往左移動80px，這樣初始時相當(dāng)于虛線隱藏了。

然后，設(shè)置虛線移動動畫，即設(shè)置偏移量為折線的長度。

這樣，流光效果就出來了。文章來源地址http://www.zghlxwxcb.cn/news/detail-812172.html

polylines.forEach((i, index) => {
      // 獲取折線長度
      const len = i.getTotalLength()
      // 設(shè)置濾鏡
      i.style.filter = 'url(#filter1)'
      // 設(shè)置虛線和間隔
      i.style.strokeDasharray = '80,' + len
      // 設(shè)置偏移量
      i.style.strokeDashoffset = 80
      // 設(shè)置動畫名稱
      i.style.animationName = 'act' + index

      var style = document.styleSheets[0]
      // 插入動畫規(guī)則
      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;  }}

發(fā)光

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

動畫暫停

animation-play-state: paused

到了這里，關(guān)于SVG+CSS動畫實現(xiàn)動效（流光、呼吸等效果）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！