為條形圖添加過(guò)渡動(dòng)畫(huà)

1、為條形圖添加過(guò)渡動(dòng)畫(huà)摘 要：這一節(jié)主要介紹了為條形圖添加過(guò)渡動(dòng)畫(huà)的方法。并給出相關(guān)代碼。關(guān)鍵詞：條形圖；持續(xù)時(shí)間；緩動(dòng)函數(shù) 4 / 4為條形圖添加過(guò)渡動(dòng)畫(huà)1.transition()要?jiǎng)?chuàng)建一個(gè)精致、流暢、動(dòng)態(tài)的過(guò)渡效果，只需簡(jiǎn)單的一行代碼：.transition()特別要注意的是，在方法鏈上，要把這個(gè)調(diào)用插到選擇元素之后，改變?nèi)魏螌傩灾埃簊vg.selectAll("rect").data(dataset).transition().attr("y", function(d) return h - yScale(d);).attr("heig

2、ht", function(d) return yScale(d);).attr("fill", function(d) return "rgb(0, 0, " + (d * 10) + ")");沒(méi)有transition()，D3 會(huì)對(duì)所有attr() 語(yǔ)句立即求值，因此高度和填充的變化立刻會(huì)發(fā)生。添加了transition() 之后，D3 會(huì)考慮時(shí)間的因素。這一次，它不再一次性應(yīng)用所有新值，而是會(huì)在舊值與新值之間插入一系列過(guò)渡值，也就是要對(duì)起始和終止值進(jìn)行歸一化處理，然后計(jì)算兩者之間的中間狀態(tài)。D3 還能分辨不同屬性值的

3、格式，對(duì)這些格式的變化進(jìn)行插值。比如，高度從200px 開(kāi)始過(guò)渡到100（沒(méi)有px），或者把藍(lán)色填充變成rgb(0,255,0)（綠色）。整個(gè)過(guò)程不需要你參與，D3 就替你做好了。2持續(xù)時(shí)間D3 會(huì)隨著時(shí)間推移不斷插入attr() 值，但持續(xù)多長(zhǎng)時(shí)間呢？默認(rèn)是250 毫秒，或四分之一秒（1 秒等于1000 毫秒）。好在，我們可以控制動(dòng)畫(huà)的持續(xù)時(shí)間。而且，只要添加一行代碼：.duration(1000)注意，必須把duration() 放到transition() 之后，參數(shù)的單位是毫秒，因此duration(1000) 就是持續(xù)1 秒。下面把這行代碼放到頁(yè)面中：svg.selectAll(&q

4、uot;rect").data(dataset).transition().duration(1000) .attr("y", function(d) return h - yScale(d);).attr("height", function(d) return yScale(d);).attr("fill", function(d) return "rgb(0, 0, " + (d * 10) + ")");實(shí)際的持續(xù)時(shí)間取決于圖表的類型，以及觸發(fā)過(guò)渡的方式。根據(jù)經(jīng)驗(yàn)，細(xì)微的界面反

5、饋（比如鼠標(biāo)懸停在元素上觸發(fā)過(guò)渡），過(guò)渡時(shí)間大約150 毫秒比較合適，而更顯著的視覺(jué)過(guò)渡（比如整個(gè)數(shù)據(jù)視圖的變化）持續(xù)1000 毫秒比較理想。1000 毫秒（1秒）不算長(zhǎng)，也不算短。3緩動(dòng)函數(shù)5000 毫秒，慢得像糖稀一樣的過(guò)渡，讓我們感受到了整個(gè)動(dòng)畫(huà)的品質(zhì)。注意到?jīng)]，動(dòng)畫(huà)一開(kāi)始非常慢，然后逐漸加速，最后在達(dá)到預(yù)定高度之前速度再次慢了下來(lái)。換句話說(shuō)，動(dòng)畫(huà)的速度不是線性不變的，而是有加減速變化的。應(yīng)用于過(guò)渡效果的這種動(dòng)畫(huà)品質(zhì)叫做緩動(dòng)。用動(dòng)畫(huà)術(shù)語(yǔ)來(lái)說(shuō)，可以理解成元素緩緩就位，然后從一個(gè)位置不間斷地移動(dòng)到另一個(gè)位置。在D3 中，可以使用ease() 指定不同的緩動(dòng)類型。默認(rèn)的緩動(dòng)效果是"c

6、ubic-inout"，產(chǎn)生的就是我們剛剛看到的那種逐漸加速然后再逐漸減速的效果。這種默認(rèn)效果適合大多數(shù)平滑過(guò)渡。同樣，也要在transition() 之后、attr() 之前指定ease()。事實(shí)上，ease()在duration() 之前之后都沒(méi)問(wèn)題，但先過(guò)渡再設(shè)置緩動(dòng)似乎更順理成章：.transition().duration(2000).ease("linear"). 除此之外，還有很多緩動(dòng)函數(shù)可供選擇。 circle逐漸進(jìn)入并加速，然后突然停止。 elastic描述這個(gè)效果的一個(gè)最恰當(dāng)?shù)脑~是“有彈性”。 bounce像皮球落地一樣反復(fù)彈跳，慢慢停下來(lái)。4

7、延遲時(shí)間與ease() 控制動(dòng)畫(huà)品質(zhì)不同，delay() 用于指定過(guò)渡什么時(shí)間開(kāi)始?？梢越odelay() 傳入一個(gè)靜態(tài)的值，同樣以毫秒為單位，比如：.transition().delay(1000) .duration(2000) .與使用duration() 和ease() 一樣，把delay() 放到哪里并沒(méi)有十分嚴(yán)格的限制，但我更喜歡把它放在duration() 前面。因?yàn)槭窍仍O(shè)定延遲時(shí)間，然后過(guò)渡動(dòng)畫(huà)才開(kāi)始計(jì)時(shí)嘛，這符合邏輯。靜態(tài)延遲時(shí)間只是一種延遲方式，更有意思的是可以動(dòng)態(tài)計(jì)算延遲時(shí)間。動(dòng)態(tài)延遲的一個(gè)常見(jiàn)用途就是創(chuàng)建交錯(cuò)延遲的效果，讓某些過(guò)渡在另一個(gè)過(guò)渡之前發(fā)生。交錯(cuò)延遲對(duì)人的感知有

8、利，因?yàn)楫?dāng)相鄰元素的變化不那么同步時(shí)，人眼更容易注意到每個(gè)元素的變化。要設(shè)置動(dòng)態(tài)延遲，就別給delay() 傳遞靜態(tài)值，而是給它傳入一個(gè)函數(shù)，就是傳入一個(gè)匿名函數(shù)：.transition().delay(function(d, i) return i * 100;).duration(500).在匿名函數(shù)中，與當(dāng)前元素綁定的數(shù)據(jù)值是以d 傳入的，而這個(gè)元素的位置是以i傳入的。因此，這里的意思是讓D3 循環(huán)遍歷每個(gè)元素，把它們的動(dòng)畫(huà)延遲時(shí)間設(shè)定為i * 100，也就是后一個(gè)元素的動(dòng)畫(huà)開(kāi)始時(shí)間總比前一個(gè)元素晚100 毫秒?？傊?，這樣就能得到一個(gè)交錯(cuò)過(guò)渡的動(dòng)畫(huà)。注意，這里把持續(xù)時(shí)間縮短到了500 毫

9、秒，以便讓整體動(dòng)畫(huà)效果顯得更緊湊。而且，此時(shí)的duration() 設(shè)定的是每個(gè)元素的動(dòng)畫(huà)持續(xù)時(shí)間，不是整體動(dòng)畫(huà)累計(jì)的持續(xù)時(shí)間。對(duì)這個(gè)例子來(lái)說(shuō)，20 個(gè)元素的持續(xù)時(shí)間都是500 毫秒，假如沒(méi)有延遲，那所有元素都會(huì)用500 毫秒（即半秒）完成動(dòng)畫(huà)。但如果依次給每個(gè)元素設(shè)定了100 毫秒的延遲（i * 100），那么所有過(guò)渡動(dòng)畫(huà)的總時(shí)間將為2400 毫秒：i 的最大值乘以100 毫秒延遲加上500 毫秒持續(xù)時(shí)間 = 19 * 100 + 500 = 2400由于這種延遲會(huì)逐個(gè)元素累積，所以數(shù)據(jù)值越多，全部過(guò)渡動(dòng)畫(huà)運(yùn)行的總時(shí)間就越長(zhǎng)。如果需要?jiǎng)討B(tài)加載不同長(zhǎng)度的數(shù)據(jù)集，那就要把這個(gè)因素考慮進(jìn)去。假設(shè)數(shù)據(jù)集里一下子有了10 000 個(gè)值（而不是20 個(gè)），那要看完整段動(dòng)畫(huà)就得花很長(zhǎng)時(shí)間（精確地說(shuō)，要花1 000 400 毫秒或16.67 分鐘）。前面兩個(gè)示例頁(yè)面使用的都是這個(gè)延遲計(jì)算方法：把簡(jiǎn)單的用i 乘以靜態(tài)延遲時(shí)間值，改為先用dataset.length 除i（從而達(dá)到了把這個(gè)值歸一化的效果），然后再用得到的值乘以1000（即1 秒）。結(jié)果就是最后一個(gè)元素的延遲時(shí)間為1000，而之前每個(gè)元素的延遲時(shí)間漸次縮短。最大的延遲1000 加上500 等于1.5 秒的總