整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
天，iH5工具推出一個新的神秘功能——眼動追蹤，可以通過攝像頭捕捉觀眾眼球活動！
為了給大家具體演示該功能的使用，我做了一個案例，供大家參考。
實際效果如下：
案例比較簡單，就是通過眼動功能獲取視覺焦點位置，剔除用戶看中的牌。現(xiàn)在，舞臺的屬性中多了一個“啟用眼動”的選項，另外，還多了一個“啟用攝像頭”的事件。
具體實現(xiàn)如下：
1、素材準(zhǔn)備：隨機六張撲克牌、背景是牌桌
2、核心事件和邏輯：
舞臺 屬性中“啟用眼動”設(shè)置“Yes”
舞臺 添加事件（初始化時“啟用攝像頭”）
確定按鈕 添加事件（輕觸時獲取視覺焦點X/Y，分別賦值給變量x和變量y）
3、最后通過判斷x和y的數(shù)值范圍就能知道用戶看的是哪張牌啦
以上就是iH5最新眼動功能的使用方法，是不是有種地球人已經(jīng)無法阻止iH5的感覺，趕快喊小伙伴試試吧！！！
http://fce6896351ab.ih5.cn/idea/SUKM3VV
（溫馨提示：注意看評論！！！）
事實證明，F(xiàn)lash 已經(jīng)不再是互聯(lián)網(wǎng)視頻瀏覽的必需……新的開放標(biāo)準(zhǔn)已經(jīng)被創(chuàng)立，比如 HTML5 這樣的標(biāo)準(zhǔn)才會在移動設(shè)備和個人電腦上同樣取得成功。”
喬布斯在 2010年的公開信《關(guān)于 Flash 的一點思考》中說。
在這封公開信中，喬布斯是這樣解釋 HTML5 的：最新的網(wǎng)絡(luò)標(biāo)準(zhǔn)，已經(jīng)為蘋果、谷歌等許多公司所采用，它允許開發(fā)者開發(fā)出更為高級的圖形、印刷和動畫，并且不需要第三方瀏覽器插件（如 Flash ）就能轉(zhuǎn)換。當(dāng)然，也正是蘋果和谷歌這樣的科技公司在推動著 HTML5、CSS 和 JavaScript 等開放標(biāo)準(zhǔn)的普及和發(fā)展。
有關(guān) HTML5 的優(yōu)勢，我在《HTML5是什么鬼？》也進(jìn)行過總結(jié)。
這是2016年朋友圈的新現(xiàn)象：不論是網(wǎng)頁邀請函，節(jié)日游戲，還是品牌廣告，那些被分享出來的 HTML5 頁面不斷嘗試著用更有意思、更流暢的方式來講述每一個事件。
過去一年，幾乎所有人——你的甲方，你最喜歡的品牌，你朋友任職的互聯(lián)網(wǎng)公司，都意識到了 HTML5 的作用。它不是一個簡單的網(wǎng)頁，而是能夠更加有效地組織互聯(lián)網(wǎng)中的信息，讓視頻、音頻等服務(wù)得到更好的支持；并在減輕開發(fā)者的負(fù)擔(dān)的同時，讓你在不同的平臺上有更一致的體驗。
對于用戶來說，通過 HTML5 獲得了前所未有的體驗，與品牌產(chǎn)生共鳴或是激起好奇心，這才是最重要的。
一個月前的天貓雙十一狂歡節(jié) HTML5 推廣頁面《穿越宇宙來看你》，在全景應(yīng)用的基礎(chǔ)之上，添加了上下滑動預(yù)覽節(jié)目單的功能，用戶在迅速到達(dá)天貓所在舞臺的過程中，還可以看到兩側(cè)會場的各種信息。
相比去年《2015，世界為誰傾倒？》不停180度翻轉(zhuǎn)手機的折騰，你會發(fā)現(xiàn)，2016年的HTML5頁面則更加簡單、粗暴。
225 張內(nèi)置素材，通過拍攝、合成、3D渲染等制作方式，最后以平面圖片的形式導(dǎo)出 HTML5 頁面，最終網(wǎng)站的總體量卻在5MB以內(nèi)。
Durex GO
杜蕾斯在七夕節(jié)開發(fā)出一款類《Pokemon Go》游戲《Durex GO》，只是將捕捉目標(biāo)更換成喜鵲。用戶在地圖上可以看到自己身邊的喜鵲，不同的喜鵲會在游戲進(jìn)行一段時間后，進(jìn)化為代金券、杜蕾斯產(chǎn)品或是酒店鑰匙等，捕捉成功的用戶可以將其兌換為相應(yīng)的產(chǎn)品。
一個 HTML5 的成功往往得益于更立體的視覺和聽覺感受，與用戶更有趣的互動，就像通過萬花筒來觀察世界一樣，為你呈現(xiàn)出前所未有的景象。
以此為理念，推陳出新的優(yōu)酷萬花筒 HTML5，用萬花筒的成像方式將每一類內(nèi)容中最具代表性的元素進(jìn)行合理地拆分，再重組。在英文中，Kaleidoscope（萬花筒）集合了希臘語 Kalos（美麗），Eidos（形狀）和 Scope（觀看）的意思，這也正是優(yōu)酷想要在這支萬花筒式的 HTML5 中想要傳遞的——豐富的色彩，多樣的表達(dá)。
你不會想到，僅僅在一個 HTML5 中，制作方就使用了 Web Graphics Library（Web GL）3D 繪圖標(biāo)準(zhǔn)完成繪制，它可以為 HTML5 Canvas 提供硬件3D加速渲染，有效地幫助Web開發(fā)人員借助系統(tǒng)顯卡來瀏覽器里更流暢地展示3D場景和模型，甚至是更為復(fù)雜的導(dǎo)航和數(shù)據(jù)的視覺化。
點擊閱讀原文體驗這個 HTML5 前你可能還需要知道，它最終展現(xiàn)了優(yōu)酷的“煥新”計劃：如果曾經(jīng)的優(yōu)酷是一家視頻網(wǎng)站，那么現(xiàn)在的優(yōu)酷就要成為一家很酷的視頻網(wǎng)站。
在視頻漸漸成為互聯(lián)網(wǎng)內(nèi)容主流載體的時代到來時，作為用戶的你每時每刻都能夠知曉世界各地正在發(fā)生的事情，視頻幫助我們記錄每一個短暫的、偉大的時刻，也正是這些時刻，帶給你一次次的感動、震撼。
總之，你將逐漸看到一個嶄新的優(yōu)酷。
這個世界當(dāng)然很酷，優(yōu)酷正在做的是努力讓你看到這個很酷的世界、世界的每一面，就像在萬花筒中看到繽紛的顏色、妙不可言的幾何圖形，從內(nèi)心深處被打動。“煥新”計劃或許只是優(yōu)酷作為這個行業(yè)的一份子向前邁出的一小步，但這也讓作為用戶的你看到了，優(yōu)酷想要為你呈現(xiàn)一個更美好的世界的心愿。
一鏡到底的萬花筒，大劇熱綜都藏在里面了，點擊【閱讀原文】，打開音樂，用手指觸碰出一個更炫的世界。
烏 云 裝 扮 者
To see behind walls.To draw closer.To find
each other and to feel.That is the purpose of life.
世界、黑色趣味和明亮內(nèi)心
言
25年過去了，Brooks博士著名的“沒有銀彈”的論斷依舊沒有被打破。HTML5也是一樣。但這并不妨礙HTML5是一個越來越有威力的“炸蛋”：發(fā)展迅速、勢不可擋。隨著HTML5技術(shù)的普及，用HTML5做可視化呈現(xiàn)的項目越來越多了。HTML5的優(yōu)勢明顯：網(wǎng)頁上直接運行無需插件、手機平板方便兼容、代碼開發(fā)和維護(hù)相對容易，等等。一大波一大波的做Java、.NET甚至C++桌面的程序老手們都紛紛開始研究javascript了，而初出茅廬的新一代程序猿更是義無反顧的直奔HTML5這個技術(shù)大熱點而來。
HTML5涵蓋的技術(shù)點很多，甚至延伸到了前端、后端、通訊等各個層面。前端的canvas繪圖這塊無疑是它的核心內(nèi)容。Canvas的API雖然不是很復(fù)雜很強大，但是做一般的2d繪圖基本都夠用了。基于這些API，一大堆的2d繪圖組件紛紛出爐。Echarts、d3.js都是很不錯的項目。 Echarts主要是chart組件，而d3相對雜一些，很多呈現(xiàn)方式很有創(chuàng)意，值得研究。
概述
研究d3的起因是最近有一個項目，用戶截了一張效果圖讓我們用HTML5做一下：
看著很眼熟，搜了一下，感覺就是d3例子中的sunburst效果，程序在這里：
http://bl.ocks.org/mbostock/4063423
看上去似乎也不難，就是一圈一圈的餅圖，把樹狀結(jié)構(gòu)數(shù)據(jù)按占比一層一層繪制上去就行了。所以引起了自己動手做一個的興趣。“sunburst”英文里應(yīng)該是“云開日出”的意思，類似強烈的光芒從云層背后透射出來，不知為何中文里大多把它翻譯成“日落”。比如這把Fender Telecaster吉他型號是Brown Sunburst款，就會被大家翻譯成“日落色”。
關(guān)于日出和日落更喜歡哪一個的問題，網(wǎng)上還真有這樣的調(diào)查。有意思的是，選擇喜歡日落的遠(yuǎn)多于選擇日出的。日出代表希望，日落代表成熟，都是一種美，哪個更美要看你個人的心境，因為它的美麗是由心生。為了不在這個問題上站錯對，我們還是給他重新起一個更加響亮霸氣的中文名字：“彩虹爆炸圖”，怎么樣?
仔細(xì)研究一下彩虹爆炸圖的結(jié)構(gòu)，無非就是一個樹形結(jié)構(gòu)，并采用發(fā)射狀的布局。根節(jié)點在中間(也可以認(rèn)為沒有唯一的根，而是一堆根節(jié)點圍繞在第一圈)，一次向外發(fā)散排列。每一個節(jié)點有名稱、數(shù)值。節(jié)點可以按照自身數(shù)值在扇區(qū)所占比例進(jìn)行繪制，這樣就不用管節(jié)點具體數(shù)值有多大多小了。
這種圖最先是由布朗大學(xué)教授John T. Stasko設(shè)計。
http://www.cc.gatech.edu/~john.stasko/
經(jīng)過一天的折騰，終于做出了一個還算過得去的“彩虹爆炸圖”。先上個圖看看：
主要功能包括了：
可以通過json來定義數(shù)據(jù)和樣式(類似百度的echarts那樣);
顏色可以固定，也可以自動彩虹色;
自動計算數(shù)值及角度占比;
動態(tài)顯示導(dǎo)航路徑;
鼠標(biāo)動態(tài)高亮顯示路徑;
動畫飛入、展開導(dǎo)航路徑;
文字顯示及角度控制;
全矢量，可鼠標(biāo)縮放、平移，不失真;
下面重點碼一下折騰過程中的幾個重點：
一、定義節(jié)點對象
首先定義每一個小扇片節(jié)點。每個扇片可以用一段餅圖來繪制。為了簡單方便，這里用了最簡單高效偷懶的方法：用一個半徑很粗的線畫一段角度的arc，即可。如下圖：
另外還有文字等內(nèi)容。所以定義它的json結(jié)構(gòu)大概如下：
var item={name: '名稱', color: 'red', angle: '45', …};
此外，下一圈的數(shù)據(jù)，可直接定義為這個節(jié)點的“孩子節(jié)點”，直接在item中定義一個data的子節(jié)點數(shù)據(jù)：
var item={name: '名稱', color: 'red', angle: '45', data:[
{name:’孩子一’, color:’green’,…},
{name:’孩子二’, color:’yellow’,…},
]};
這樣就可以組成一個樹狀結(jié)構(gòu)。接下來要在canvas上繪制圖形了。為了方便，這里直接使用了矢量圖進(jìn)行定義：
twaver.Util.registerImage('node', {
v: [{
shape: 'circle',
r: ...
lineColor: function(data,view){return data.getClient("lineColor");},
lineWidth: ...
startAngle: ...
endAngle: ...
},{
shape: 'text',
textBaseline: 'middle',
textAlign: ...
text: ...
x: ...
y: ...
font: ...
fill: ...
rotate: ...
visible: ...
shadow: ...
}],
});
矢量圖中定義了2個圖形元素：一個arc弧線、一個文字對象，分別用于畫node和繪制其文字。顏色、字體、是否可見、陰影、對齊、位置、線寬、角度…等等均在上面的定義中用一個function動態(tài)獲取。例如，這個節(jié)點的半徑，通過下面的方法，就可以在圖形的lineColor屬性中保存并驅(qū)動，需要修改，直接修改lineColor這個client屬性即可，而不用去修改繪圖參數(shù)，非常方便：
r:function(data,view){return data.getClient("lineColor");}
這里有一個比較啰嗦的地方是：每個扇片的角度需要根據(jù)每個item定義的原始值進(jìn)行計算角度占比。而且，對于太小的扇片，可以給一定的最小值(例如 1度)，保證能視覺上看到它。否則，顯示10000和1兩個數(shù)值，由于對比過大，可能就杯具了，因為1連1度都占不到，顯示效果會非常差。還有，每個扇片之間應(yīng)該盡量留有一定的空隙。如果連續(xù)繪制，就會連成一片，沒有“分片”感。這些可以在代碼中進(jìn)行簡單控制。
二、文字控制
文字控制也比較啰嗦。首先是對齊方式。最簡單的方式當(dāng)然是讓文字在所在扇片處，直接居中、旋轉(zhuǎn)。這樣文字會在徑向的中間位置，如下圖：
但這樣顯示感覺并不是很完美。對于中文來說，如果能統(tǒng)一靠近圓心方向的位置對齊，會更好看一些。這樣，即使文字過長，也會向外延伸，不會和里面的重疊。如下圖：
還有，當(dāng)文字在左半圓時，如果不做特殊處理，文字旋轉(zhuǎn)會導(dǎo)致文字大頭朝下，閱讀起來有把脖子歪斷的風(fēng)險。所以應(yīng)該動態(tài)判斷，如果文字在左側(cè)，應(yīng)該文字再增加旋轉(zhuǎn)180度。同時左側(cè)的文字對齊也要特殊考慮，應(yīng)該變成右對齊，才能保持徑向的整齊一致。
文字還有一個細(xì)節(jié)就是顏色和陰影的問題。不使用陰影，單純的使用顏色(例如白色)，則在一些方向上的節(jié)點的文字會看不清楚，因為我們做的是彩虹爆炸圖，各個方向顏色都不一樣，而且還會隨著圈數(shù)增加而變淡顏色，所以幾乎不可能用一個固定的顏色(例如白色或黑色)能保證文字在所有地方都能和node顏色搭配并看清楚。所以思來想去還是使用了陰影效果。
聯(lián)想了一下我們看美劇時候的字幕，似乎也是同樣的問題。視頻字幕要顯示在千變?nèi)f化的視頻場景里面，視頻場景的顏色完全隨機出現(xiàn)無從知曉，要想讓字幕看清楚，必然也會想一些辦法解決。我們仔細(xì)觀察一下視頻字幕：
仔細(xì)觀察，字幕是白色文字加了一圈黑色外框，這樣就不怕任何場景了。我們在文字定義時也模擬一下，設(shè)置陰影和陰影偏移試一試：
fill:'white',
shadow: {
offsetX: 2,
offsetY: 2,
blur: 4,
color: 'black',
},
看一下使用前和使用后的效果對比：
使用陰影后不但文字更清晰了，而且也增加了立體感，效果還是不錯的。下面圖顯示在應(yīng)用在節(jié)點上的效果：
可見不論什么顏色，都能比較好的勾勒出文字輪廓，保持清晰可讀。
三、生成彩虹顏色
關(guān)于顏色，是一個有趣的話題。對于廣大程序猿來說，顏色是一個既簡單又困難的東西。我們隨手就能寫下’red’, ‘green’, ‘orange’, ‘yellow’這樣的色彩斑斕的顏色，還能保證沒有語法錯誤;我們還會寫’#FF55AA’、’#0c0’、’RGB(0,204,0)’、’ RGB(0%，80%，0%)’這樣的各種顏色寫法;我們也明白RGBA的含義和用途。但是，我們很少能把一個demo寫的顏色很好看、很搭配。關(guān)于顏色和配色以后再專門討論。這里我們只想自動生成一圈彩虹一樣的顏色。用我們熟悉的RGB方法好像比較困難了。于是想起了那個HSV的顏色定義方法，它貌似很適合解決這個問題。
HSV顏色模型定義了色調(diào)H、飽和度S和亮度V，由A. R. Smith在1978年創(chuàng)建的一種顏色空間。其中H用一圈360度表示所有顏色，從紅色開始按逆時針方向計算，紅色為0度。飽和度S從0到1，越大越飽和。亮度V從0到255(也可以轉(zhuǎn)換為從0到1，方便使用)，越大越明亮，越小越暗淡。
Js里面并沒有直接處理HSV顏色的函數(shù)。不過用下面的代碼很方便可以從hsv轉(zhuǎn)為rgb：
寫一個對應(yīng)的js函數(shù)也很簡單：
/* h, s, v (0 ~ 1) */
function getHSVColor(h, s, v) {
var r, g, b, i, f, p, q, t;
if (h && s===undefined && v===undefined) {
s=h.s, v=h.v, h=h.h;
}
i=Math.floor(h * 6);
f=h * 6 - i;
p=v * (1 - s);
q=v * (1 - f * s);
t=v * (1 - (1 - f) * s);
switch (i % 6) {
case 0: r=v, g=t, b=p; break;
case 1: r=q, g=v, b=p; break;
case 2: r=p, g=v, b=t; break;
case 3: r=p, g=q, b=v; break;
case 4: r=t, g=p, b=v; break;
case 5: r=v, g=p, b=q; break;
}
var rgb='#'+toHex(r * 255)+toHex(g * 255)+toHex(b * 255);
return rgb;
}
再回到我們的彩虹爆炸圖。每一個節(jié)點對應(yīng)的所在角度(中心角度)決定了它自己的顏色值。所以，我們可以直接根據(jù)這個角度得到顏色的h。然后，為了讓彩虹逐漸一圈一圈變淡，再把s飽和度從1逐圈遞減(例如0.1)，產(chǎn)生變淡的效果。為了防止圈太多最后看不清，減到0.2到0.3左右可以停止遞減。
var fromAngle=node.getClient(‘fromAngle’);
var toAngle=node.getClient(‘toAngle’);
var level=node.getClient(‘level’);//節(jié)點在第幾圈
var h=(fromAngle+to)/2 % 360 /360; //中心角度，并轉(zhuǎn)換為弧度
var s=Math.max(0.2, 1-level*0.1);//每圈s遞減0.1，直到0.2為止
var v=1;
var color=getHSVColor(h, s, v);
這樣就獲得了一圈顏色。實驗效果如下：
如果相對某個節(jié)點的顏色做特殊處理，例如強制為橙色來凸顯，我們可以在數(shù)據(jù)中定義時加個標(biāo)記，設(shè)置顏色時候直接使用而不用計算即可。
{name:'浦東新區(qū)', value: 2600, color: '#FE9A2E'}
接下來要實現(xiàn)鼠標(biāo)劃過節(jié)點，自動計算路徑、高亮路徑節(jié)點、暗淡非路徑節(jié)點。為了方便路徑尋找，程序把每個節(jié)點的下一圈子數(shù)據(jù)定義為子節(jié)點，子節(jié)點通過getParent函數(shù)可以直接獲得父對象。這樣，通過不斷getParent就可以獲得整個路徑上的節(jié)點，并修改其顏色為預(yù)設(shè)顏色，實現(xiàn)高亮效果：
var node=highlightedNode;
while(node){
node.setClient(‘color’, node.getClient(‘color.original’));
node=node.getParent;
}
對于非路徑節(jié)點的顏色，可以設(shè)置為預(yù)設(shè)顏色但飽和度為0.1的淡顏色 ，讓它變淡，以便突出高亮路徑：
var color=getHSVColor(h, 0.1, v);
node.setClient(‘color’, color);
四、動畫效果
最后，為了圖形更生動，使用了一些動畫效果。首先想到的就是圖形出來時候，用動畫從小到大發(fā)散開來，會很動感。這樣做需要用動畫函數(shù)來驅(qū)動每一個節(jié)點的半徑位置，從0增加到所在的半徑位置，如果大家一起設(shè)置，整個圖就會動起來。這里用了一個動畫函數(shù)來驅(qū)動，并使用了網(wǎng)上常用的easing函數(shù)來控制，避免線性的動畫太死板：
new Animate({
from: 0,
to: 1,
dur: 3000+level*100,
easing: 'elasticOut',
onUpdate: function (value) {
node.setLocation('pie.location’, value);
},
}).play;
上面定義的動畫，用3秒鐘跑完，用'elasticOut'的easing方式。每一幀，修改node的位置信息。這樣就完成了橡皮筋一樣的環(huán)形彈出散開效果。
另外，導(dǎo)航條的出來也比較突兀，這里也使用一下動畫，讓它從左到右慢慢伸出：
new Animate({
from: {x:x1, y:y1},
to: {x:x2, y:y2},
delay:50,
type: 'point',
dur: 1000,
easing: 'bounceOut',
onUpdate: function (value) {
node.setCenterLocation(value.x, value.y);
和上一個動畫的不同之處在于這里使用了{(lán)x、y}的point結(jié)構(gòu)，每一幀直接更新節(jié)點位置。同時設(shè)置了50毫秒的delay，讓動畫有一點點粘性停滯，不至于太突兀。效果不錯。
至此，彩虹爆炸圖基本上就做的差不多了。使用起來也很簡單，只要準(zhǔn)備一些json數(shù)據(jù)就可以了，下面是一些有趣的數(shù)據(jù)做出來的效果。感興趣的同學(xué)可以到這里索取代碼。
實際應(yīng)用在項目中的示意圖。如果你也希望項目中用一下彩虹爆炸圖，歡迎給我發(fā)郵件索取：info@servasoft.com
掃推薦微信：中國大數(shù)據(jù)
推薦理由：一手新鮮，絕對干貨
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
