數據可視化之MarkPoint

      MarkPoint是什么效果？如上圖，一閃一閃亮晶晶的效果，這是在Echarts中對應的效果。我最早看到的是騰訊的一個Flash的版本，顯示當前QQ在線人數的全國分布效果，感覺效果很炫，當時也在想，怎么用JS，HTML5來做出類似的效果，但說實話，沒什么思路，甚至懷疑JS是否做不出來這種逼真的效果來。終于看到Echarts中提供了這個功能。下面就扒開她絢麗的衣著，一起走進MarkPoint的世界。

數據

      首先還是先看看數據上的邏輯。上圖是一個數據格式，placeList包括每一個關鍵點的名稱和坐標位置，而在風格中主要有name，可以設置為強中弱三種，分別對應MarkPoint圖中白藍綠三種效果，類型是中國地圖，而具體的風格在存儲在markPoint字段中。我們在看看markPoint字段里面是什么內容。

      如上就是markPoint里面的主要內容，這里，每一個點是一個鉆石（diamond）的樣式，符號大小，還有一個effect的屬性，這就是它的動畫風格，而data則用來加載placeList的信息。

      綜上所述，對于使用者而言，指定好要顯示markPoint的位置，也就是placeList，然后在賦予它們的具體效果，中國范圍，強弱類型以及具體的形狀（鉆石，矩形或圓形等），這樣就可以得到MarkPoint這樣的閃爍效果。

原理

      其實說原理有點夸大其詞。通過數據層面，可以看出來每一個點都是獨立的，如果你放大后，基本可以判斷出來各自完成自己的動畫效果，并一致循環下去。如果縮小后，你會發現所有的markPoint并不是同步的，頻率各不相同，顯得雜亂無章。（推薦TED的視頻：The First Secret of Great Design - Tony Fadell - TED Talks）。

      這樣，這個問題就分解成了兩個部分：

• 如何模擬每一個點的閃爍效果

• 如何管理大規模的點的閃爍周期

閃爍效果的實現

      如上，是同一個markPoint在不同幀下的效果，大家可以想想一下這樣一個從小到大然后再到小的過程，則完成了閃爍的效果，如果你足夠細心會發現里面有一個blur的平滑效果，這樣會讓閃爍有一個平滑的效果，類似字體的抗鋸齒，看起來有一種朦朧的感覺。當然，blur這個效果是怎么實現的？其實在之前風向圖和熱點圖中都采用了這個技術，就是和上一幀的圖片進行一個半透明的疊加。然后在配合一個動畫特效（animation effect），閃爍的效果就完成了。

多點閃爍動畫的實現

      如上是在某一幀的截圖。俗話說的好，一花獨放不是春，所以如何控制這么多的點，風格各不相同的markPoint，而且頻率各不相同，這就涉及到動畫類和隨機數之間的內容，同時在框架上能夠貫穿整個渲染周期。

      我們看一下在Echarts上的流程，先是初始化的流程：

      如同，MarkPoint的數據初始化主要是Map類讀取數據，然后在Base中調用getLargeMarkPointShape來創建這些點。

      在Base中，調用animationEffect指定單個MarkPoint的閃爍風格，這里需要額外說明一下，雖然在數據中動畫風格只是簡單的show:true.但實際上，最終是采用的config.js中默認的動畫風格，比如周期，是否循環，跳動等，如下圖所示：

      而在ecEffect中，調用largePoint來隨機設置，實現各自不同的動畫周期。從而完成整改初始化的過程。

      初始化結束后，則進入到了渲染階段。渲染是采用的zrender框架，而markPoint則是由Animation來驅動，每一幀都會調用update，在onframe中來設置每一個點當前的狀態，比如大小，根據時間周期下，線性插值計算出它應該的大小（下面會詳細說明），最后調用Symbol::buildPath實現所有markPoint的閃爍效果。

      這就是初始化準備和渲染周期的大致一個過程，下面對主要功能模塊進行介紹

實現代碼

      如上，只是指定了blur為true，則實現了平滑效果，簡單不？其實這用了一個雙緩存的技術，在zrender中有一個Layer對象，每一幀都會疊加上一幀的效果，并保存。具體的實現可以參閱zrender的Layer類，比較簡單。

閃爍動畫有點復雜，首先，怎么控制一個markPoint從大到小的這樣一個線性變換的過程，動畫類是如何控制的，另外對于不同的markPoint，有這么多點，同一幀下每個點對應的風格也不盡相同，這又是如何控制的。

      首先，這要介紹一下zrender中的Animation類，一個非常好用強大的類，先看看使用代碼，如下：

      首先，這是一個when.js風格的使用方式，該動畫主要用來控制effectShape的‘style’屬性，即每一幀來對style屬性進行更新。那更新什么內容呢？這就是clip對象了。

      這里有四個when，再加上最上面的隨機的初始大小，也就是說一個周期有5個控制點，其中clip1 = 100，而clip2 = 0,，這里對應的是該控制點對應markPoint的size的百分比。也就是在這個周期中，按照如下的插值算法來控制該點的size。不知道說清楚了沒有，可以自己調試一下代碼看看。

      這是在一幀下插值計算當前size的百分比，這里采用的線性插值，還有其他多種算法可以選擇，這里是size，所以用的最簡單的線性插值，你也可以實現軌跡，或者加速度等不同的公式來實現對應的效果。

      插值計算完了，付給對應的style中randomMap+i屬性上。這里，一共常見了20個Animation類，這樣就會有20個動畫效果，來實現頻率各自不同的閃爍效果。最后會調用zrender的refresh，最終來到Symbol的渲染階段。這里，每一個點根據自己的索引選擇對應的縮放比例percent，然后進入下面的繪制階段。

      另外，在對每一個點的渲染函數中，進行了進一步的優化，代碼如下，根據大小進行了簡化。

      Ok，到此，我想到的關于MarkPoint的內容都已經完畢，另外這個類涉及到一個大規模點渲染，等有機會對這方面詳細研究后在和大家分享。

好想被風刮走 刮遍整個地球的那種 在我愛的城市停 走 停 走