如何过渡两个具有不同持续时间的属性? [英] How to transition two properties with different durations?
本文介绍了如何过渡两个具有不同持续时间的属性?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我知道在D3中，在给定的时间只能在元素上运行单个过渡.这是否意味着不可能以不同的持续时间转换两个不同的属性，还是有解决此限制的方法?
I know that in D3 only a single transition can run on an element at a given moment in time. Does this mean it is impossible to transition two different properties with different durations, or is there a workaround for this limitation?
例如，我想让椭圆的宽度和高度以不同的速度进行动画处理.但是，下面的代码只能做到这一点，因此两个属性都使用了第二个持续时间.
For example, I would like to have the width and height of an ellipse animate at different speeds. However, the following code only makes it so the second duration is used for both properties.
selection.
transition().
duration(5000).
ease(d3.easeBounceOut).
attr('rx', 250).
//.transition() calling transition() here would schedule the animation after the first one.
duration(1000).
ease(d3.easeBounceOut).
attr('ry', 250)
let svg = d3.select("svg"),
margin = {
top: 20,
right: 20,
bottom: 20,
left: 40
},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
g.append('ellipse').attr('id', '9').attr('cx', 250).attr('cy', 250).attr('rx', 25).attr('ry', 25).attr('fill', 'black')
.transition().duration(5000).ease(d3.easeBounceOut).attr('rx', 250).duration(1000).ease(d3.easeBounceOut).attr('ry', 250)<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<!DOCTYPE html>
<svg width="960" height="750"></svg>推荐答案
您可以使用已命名的过渡 ，您可以一次指定多个过渡.
You can, by using named transitions, you can specify multiple transitions at once.
let svg = d3.select("svg"),
margin = {
top: 20,
right: 20,
bottom: 20,
left: 40
},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const ellipse = g.append('ellipse')
.attr('id', '9')
.attr('cx', 250)
.attr('cy', 250)
.attr('rx', 25)
.attr('ry', 25)
.attr('fill', 'black');
ellipse
.transition("rx")
.duration(2000)
.ease(d3.easeBounceOut)
.attr('rx', 250);
ellipse
.transition("ry")
.duration(1000)
.ease(d3.easeBounceOut)
.attr('ry', 250);<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<!DOCTYPE html>
<svg width="960" height="750"></svg>这篇关于如何过渡两个具有不同持续时间的属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
