暂停和恢复过渡 [英] Pausing and resuming a transition
问题描述
我正在使用setInterval
,因此过渡会在一定间隔后发生.是否可以暂停并恢复使用setInterval?
I am using setInterval
, so transitions take place after a certain interval. Is it possible to get pausing and resuming to work with setInterval?
任何朝着正确方向提出的建议/指针都将非常有帮助.
Any suggestions/pointers in the right direction will be really helpful.
推荐答案
当D3 v3是最新可用版本时,发布了此问题. 5年后,D3 v5具有一些新方法,例如 selection.interrupt()
, transition.on("interrupt"...)
和 local variables
,它可以使任务更加简单并减轻痛苦.
This question was posted when D3 v3 was the latest version available. 5 years later D3 v5 has some new methods, like selection.interrupt()
, transition.on("interrupt"...)
and local variables
, which can make the task more simple and less painful.
因此,让我们假设一个简单的cx
圆上的过渡:
So, let's suppose a simple cx
transition on a circle:
const svg = d3.select("svg");
const circle = svg.append("circle")
.attr("r", 15)
.attr("cx", 20)
.attr("cy", 50)
.style("fill", "teal")
.style("stroke", "black");
circle.transition()
.duration(10000)
.ease(d3.easeLinear)
.attr("cx", 580);
svg {
background-color: wheat;
display: block;
};
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg width="600" height="100"></svg>
这个想法是在例如按下按钮时中断转换:
The idea is interrupting the transition when, for instance, a button is pressed:
selection.interrupt();
然后,使用局部变量,使用interrupt
的侦听器获取当前位置:
And then, with a local variable, use the listener for interrupt
to get the current position:
.on("interrupt", function() {
local.set(this, +d3.select(this).attr("cx"))
});
最后,当再次按下按钮时,我们使用local.get(this)
和一个简单的数学运算来获取剩余的duration
.
Finally, when the button is pressed again, we use local.get(this)
and a simple math to get the remaining duration
.
还值得一提的是,这适用于线性宽松.如果您还有另一种放松方式,例如默认的d3.easeCubic
,则需要一种更复杂的代码.
It's also worth mentioning that this works for linear easing; if you have another easing, like the default d3.easeCubic
, you'll need a way more complex code.
这是演示:
const svg = d3.select("svg");
const local = d3.local();
const button = d3.select("button");
const circle = svg.append("circle")
.attr("r", 15)
.attr("cx", 20)
.attr("cy", 50)
.style("fill", "teal")
.style("stroke", "black");
circle.transition()
.duration(10000)
.ease(d3.easeLinear)
.attr("cx", 580)
.on("interrupt", function() {
local.set(this, +d3.select(this).attr("cx"))
});
button.on("click", function() {
if (d3.active(circle.node())) {
circle.interrupt();
this.textContent = "Resume";
} else {
circle.transition()
.ease(d3.easeLinear)
.duration(function() {
return 10000 * (560 - local.get(this)) / 560;
})
.attr("cx", 580)
this.textContent = "Stop";
}
})
svg {
background-color: wheat;
display: block;
};
<script src="https://d3js.org/d3.v5.min.js"></script>
<button>Stop</button>
<svg width="600" height="100"></svg>
这篇关于暂停和恢复过渡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!