作者|數瀾UED團隊

> 沒有飛線的地圖就像一個髮際線上移的中年人一樣平淡無奇。 —— By 胖子

每年春運和雙十一的統計圖都因為有飛線動效才更加吸引眼球，今天要為大家帶來一根漂亮飛線要用什麼姿勢生成才能。

## SVG

本篇是主講SVG來繪製飛線的，所以強大的SVG必定能完成我們繪製飛線效果的各種需求。首先我先為各位介紹下完成這根線需要用到的一些小知識點。

**Path元素**

[path元素](https://link.zhihu.com/?target=https%3A//developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths)
是SVG基本形狀中最強大的一個，它不僅能建立其他基本形狀，還能建立更多其他形狀。這裡我們只需要用它來繪製一條曲線。

首先我們先建立好這根曲(tou)線(fa)。

![](https://pic2.zhimg.com/80/v2-4c7878dd26b5b11d3ddb6bc87763d049_hd.jpg)

OK，這根頭髮我們已經在螢幕上放好了，如果你將path元素的曲線無限放大會發現，其實它是由非常多的座標點相互連線組成的。這個時候腦洞放一下，如果我們能獲取到這些點是不是就是獲取了線的繪製軌跡。就可以逐幀繪製飛線了動效了。

![](https://pic3.zhimg.com/80/v2-5e13931cf9c7c6346692661530c45c1e_hd.jpg)
那要如何來獲取和使用這些座標點呢？

勤奮的查閱MDN，我發現這個問題強大的SVG已經幫我們解決了，可以使用`getTotalLength`和`getPointAtLength`這兩個方法來搞定。

#### [SVGPathElement.getTotalLength]([https://developer.mozilla.org/en-US/docs/Web/API/SVGPathElement/getTotalLength](https://developer.mozilla.org/en-US/docs/Web/API/SVGPathElement/getTotalLength)

但因為SVG中繪製的都是向量圖，所以path元素不存在是由若干個點構成的，所以呼叫該方法會返回該path元素從起始點到終點的總長度（浮點數）。

儘管和預期有所差別，但搭配上下面的`getPointAtLength`方法我們依然能完成之前預想的實現方法。

#### [SVGPathElement.getPointAtLength](https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength)

呼叫該方法會根據傳入到起點的距離值來計算返回對應的path元素座標點的位置x、y值。

透過組合使用這兩方法，我們可以自己定義這段軌跡上有有多少個座標點，並且可以獲取對應這些點的座標值。

下面我們使用D3來操作這些DOM節點獲取對應的節點資料資訊

首先我們需要先定義好飛線軌跡是由多少個點構成的：

`const pointNum = 1500`

接下來我們可以透過方法將獲取到的軌跡總長度進行平分得到單位長度`unit`，然後再呼叫`getPointAtLength`獲取對應距離的座標值。

```js
const pointNum = 1500
const path = d3.select('#line')
const pathline = path.node()
const totalLength = pathline.getTotalLength()
const points = []

const unit = totalLength / pointNum

for (let i = 0; i <= pointNum; i += 1) {
  points.push(pathline.getPointAtLength(i * unit))
}
```

**接下來我們就可以透過這些資料繪製飛線動效了！**

重要的話我們來強調三遍。

### 飛線動效-1

如下圖，其實實現飛線具體頭部深、尾部淺效果可以透過繪製若干透明度逐漸遞減的圓來達到。（Echarts飛線使用類似思路）

![](https://pic4.zhimg.com/80/v2-ccc02fb48b9266a37ce22f020f9d409f_hd.jpg)

接下來所需要做的就是讓上面的飛線像下圖的矩形一樣，讓它按照對應的軌跡路線來進行移動。

![](https://pic3.zhimg.com/v2-79650f71317b6f7b157f3b43bc322d32_b.webp)

但由於飛線是由若干個圓重疊組成的，所以不能像矩形一樣只需要控制一個元素的`x`、`y`值就搞定運動行為。尤其是如下圖這樣的曲線運動的情況。

![](https://pic2.zhimg.com/v2-f6cffc4d95cfa4fa8c7012efed3494b5_b.webp)

為此我們需要宣告一個飛線類，首先需要定義飛線的長度、樣式速度等特性。

由於之前已經宣告好該路徑軌跡拆分成多少段了，所以在此我們取個巧定義飛線的長度是其中`lineLen`段的長度，設定速度為每次渲染移動`speed`段。

```js
class FlyLine {
  totalNum = 1500
  lineLen = 150
  speed = 15
  radius = 2.5
  fill = 'rgb(255, 200, 65)'
  circles = []
  constructor(){
    // percent的用處會在後面體現
    this.percent = this.lineLen
  }
}
```

![](https://pic2.zhimg.com/80/v2-53765f7e487fd4bdd8b53bed91a0da35_hd.jpg)

> 上面的說明看不懂？靈魂畫手圖片解析

定義好飛線的特性變數之後，接下來我們可以繪製具體的飛線了。

因為飛線是若干`circle`元素堆疊成的，所以我們在此提煉出一個公有的畫圓方法：

```js
class FlyLine {
  ...
  ...
  _drawCircle(cx, cy, i) {
    const {radius, circles, fill} = this
    if (circles[i]) {
      circles[i].attr("cx", cx).attr("cy", cy)
    } else {
      circles.push(
        circleG1
          .append("circle")
          .attr("cx", cx)
          .attr("cy", cy)
          .attr("r", radius)
          .attr("fill", fill)
          .attr('fill-opacity', i * 0.001)
      )
    }
  }
}
```

根據傳入位置、索引值建立或更新`circle`元素的位置和元素的透明度。

現在我們來繪製第一個靜態的飛線：

首先需要確定繪製飛線是由多少段小線段組成的（實際是由多少個圓相臨近堆疊成的），接著我們就可以按照由淺及深的順序開搞了。

```js
class FlyLine {
  ...
  ...
  _drawFlyLine(){
    const {points, percent, lineLen} = this
    for (let i = percent - lineLen, j = 0; i < percent; i += 1, j += 1) {
      this._drawCircle(points[i].x, points[i].y, j)
    }
  }
 }
```

![](https://pic1.zhimg.com/v2-575236133d514431f73ae44af2c7a0dc_b.webp)

```js
class FlyLine {
    ...
    ...
    animate() {
      const {lineLen, speed, totalNum} = this
      this._drawFlyLine()
      this.percent = this.percent + speed > totalNum ? len : this.percent + speed
      requestAnimationFrame(() => this.animate())
    }
  }
```

這下之前定義的percent就派上用場了

此時的`percent`就如同`for`迴圈中常用的`i`變數一樣，逐漸自增`speed`，當到頭就歸零重新往復。

現在整個飛線動效的邏輯都清晰了：

`FlyLine.animate`方法本質上就是個復讀機，一遍一遍的讓`percent`變數由小到大變化，控制飛線由起始點到軌跡終點移動。

![](https://pic1.zhimg.com/80/v2-a2d1d1059e19da427b529ca307f1a368_hd.jpg)

`FlyLine._drawFlyLine`方法的作用就是根據`percent`變數的值建立or更新飛線位置。

`FlyLine._drawCircle`就更不用說了，苦逼小弟，建立or更新`circle`元素的屬性。`percent`變數更新一次，它要被苦逼的呼叫`lineLen`次。

**現在這根飛線終於好好的動起來啦，真TM不容易。為了講明白廢了我不少（無用的）腦細胞。**

當然，這個方法還不夠完美，有許多需要最佳化的點，例如：

1.  飛線的長度不能超過我們對軌跡分割的段數。
    
2.  畫一根飛線就要生成/更新幾百個`circle`元素，浪費瀏覽器效能。

拋磚引玉，希望能夠給大家提供一個好的思路來製作出更酷炫的飛線動效來。

**飛線動效-2**

算了，等不及你們來引玉了。我自己再繼續開搞吧。

在上面提到的繪製一個飛線要上百個`circle`元素，這樣非常浪費瀏覽器效能。

有沒有好點的辦法解決這個優秀前端不能忍受的痛呢？有！還真有！！

下面讓我們開搞！！

我們知道NB的`path`元素可以繪製任意圖形，上文中的飛線軌跡也是這樣得到的。

這個時候我就在想了，D3相當NB了。它的過渡(`transition`)效果也是相當可以的。為什麼我們不能直接拿來繪製飛線動效呢？

首先我們知道D3擁有`attrTween`這個屬性過渡方法，我們可以在其中返回插值函式，根據傳入的進度值不斷變化元素的屬性，呈現過渡動畫效果。

現在先讓我們用`path`畫一根直線：

```js
const path = container
  .append('path')
  .attr('fill', 'none')
  .attr('stroke', 'none')
  .attr('d', 'M50, 50  600, 50')
  .attr('id', 'line')

const pathline = path.node()
const len = pathline.getTotalLength()

const animate = () => {
  container.select('#flyline').remove()
  container.append('path')
  .attr('stroke', '#19D0DC')
  .attr('fill', 'none')
  .attr('id', 'flyline')
  .attr('stroke-width', '3px')
  .transition()
  .duration(5000)
  .attrTween('d', function(d) {
    const coord = path.attr('d').replace(/(M|Q)/g, '').match(/((\d|\.)+)/g)
    var x1 = +coord[0], y1 = +coord[1] // 起點
    return function(t) {
      const p = pathline.getPointAtLength(t * len)
      return `M${x1}, ${y1} ${p.x}, ${p.y}`
    }
  })
}

setInterval(animate, 5200)
```

已知直線路徑長度和起點，並且這根線也不會拐彎，所以直接根據插值函式傳入的進度值，透過使用`getPointAtLength`方法得到對應時刻的座標值更新`path`元素的"d"屬性即可。

![](https://pic1.zhimg.com/v2-be283886671ecd3bf9665ef6ee52d490_b.webp)

直的搞定了，現在就是考驗我們的時候了。我們需要使用熟練的技巧將耿直的它給**掰彎**了。

下圖是一根二次貝塞爾曲線的繪製過程。因為軌跡已知，所以在各個階段的起始點都是可以透過`getPointAtLength`方法獲得的。唯一需要計算的只有不同階段貝塞爾曲線控制點的位置。可以看到繪製它的過程中需要持續更新控制點，為此我去查了下二次貝塞爾曲線控制點的計算公式。

![](https://pic1.zhimg.com/v2-ff451ed5bb7f32c59ab225128c60f788_b.webp)

![](https://pic1.zhimg.com/80/v2-f39c6ec70279d81357e67fb5c1c37380_hd.jpg)
```js
.attrTween('d', function(d) {
    const coord = path.attr('d').replace(/(M|Q)/g, '').match(/((\d|\.)+)/g)
    var x1 = +coord[0], y1 = +coord[1], // 起點
        x2 = +coord[2], y2 = +coord[3], // 控制點
        x3 = +coord[4], y3 = +coord[5]; // 終點
    return function(t) {
      const p = pathline.getPointAtLength(t * len)  
       // 根據插值方法進度實時計算當前控制點位置
      const x = (1 - t) * x1 + t * x2
      const y = (1 - t) * y1 + t * y2
      return `M${x1}, ${y1} Q${x},${y} ${p.x}, ${p.y}`
    }
  })
```

程式碼下過如下：

![](https://pic2.zhimg.com/v2-8b542709f061aadfe0f9e1517b048291_b.webp)

這根線終於能做到從頭飛到尾了，但是尾巴有點長。這可急壞老父親了，長殘了將來可怎麼找物件啊！？

別急，畢竟他是生在我中國的一根線。**線醜不怕，美顏相機來湊啊！**

我們可以用濾鏡來先來幫它**磨磨皮**：

SVG為我們提供了蒙板遮罩等功能，我們只需要在蒙板中定義了一個透明度從內到外逐漸降低徑向漸變的圓。然後讓他一直跟著飛線的頭移動就好了。

```js
const mCircle = d3.select('#m-circle')
  .attrTween(function(d){
    ...
    const x = (1 - t) * x1 + t * x2
    const y = (1 - t) * y1 + t * y2
    mCircle.attr('cx', x)
      .attr('cy', y)
  })
```

**美顏後的效果：**

![](https://pic2.zhimg.com/v2-8b542709f061aadfe0f9e1517b048291_b.webp)
##### 參考資料：

[1. 地圖與飛線](https://link.zhihu.com/?target=https%3A//www.jianshu.com/p/69dd56c28248)

[2. 貝塞爾曲線原理](https://link.zhihu.com/?target=https%3A//www.cnblogs.com/hnfxs/p/3148483.html)

##### 參考DEMO連結：

[https://codepen.io/Narcissus_Li](https://link.zhihu.com/?target=https%3A//codepen.io/Narcissus_Liu/pen/NeLwYp)

##### 更多文章推薦：

[資料視覺化的意義與案例分享]([https://bbs.dtwave.com/forum/show/53](https://bbs.dtwave.com/forum/show/53)

[驚! 大屏還能長這樣！]([https://bbs.dtwave.com/forum/show/54](https://bbs.dtwave.com/forum/show/54)

[家譜視覺化案例分享]([https://bbs.dtwave.com/forum/show/51](https://bbs.dtwave.com/forum/show/51)

[如何給資料選到合適的圖表？]([https://bbs.dtwave.com/forum/show/63](https://bbs.dtwave.com/forum/show/63)

一根飛線的故事-SVG篇

相關文章