轉(zhuǎn)場(chǎng)/transition

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

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

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

建立轉(zhuǎn)場(chǎng)對(duì)象

使用選擇集的transition()方法為當(dāng)前選擇集啟動(dòng)一個(gè)轉(zhuǎn)場(chǎng)效果，不過(guò)， 從開(kāi)發(fā)者的角度來(lái)講，我們說(shuō)，這個(gè)方法返回了一個(gè)轉(zhuǎn)場(chǎng)對(duì)象：

1. selection.transition([name])

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

轉(zhuǎn)場(chǎng)時(shí)長(zhǎng)

轉(zhuǎn)場(chǎng)效果有一個(gè)默認(rèn)的時(shí)長(zhǎng)：250ms，我們可以使用duration()操作符修改這個(gè)轉(zhuǎn)場(chǎng)時(shí)長(zhǎng)：

1. transition.duration([value])

如果不指定轉(zhuǎn)場(chǎng)時(shí)長(zhǎng)參數(shù)value，duration()操作符就返回當(dāng)前的默認(rèn)時(shí)長(zhǎng)值。

在示例（http://www./course/54fd40cfe564e50d50dcf284/）增加感染力第一頁(yè)的代碼中，為了能看清過(guò)渡效果，我設(shè)置了一個(gè)2秒的轉(zhuǎn)場(chǎng)時(shí)間。你可以試著調(diào)整一下， 看看變換在哪里？

轉(zhuǎn)場(chǎng)也是一個(gè)集合對(duì)象

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

和選擇集不同的是，轉(zhuǎn)場(chǎng)對(duì)象對(duì)DOM元素的修改不是立即完成的，它會(huì)對(duì)每個(gè) DOM元素啟動(dòng)一個(gè)17ms間隔的定時(shí)器用來(lái)逐步地修改DOM元素的屬性（我們 已經(jīng)知道，這些定時(shí)器默認(rèn)只會(huì)持續(xù)250ms，所以不用擔(dān)心瀏覽器撐不住）。

轉(zhuǎn)場(chǎng)的計(jì)算過(guò)程

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

轉(zhuǎn)場(chǎng)對(duì)象根據(jù)這些值，進(jìn)行了一個(gè)簡(jiǎn)短的計(jì)算：

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

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

tween：定制轉(zhuǎn)場(chǎng)計(jì)算過(guò)程

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

這只是便于理解API用途的方便說(shuō)法，計(jì)算機(jī)沒(méi)那么聰明。計(jì)算邏輯實(shí)際 上是在轉(zhuǎn)場(chǎng)對(duì)象的style()調(diào)用時(shí)確定的。

tween

轉(zhuǎn)場(chǎng)過(guò)程的計(jì)算細(xì)節(jié)，我們可以使用tween()操作符指定：

1. transition.tween(name,factory)

• name：字符串，標(biāo)識(shí)factory參數(shù)指定的tween工廠(chǎng)。
• factory：tween工廠(chǎng)函數(shù)，該函數(shù)應(yīng)當(dāng)返回一個(gè)tween函數(shù)。轉(zhuǎn)場(chǎng)對(duì)象 在每幀（17ms）對(duì)每個(gè)DOM對(duì)象調(diào)用tween函數(shù)來(lái)執(zhí)行計(jì)算過(guò)程。

類(lèi)似于訪(fǎng)問(wèn)器函數(shù)，tween工廠(chǎng)函數(shù)被調(diào)用時(shí)將傳入當(dāng)前DOM對(duì)象對(duì)應(yīng) 的數(shù)據(jù)和其順序，并將this指向當(dāng)前DOM對(duì)象，tween工廠(chǎng)函數(shù)的定義如下：

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

請(qǐng)注意，轉(zhuǎn)場(chǎng)對(duì)象在每幀刷新時(shí)調(diào)用的是tween工廠(chǎng)函數(shù)返回的tween函數(shù)，參數(shù)t代表 歸一到0~1區(qū)間的時(shí)間值，比如，默認(rèn)的250ms轉(zhuǎn)場(chǎng)時(shí)間，那么0ms對(duì)應(yīng)0，125ms對(duì)應(yīng) 0.5，250ms對(duì)應(yīng)1.0。

轉(zhuǎn)場(chǎng)的attr()操作符和style()操作符，其內(nèi)部實(shí)現(xiàn)都是使用 的tween()操作符。看看→_→的示例代碼，你能理解style()是 怎么運(yùn)作的了吧。

easing：控制動(dòng)畫(huà)的速度

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

在默認(rèn)情況下，轉(zhuǎn)場(chǎng)對(duì)象利用一個(gè)簡(jiǎn)單的公式計(jì)算應(yīng)給傳給tween函數(shù)的時(shí)間值t：

1. t = elapsed/duration;

比如，默認(rèn)的轉(zhuǎn)場(chǎng)時(shí)間是250ms，從轉(zhuǎn)場(chǎng)開(kāi)始到現(xiàn)在已經(jīng)過(guò)了100ms，那么：t = 100/250 =0.4。

那么，如果我們?cè)趥魅雝ween之前改變一下這個(gè)t呢？比如，讓t在開(kāi)始時(shí)增長(zhǎng)的慢些， 最后突然快起來(lái)，會(huì)有怎樣的視覺(jué)效果？

在tween函數(shù)看來(lái)，開(kāi)始時(shí)時(shí)間過(guò)得慢了，所以運(yùn)動(dòng)也會(huì)在開(kāi)始時(shí)慢了!

d3中easing就是這個(gè)意思，通過(guò)調(diào)整時(shí)間的映射，來(lái)影響tween的執(zhí)行效果：

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

參數(shù)value如果是一個(gè)字符串，轉(zhuǎn)場(chǎng)對(duì)象將使用預(yù)置的easing效果進(jìn)行時(shí)間映射。 參數(shù)value也可以是一個(gè)函數(shù)，用來(lái)指定對(duì)時(shí)間t的映射，所以它有一個(gè)參數(shù)t，返回值 也應(yīng)當(dāng)在0~1范圍內(nèi)。轉(zhuǎn)場(chǎng)對(duì)象將在每一幀調(diào)用tween函數(shù)之前，先使用這個(gè)函數(shù)對(duì)時(shí)間進(jìn)行 變換。

預(yù)置的ease效果

d3預(yù)置了幾種ease效果：

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

style：設(shè)置樣式目標(biāo)值

style()操作符用來(lái)設(shè)置轉(zhuǎn)場(chǎng)集中每個(gè)DOM元素的CSS樣式目標(biāo)值：

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

name參數(shù)指定樣式名稱(chēng)。style()操作符使用轉(zhuǎn)場(chǎng)集中這些DOM元素的 CSS樣式的當(dāng)前值作為初始值，value指定的值作為最終值，構(gòu)造一個(gè)tween 工廠(chǎng)函數(shù)加入到轉(zhuǎn)場(chǎng)集的tween序列中，在每幀時(shí)被調(diào)用。

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

同時(shí)定義多個(gè)樣式目標(biāo)

可以使用對(duì)象方式同時(shí)定義幾個(gè)樣式的目標(biāo)值：

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

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

attr：設(shè)置屬性目標(biāo)值

attr()操作符用來(lái)設(shè)置轉(zhuǎn)場(chǎng)集中每個(gè)DOM元素的指定屬性的目標(biāo)值：

1. transition.attr(name,value)

name參數(shù)指定屬性名稱(chēng)。attr()操作符使用轉(zhuǎn)場(chǎng)集中這些DOM元素的 屬性當(dāng)前值作為初始值，value指定的值作為最終值，構(gòu)造一個(gè)tween 工廠(chǎng)函數(shù)加入到轉(zhuǎn)場(chǎng)集的tween序列中，在每幀時(shí)被調(diào)用。

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

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

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

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