iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 22
0
Data Technology

讓你資料美美的(d3.js+vue.js)系列 第 22

D3繼續動起來

tween 補間動畫

補間動畫是指在兩個畫面轉換時的動畫,也就是讓動畫動起來的角色,簡單說就是過場


在D3中的transition除了提供基本的預設補間動畫之外,也提供了tween來讓我們自訂補間動畫的內容

這次也一樣使用之前的長條圖來做練習
tween(name,[value])
name是用來替這個補間取名字,value要使用匿名function來定義內容,最後要在return一個匿名函式
在使用tween時也常會搭配interpolate來使用,這邊用到兩個來定義文字內容跟顏色變換
interpolateRound(a,b):計算a~b的補間數字(整數,需要小數可使用interpolateNumber)
interpolateRgb(a,b):計算兩個顏色之間的補間顏色

使用時必須要利用this來指定正確的元件,在v4的版本中必須先在外部的匿名函數將this指定一個名稱才能在return的匿名函式中使用(可以參考這篇),return的funcion(t)中的t可以想成是補間動畫的影格,在回傳的function中需要利用Html的DOM來對元素進行操控

設定text中的tween

  • 讓text從0開始增加到預設的資料大小
  • 讓文字的顏色從白色漸變成黑色
.tween('number',function(d){
    var node = this ; //將this保留為node來操控
	var i = d3.interpolateRound(0, d);
	var c = d3.interpolateRgb('#FFF', '#000');
    return function(t) {
        node.textContent = i(t); //利用html的DOM操控
        node.setAttribute("fill",c(t));
        // node.style.fill=c(t)
    };
});

除了tween之外,在d3的v4版還提供了其他補間來簡化tween的操作

設定rect中的attrTween

  • 讓長條圖的顏色從白色漸變到指定顏色
.attrTween("fill", function(d) {
  return d3.interpolateRgb('#fff',colorlinear(d));
});

demo&code:https://codepen.io/FanWay/pen/aEYYdR


上一篇
D3動起來
下一篇
D3來點互動吧
系列文
讓你資料美美的(d3.js+vue.js)30

尚未有邦友留言

立即登入留言