轉場/transition

圖形比數(shù)據(jù)有感染力，動起來的圖形比靜態(tài)的圖形更有感染力。

轉場是一種過渡，提供兩個穩(wěn)定狀態(tài)間的一種動態(tài)漸進的變化。轉場的概念來源于電影。 電影中存在不同場景之間的切換，比如，從室內(nèi)鏡頭切換到室外鏡頭。直接拼接兩段 膠片很生硬，所以在后期處理中，會將前一個鏡頭漸漸隱去，后一個鏡頭漸漸浮現(xiàn)，這個 在鏡頭間插入的變化過程就是轉場。

轉場雖然也是一種動畫實現(xiàn)，但是和我們通?？吹降幕?em>幀的動畫不同（比如：游戲）， d3的轉場/transition是基于差值的動畫，這意味著我們只需要 聲明可視化元素顯示屬性的初始值和最終值，d3將 自動地構造完整的動畫過程。

建立轉場對象

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

1. selection.transition([name])

參數(shù)name指定所創(chuàng)建轉場效果對象的名字，不指定該參數(shù)時使用默認值""（空字符串）作為名字。 這個參數(shù)的用途在于啟動多個轉場效果：如果在一個指定的DOM元素上啟動一個新的轉場效果， 與其同名的過渡效果將被終止。

轉場時長

轉場效果有一個默認的時長：250ms，我們可以使用duration()操作符修改這個轉場時長：

1. transition.duration([value])

如果不指定轉場時長參數(shù)value，duration()操作符就返回當前的默認時長值。

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

轉場也是一個集合對象

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

和選擇集不同的是，轉場對象對DOM元素的修改不是立即完成的，它會對每個 DOM元素啟動一個17ms間隔的定時器用來逐步地修改DOM元素的屬性（我們 已經(jīng)知道，這些定時器默認只會持續(xù)250ms，所以不用擔心瀏覽器撐不?。?。

轉場的計算過程

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

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

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

根據(jù)這個值在每次定時器觸發(fā)時進行繪制，轉場效果就實現(xiàn)了。

tween：定制轉場計算過程

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

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

tween

轉場過程的計算細節(jié)，我們可以使用tween()操作符指定：

1. transition.tween(name,factory)

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

類似于訪問器函數(shù)，tween工廠函數(shù)被調用時將傳入當前DOM對象對應 的數(shù)據(jù)和其順序，并將this指向當前DOM對象，tween工廠函數(shù)的定義如下：

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

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

轉場的attr()操作符和style()操作符，其內(nèi)部實現(xiàn)都是使用 的tween()操作符?？纯础鷂→的示例代碼，你能理解style()是 怎么運作的了吧。

easing：控制動畫的速度

我們看到，tween函數(shù)封裝了插值動畫計算的細節(jié)，它接受一個歸一化的時間值t 作為參數(shù)，我們根據(jù)這個時間值進行計算，最終表現(xiàn)為可視元素的運動或形態(tài)的變化。

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

1. t = elapsed/duration;

比如，默認的轉場時間是250ms，從轉場開始到現(xiàn)在已經(jīng)過了100ms，那么：t = 100/250 =0.4。

那么，如果我們在傳入tween之前改變一下這個t呢？比如，讓t在開始時增長的慢些， 最后突然快起來，會有怎樣的視覺效果？

在tween函數(shù)看來，開始時時間過得慢了，所以運動也會在開始時慢了!

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

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

參數(shù)value如果是一個字符串，轉場對象將使用預置的easing效果進行時間映射。 參數(shù)value也可以是一個函數(shù)，用來指定對時間t的映射，所以它有一個參數(shù)t，返回值 也應當在0~1范圍內(nèi)。轉場對象將在每一幀調用tween函數(shù)之前，先使用這個函數(shù)對時間進行 變換。

預置的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參數(shù)指定樣式名稱。style()操作符使用轉場集中這些DOM元素的 CSS樣式的當前值作為初始值，value指定的值作為最終值，構造一個tween 工廠函數(shù)加入到轉場集的tween序列中，在每幀時被調用。

當value參數(shù)是一個具體值時，所有的DOM元素的CSS樣式都被設置為這個值。 value參數(shù)也可以是一個訪問器函數(shù)，這意味著每個DOM元素 的樣式目標值可以各自不同。

同時定義多個樣式目標

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

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

你可能好奇插值怎么會能處理JSON對象。是的，插值只能用在數(shù)字上。但d3為了方便我們，內(nèi)部 進行了處理。所以，盡管用好了。

attr：設置屬性目標值

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

1. transition.attr(name,value)

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

當value參數(shù)是一個具體值時，所有的DOM元素的指定屬性都被設置為這個值。 value參數(shù)也可以是一個訪問器函數(shù)，這意味著每個DOM元素 的屬性目標值可以各自不同。

對于HTML元素，我們通常使用style()操作符來指定顯示效果，很少使用 attr()操作符。

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

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