我正在尝试编辑这个d3 示例.
更具体地说,我将尝试应用暂停-恢复控件暂停恢复指南除了像这样的控制栏外,我们还在视频下提供了控制栏。最后我想象有这样的事情:
如何在开始时应用暂停恢复控制?
这是一个快速实施。暂停本质上取消了当前的转换,并且播放根据暂停的时间/位置恢复它:
var pauseValues = {
lastT: 0,
currentT: 0
};
function transition() {
circle.transition()
.duration(duration - (duration * pauseValues.lastT)) // take into account any pause
.attrTween("transform", translateAlong(path.node()))
.each("end", function(){
pauseValues = {
lastT: 0,
currentT: 0
};
transition()
});
}
function translateAlong(path) {
var l = path.getTotalLength();
return function(d, i, a) {
return function(t) {
t += pauseValues.lastT; // was it previously paused?
var p = path.getPointAtLength(t * l);
pauseValues.currentT = t; // just in case they pause it
return "translate(" + p.x + "," + p.y + ")";
};
};
}
d3.select('button').on('click',function(d,i){
var self = d3.select(this);
if (self.text() == "Pause"){
self.text('Play');
circle.transition()
.duration(0);
setTimeout(function(){
pauseValues.lastT = pauseValues.currentT; // give it a bit to stop the transition
}, 100);
}else{
self.text('Pause');
transition();
}
});
transition();
Example here.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)