当前位置: 首页 > 工具软件 > Tween > 使用案例 >

transition.tween

朱阳晖
2023-12-01

对于每一个选择的元素插入帧,第一个参数是要改变的’attr’,’style’,’text’,第二个参数是一个函数。
对于每一个选择的元素会传入当前的datum ‘d’,索引 index 'i',当前的元素对象this,以及ease方法的时间t(范围是[0,1])

更改填充属性

transition.tween("attr.fill", function() {
  var node = this, i = d3.interpolateRgb(node.getAttribute("fill"), "blue");
  return function(t) {
    node.setAttribute("fill", i(t));
  };
});

更改值

transition.tween("text", function() {
    var i = d3.interpolateRound(100, 200);
    return function(t) {
        this.textContent = i(t);
    };
});

还有一些快捷的方法

transition.attrTween("fill", function() {
  return d3.interpolateRgb("red", "blue");
});
transition.attrTween("fill", function() {
  return d3.interpolateRgb(this.getAttribute("fill"), "blue");
});
transition.styleTween("fill", function() {
  return d3.interpolateRgb("red", "blue");
});
transition.styleTween("fill", function() {
  return d3.interpolateRgb(this.style.fill, "blue");
});
 类似资料:

相关阅读

相关文章

相关问答