手把手教你DIY一個春運遷徙圖(一)

來源：手把手教你DIY一個春運遷徙圖(一)

作者：木的樹（轉載已獲得作者許可，如需轉載請與原作者聯繫）

換了新工作，也確定了我未來數據可視化的發展方向。新年第一篇博客，又逢春運，這篇技術文章就來交給大家如何做一個酷炫的遷徙圖（支持移動哦）。（求star 代碼點這裡）

效果預覽：

遷徙圖的製作思路分為靜態的元素和變換的動畫。其中動畫是圍繞著靜態的元素變換，所以我們首要的任務就是如何繪製靜態的元素。

仔細看一下，靜態的元素分為弧線（Arc）、弧線端點的箭頭(Marker)，動畫部分主要是弧線終點向脈衝波一樣的圓（Pulse），以及像流星一樣的動態小箭頭和弧線的光暈，這兩個我們放在一起成為Spark。我們可以看到Spark主要在弧線上運動，如果你仔細觀察一下會發現終點處點頭的指向也是朝著終點處的切線方向，所以我們把主要的任務放在如何根據兩個點繪製一段弧線。

我們要繪製這段弧線就要知道圓心和半徑，而數學定理告訴我們的是三點定圓，過兩個點的圓有無數個，所以我們只能找一個比較合適的圓。

所以現在的問題變成了已知兩點pointF和pointT，求一個合適的圓心pointC (xc, yc)；

根據pointF和pointT所以我們能夠確定一條直線，他的斜率 kt =（yt - yf）/ (xt - xf);

根據PointF和pointT我們能夠計算出他們的中點pointH=(m, n); m = (xt - xf) / 2, n = (yt - yf) / 2;

經過兩點的圓一定在他們兩點的中垂線上，而直線的中垂線斜率kl與直線的斜率kt存在數學關係：kl * kt = -1；

把我們的參數全部套入這個公式可得：

((yc - n）/ (xc - m)) * (（yt - yf）/ (xt - xf)) = -1;

接著變換一下：

(yc - n) / (xc - m) = -(xt - xf) / (yt - yf);

去掉礙事的負號：

(yc - n) / (xc - m) = (xt - xf) / (yf - yt);

再變換一下：

（yc - n）/ (xt - xf) = (xc - m) / (yf - yt) = factor;

到此我們得到：

yc - n = (xt - xf) * factor;

xc - m = (yf - yt) * factor;

這兩行公式中都各存在兩個位置參數(yc、factor) 和 （xc、factor）；所以只要找到一個合適的factor就能夠得到合適的圓心進而得到半徑起始角和終止角以及半徑。有了這些那麼Marker的指向、Spark的軌跡都可以確定了。

現在需要做的是把上述過程轉換為代碼：

var Arc = (function() {n var A = function(options) {n var startX = options.startX,n startY = options.startY,n endX = options.endX,n endY = options.endY;nn //兩點之間的圓有多個，通過兩點及半徑便可以定出兩個圓，根據需要選取其中一個圓n var L = Math.sqrt(Math.pow(startX - endX, 2) + Math.pow(startY - endY, 2));n var m = (startX + endX) / 2; // 橫軸中點n var n = (startY + endY) / 2; // 縱軸中點n var factor = 1.5;nn var centerX = (startY - endY) * factor + m;n var centerY = (endX - startX) * factor + n;nn var radius = Math.sqrt(Math.pow(L / 2, 2) + Math.pow(L * factor, 2));n var startAngle = Math.atan2(startY - centerY, startX - centerX);n var endAngle = Math.atan2(endY - centerY, endX - centerX);nn // this.L = L;n this.startX = startX;n this.startY = startY;n this.endX = endX;n this.endY = endY;n this.centerX = centerX;n this.centerY = centerY;n this.startAngle = startAngle;n this.endAngle = endAngle;n this.startLabel = options && options.labels && options.labels[0],n this.endLabel = options && options.labels && options.labels[1],n this.radius = radius;n this.lineWidth = options.width || 1;n this.strokeStyle = options.color || #000;n this.shadowBlur = options.shadowBlur;n };nn A.prototype.draw = function(context) {n context.save();n context.lineWidth = this.lineWidth;n context.strokeStyle = this.strokeStyle;n context.shadowColor = this.strokeStyle;n context.shadowBlur = this.shadowBlur || 2;nn context.beginPath();n context.arc(this.centerX, this.centerY, this.radius, this.startAngle, this.endAngle, false);n context.stroke();n context.restore();nn context.save();n context.fillStyle = this.strokeStyle;n context.font = "15px sans-serif";n if (this.startLabel) {n context.fillText(this.startLabel, x, y);n }n if (this.endLabel) {n context.fillText(this.endLabel, x, y);n }n context.restore();n };nn return A;n })();n

理解了上述過程，我們就已經成功了一半。下一步的重點就是動畫的繪製。關於動畫首先要了解requestAnimationFrame,不知道的小夥伴要去惡補一下啦。好啦，言歸正傳。Spark動畫分為兩部分，一部拖尾效果，一部分是弧線光暈效果，當你第一次打開時候會發現，弧線光暈會隨著小箭頭運動，到達終點後光暈停止運動，剩下小箭頭自己運動。由於每個圓的大小不一致，我們需要在每次動畫過程中控制光暈和小箭頭的位置。

由於他們是在圓弧上運動，所以我們只要每次計算出他們新的弧度就可以了，弧度的步長可以這樣來制定：每走過20像素所轉過的弧度就是各個Spark的步長啦。

所以factor = 20 / radius;

每次繪製時，光暈與小箭頭的弧度位置為：

var endAngle = this.endAngle;n // 勻速n var angle = this.trailAngle + this.factor;n

弧度確定之後我們就能得到小箭頭的位置，但是目前並不能得到小箭頭的方向。根據canvas中角度的特點，再由簡單的幾何知識，可以得到小箭頭的旋轉方嚮應該為：rotation = angle + Math.PI / 2;

實際上為了保證在移動端的性能，本次實例中並沒有明顯的拖尾。但拖尾還是一個比較常見的特效，所以我們需要把它掌握。拖尾效果一般是對一個元素進行多次複製，併線性的漸變這隊影元素的大小寬度以及顏色的透明度在達到由粗到細由大到小顏色有深變淺的效果。那麼每次繪製時候都需要知道這隊影元素每個的位置，每個的線寬以及每個的顏色，根據上面討論的元素位置需要根據弧度來確定。我們說過他們的位置是漸變的，漸變的步長可以這樣指定，假設從頭到尾的弧長為80，那麼每個影元素的之間的間隔為：

this.deltaAngle = (80 / Math.min(this.radius, 400)) / this.tailPointsCount;n

// 拖尾效果n var count = this.tailPointsCount;n for (var i = 0; i < count; i++) {n var arcColor = utils.calculateColor(this.strokeStyle, 0.3-0.3/count*i);n var tailLineWidth = 5;n if (this.trailAngle - this.deltaAngle * i > this.startAngle) {n this.drawArc(context, arcColor,n tailLineWidth - tailLineWidth / count * i,n this.trailAngle - this.deltaAngle * i,n this.trailAnglen );n }n }n

所以整個Spark的代碼如下：

var Spark = (function() {n var S = function(options) {n var startX = options.startX,n startY = options.startY,n endX = options.endX,n endY = options.endY;nn //兩點之間的圓有多個，通過兩點及半徑便可以定出兩個圓，根據需要選取其中一個圓n var L = Math.sqrt(Math.pow(startX - endX, 2) + Math.pow(startY - endY, 2));n var m = (startX + endX) / 2; // 橫軸中點n var n = (startY + endY) / 2; // 縱軸中點n var factor = 1.5;nn var centerX = (startY - endY) * factor + m;n var centerY = (endX - startX) * factor + n;nn var radius = Math.sqrt(Math.pow(L / 2, 2) + Math.pow(L * factor, 2));n var startAngle = Math.atan2(startY - centerY, startX - centerX);n var endAngle = Math.atan2(endY - centerY, endX - centerX);nn // 保證Spark的弧度不超過Math.PIn if (startAngle * endAngle < 0) {n if (startAngle < 0) {n startAngle += Math.PI * 2;n endAngle += Math.PI * 2;n } else {n endAngle += Math.PI * 2;n }n }nn this.tailPointsCount = 5; // 拖尾點數n this.centerX = centerX;n this.centerY = centerY;n this.startAngle = startAngle;n this.endAngle = endAngle;n this.radius = radius;n this.lineWidth = options.width || 5;n this.strokeStyle = options.color || #000;n this.factor = 2 / this.radius;n this.deltaAngle = (80 / Math.min(this.radius, 400)) / this.tailPointsCount;n this.trailAngle = this.startAngle;n this.arcAngle = this.startAngle;nn this.animateBlur = true;nn this.marker = new Marker({n x: 50,n y:80,n rotation: 50 * Math.PI / 180,n style: arrow,n color: rgb(255, 255, 255),n size: 2,n borderWidth: 0,n borderColor: this.strokeStylen });n };nn S.prototype.drawArc = function(context, strokeColor, lineWidth, startAngle, endAngle) {n context.save();n context.lineWidth = lineWidth;n // context.lineWidth = 5;n context.strokeStyle = strokeColor;n context.shadowColor = this.strokeStyle;n // context.shadowBlur = 5;n context.lineCap = "round";n context.beginPath();n context.arc(this.centerX, this.centerY, this.radius, startAngle, endAngle, false);n context.stroke();n context.restore();n };nn S.prototype.draw = function(context) {n var endAngle = this.endAngle;n // 勻速n var angle = this.trailAngle + (endAngle - this.startAngle) * this.factor;n var strokeColor = this.strokeStyle;n if (this.animateBlur) {n this.arcAngle = angle;n }n this.trailAngle = angle;n strokeColor = utils.calculateColor(strokeColor, 0.1);nn this.drawArc(context, strokeColor, this.lineWidth, this.startAngle, this.arcAngle);nn // 拖尾效果n var count = this.tailPointsCount;n for (var i = 0; i < count; i++) {n var arcColor = utils.calculateColor(this.strokeStyle, 0.3-0.3/count*i);n var tailLineWidth = 5;n if (this.trailAngle - this.deltaAngle * i > this.startAngle) {n this.drawArc(context, arcColor,n tailLineWidth - tailLineWidth / count * i,n this.trailAngle - this.deltaAngle * i,n this.trailAnglen );n }n }nn context.save();n context.translate(this.centerX, this.centerY);n this.marker.x = Math.cos(this.trailAngle) * this.radius;n this.marker.y = Math.sin(this.trailAngle) * this.radius;n this.marker.rotation = this.trailAngle + Math.PI / 2;n this.marker.draw(context);n context.restore();nn if ((endAngle - this.trailAngle) * 180 / Math.PI < 0.5) {n this.trailAngle = this.startAngle;n this.animateBlur = false;n }n };nn return S;n })();nnSpark源碼n

到目前為止，遷徙圖中主要的技術難點就已經講完了。但如何把它放到地圖上，這個問題我們將在下篇文章中討論。