d3.js 之增長感染力：使用轉場效果

轉場/transition

圖形比數據有感染力，動起來的圖形比靜態的圖形更有感染力。

轉場是一種過渡，提供兩個穩定狀態間的一種動態漸進的變化。轉場的概念來源於電影。 電影中存在不一樣場景之間的切換，好比，從室內鏡頭切換到室外鏡頭。直接拼接兩段 膠片很生硬，因此在後期處理中，會將前一個鏡頭漸漸隱去，後一個鏡頭漸漸浮現，這個 在鏡頭間插入的變化過程就是轉場。

轉場雖然也是一種動畫實現，可是和咱們一般看到的基於幀的動畫不一樣（好比：遊戲）， d3的轉場/transition是基於差值的動畫，這意味着咱們只須要 聲明可視化元素顯示屬性的初始值和最終值，d3將 自動地構造完整的動畫過程。

創建轉場對象

使用選擇集的transition()方法爲當前選擇集啓動一個轉場效果，不過， 從開發者的角度來說，咱們說，這個方法返回了一個轉場對象：

1. selection.transition([name])

參數name指定所建立轉場效果對象的名字，不指定該參數時使用默認值""（空字符串）做爲名字。 這個參數的用途在於啓動多個轉場效果：若是在一個指定的DOM元素上啓動一個新的轉場效果， 與其同名的過渡效果將被終止。

轉場時長

轉場效果有一個默認的時長：250ms，咱們能夠使用duration()操做符修改這個轉場時長：

1. transition.duration([value])

若是不指定轉場時長參數value，duration()操做符就返回當前的默認時長值。

在示例（http://www.hubwiz.com/course/54fd40cfe564e50d50dcf284/）增長感染力第一頁的代碼中，爲了能看清過渡效果，我設置了一個2秒的轉場時間。你能夠試着調整一下， 看看變換在哪裏？

轉場也是一個集合對象

和選擇集/selection同樣，轉場效果/transition也是一個集合對象：包含一組DOM元素。轉場 也有一些和選擇集同樣的選擇符，好比attr()、style()和text()等，用來對所管理的DOM元素 進行屬性的修改：

和選擇集不一樣的是，轉場對象對DOM元素的修改不是當即完成的，它會對每一個 DOM元素啓動一個17ms間隔的定時器用來逐步地修改DOM元素的屬性（咱們 已經知道，這些定時器默認只會持續250ms，因此不用擔憂瀏覽器撐不住）。

轉場的計算過程

在上面的圖中，第一個style()是在選擇集上執行的，這意味着這些div元素的y座標 初始值被設定爲10px；第二個style()是在轉場對象上執行的，這意味着 這些div元素的y座標的目標值被設定爲100px，而它們將在250ms內逐漸移動 到這個位置。

轉場對象根據這些值，進行了一個簡短的計算：

1. 在250ms內，轉場對象須要繪製：
2. 250/17≈ 14（次）
3. 每次繪製，DIV元素須要移動：
4. (100-10)/14 ≈ 6.4（px）

根據這個值在每次定時器觸發時進行繪製，轉場效果就實現了。

tween：定製轉場計算過程

前面的示例中，咱們使用style()操做符指定了一組DOM元素 的top屬性的起始值和終止值，看起來transition()方法本身 完成了動畫中整個的計算過程。

這只是便於理解API用途的方便說法，計算機沒那麼聰明。計算邏輯實際 上是在轉場對象的style()調用時肯定的。

tween

轉場過程的計算細節，咱們能夠使用tween()操做符指定：

1. transition.tween(name,factory)

• name：字符串，標識factory參數指定的tween工廠。
• factory：tween工廠函數，該函數應當返回一個tween函數。轉場對象 在每幀（17ms）對每一個DOM對象調用tween函數來執行計算過程。

相似於訪問器函數，tween工廠函數被調用時將傳入當前DOM對象對應 的數據和其順序，並將this指向當前DOM對象，tween工廠函數的定義以下：

1. //tween工廠函數定義
2. function factory(datum,index){
3. //this指向當前DOM對象
4. //返回tween函數，將在每幀時每一個DOM對象上被調用
5. return function(t){
6. //在這裏修改DOM元素的屬性
7. };
8. }

請注意，轉場對象在每幀刷新時調用的是tween工廠函數返回的tween函數，參數t表明 歸一到0~1區間的時間值，好比，默認的250ms轉場時間，那麼0ms對應0，125ms對應 0.5，250ms對應1.0。

轉場的attr()操做符和style()操做符，其內部實現都是使用 的tween()操做符。看看→_→的示例代碼，你能理解style()是 怎麼運做的了吧。

easing：控制動畫的速度

咱們看到，tween函數封裝了插值動畫計算的細節，它接受一個歸一化的時間值t 做爲參數，咱們根據這個時間值進行計算，最終表現爲可視元素的運動或形態的變化。

在默認狀況下，轉場對象利用一個簡單的公式計算應給傳給tween函數的時間值t：

1. t = elapsed/duration;

好比，默認的轉場時間是250ms，從轉場開始到如今已通過了100ms，那麼：t = 100/250 =0.4。

那麼，若是咱們在傳入tween以前改變一下這個t呢？好比，讓t在開始時增加的慢些， 最後忽然快起來，會有怎樣的視覺效果？

在tween函數看來，開始時時間過得慢了，因此運動也會在開始時慢了!

d3中easing就是這個意思，經過調整時間的映射，來影響tween的執行效果：

1. transition.ease([value[, arguments]])

參數value若是是一個字符串，轉場對象將使用預置的easing效果進行時間映射。 參數value也能夠是一個函數，用來指定對時間t的映射，因此它有一個參數t，返回值 也應當在0~1範圍內。轉場對象將在每一幀調用tween函數以前，先使用這個函數對時間進行 變換。

預置的ease效果

d3預置了幾種ease效果：

• linear
• cubic
• cubic-in-out
• sin
• sin-out
• exp
• circle
• back
• bounce

style：設置樣式目標值

style()操做符用來設置轉場集中每一個DOM元素的CSS樣式目標值：

1. transition.style(name,value[,priority])

name參數指定樣式名稱。style()操做符使用轉場集中這些DOM元素的 CSS樣式的當前值做爲初始值，value指定的值做爲最終值，構造一個tween 工廠函數加入到轉場集的tween序列中，在每幀時被調用。

當value參數是一個具體值時，全部的DOM元素的CSS樣式都被設置爲這個值。 value參數也能夠是一個訪問器函數，這意味着每一個DOM元素 的樣式目標值能夠各自不一樣。

同時定義多個樣式目標

能夠使用對象方式同時定義幾個樣式的目標值：

1. d3.selectAll(".ball").transition().style({background:'red',width:200,height:200});

你可能好奇插值怎麼會能處理JSON對象。是的，插值只能用在數字上。但d3爲了方便咱們，內部 進行了處理。因此，儘管用好了。

attr：設置屬性目標值

attr()操做符用來設置轉場集中每一個DOM元素的指定屬性的目標值：

1. transition.attr(name,value)

name參數指定屬性名稱。attr()操做符使用轉場集中這些DOM元素的 屬性當前值做爲初始值，value指定的值做爲最終值，構造一個tween 工廠函數加入到轉場集的tween序列中，在每幀時被調用。

當value參數是一個具體值時，全部的DOM元素的指定屬性都被設置爲這個值。 value參數也能夠是一個訪問器函數，這意味着每一個DOM元素 的屬性目標值能夠各自不一樣。

對於HTML元素，咱們一般使用style()操做符來指定顯示效果，不多使用 attr()操做符。

而SVG元素，有些效果必須設置在屬性上，因此，在使用SVG作可視化元素時，常常 會使用attr()操做符。

參考資料：http://www.hubwiz.com/