MarkPoint是什么效果？如上圖，一閃一閃亮晶晶的效果，這是在Echarts中對(duì)應(yīng)的效果。我最早看到的是騰訊的一個(gè)Flash的版本，顯示當(dāng)前QQ在線人數(shù)的全國(guó)分布效果，感覺(jué)效果很炫，當(dāng)時(shí)也在想，怎么用JS，HTML5來(lái)做出類似的效果，但說(shuō)實(shí)話，沒(méi)什么思路，甚至懷疑JS是否做不出來(lái)這種逼真的效果來(lái)。終于看到Echarts中提供了這個(gè)功能。下面就扒開(kāi)她絢麗的衣著，一起走進(jìn)MarkPoint的世界。
數(shù)據(jù)
首先還是先看看數(shù)據(jù)上的邏輯。上圖是一個(gè)數(shù)據(jù)格式，placeList包括每一個(gè)關(guān)鍵點(diǎn)的名稱和坐標(biāo)位置，而在風(fēng)格中主要有name，可以設(shè)置為強(qiáng)中弱三種，分別對(duì)應(yīng)MarkPoint圖中白藍(lán)綠三種效果，類型是中國(guó)地圖，而具體的風(fēng)格在存儲(chǔ)在markPoint字段中。我們?cè)诳纯磎arkPoint字段里面是什么內(nèi)容。
如上就是markPoint里面的主要內(nèi)容，這里，每一個(gè)點(diǎn)是一個(gè)鉆石（diamond）的樣式，符號(hào)大小，還有一個(gè)effect的屬性，這就是它的動(dòng)畫風(fēng)格，而data則用來(lái)加載placeList的信息。
綜上所述，對(duì)于使用者而言，指定好要顯示markPoint的位置，也就是placeList，然后在賦予它們的具體效果，中國(guó)范圍，強(qiáng)弱類型以及具體的形狀（鉆石，矩形或圓形等），這樣就可以得到MarkPoint這樣的閃爍效果。
原理
其實(shí)說(shuō)原理有點(diǎn)夸大其詞。通過(guò)數(shù)據(jù)層面，可以看出來(lái)每一個(gè)點(diǎn)都是獨(dú)立的，如果你放大后，基本可以判斷出來(lái)各自完成自己的動(dòng)畫效果，并一致循環(huán)下去。如果縮小后，你會(huì)發(fā)現(xiàn)所有的markPoint并不是同步的，頻率各不相同，顯得雜亂無(wú)章。（推薦TED的視頻：The First Secret of Great Design - Tony Fadell - TED Talks）。
這樣，這個(gè)問(wèn)題就分解成了兩個(gè)部分：
如何模擬每一個(gè)點(diǎn)的閃爍效果
如何管理大規(guī)模的點(diǎn)的閃爍周期
閃爍效果的實(shí)現(xiàn)
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無(wú)線安全]玩轉(zhuǎn)無(wú)線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問(wèn)題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來(lái)看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式