chapter-6 transition

d3.select("body").transition()
    .style("background-color", "black");

var data = [10,40,50,60];
var width = height = 500;

var canvas = d3.select('body')
    .append('svg')
    .attr('width',width)
    .attr('height',height);

var circle = canvas.append('circle')
    .attr('cx',50)
    .attr('cy',50)
    .attr('r',30)

circle.transition()
    .duration(1500)
    .delay(1000)
    .each('start',function(){
        d3.select(this).attr('fill','red')
    })
    .attr('cx',150)
    .transition() //可以链式使用这个方法 等上一个动画完成的时候再执行下一个动画
    .each('start',function(){
        d3.select(this).attr('fill','purple')
    })
    .attr('cy',200)
    .each('end',function(){
        d3.select(this).attr('fill','orange')
    })
    .transition()
    .attr('cx',50)

    .each('end',function(){
    d3.select(this).attr('fill','blue')
})

• transion() 可以链式使用 上一个动画结束后开始下一个动画

• each() 事件监听：start 动画开始 end动画结束

• duration() 过度时间 默认500

• ease() 指定过渡的方式，常用的有：

  • linear：普通的线性变化

  • circle：慢慢地到达变换的最终状态

  • elastic：带有弹跳的到达最终状态

  • bounce：在最终状态处弹跳几次