我想创建一个组件,其mediabar像有暂停和恢复功能。红色垂直线从左转到右,当我点击暂停按钮将停止转换,当我点击播放按钮,它会恢复的过渡。
我创建了一个codepen也针对此问题。
我感谢你的帮助;
const ANIMATIONLENGTH = 10000;
let pauseValues = {
lastT: 0,
currentT: 0,
currentPos: 0
};
const svg = d3
.select("#mediabar")
.append("svg")
.attr("width", 640)
.attr("height", 18);
svg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "#D3D3D3");
const line = svg
.append("rect")
.attr("height", 18)
.attr("width", 2)
.attr("fill", "red")
.attr("class", "slider");
const scaleTimeline = d3.scale
.linear()
.domain([0, 1])
.range([0, 640]);
const play = () => {
line
.transition()
.duration(ANIMATIONLENGTH * (1 - pauseValues.lastT))
.ease("linear")
.attrTween("x", () => t => {
const time = t + pauseValues.lastT;
pauseValues.currentT = time;
pauseValues.currentPos = scaleTimeline(time);
return pauseValues.currentPos;
})
.each("end", () => {
pauseValues = {
lastT: 0,
currentT: 0,
currentPos: 0
};
play();
});
};
const pause = () => {
line.transition().duration(0);
setTimeout(() => {
pauseValues.lastT = pauseValues.currentT;
}, 100);
};
.buttons {
display: flex;
flex-direction: row;
margin-bottom: 4px;
}
.buttons-pause {
padding: 2px;
border: 1px solid black;
border-radius: 3px;
cursor: pointer;
}
.buttons-play {
padding: 2px;
border: 1px solid black;
border-radius: 3px;
margin-right: 4px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div class='buttons'>
<div class="buttons-play" onclick="play()">play</div>
<div class="buttons-pause" onclick="pause()">pause</div>
</div>
<div id='mediabar'></div>
在我看来,使用的转变不仅是一个矫枉过正这里,但也是你必须使出浑身解数(因为你是谁!)只是为了工作的事情。就个人而言,我宁愿使用D3间隔或D3计时器。
回到刚才的问题:
问题只是attrTween
方法内的工厂。如你所知,这t
从0到1,这使得time
超越极限(,为1给予您scaleTimeline
规模的域),当您暂停动画:
const time = t + pauseValues.lastT;
因此,对于time
最后的值总是大于1(因为pauseValues.lastT
大于0),以及到最后你越接近停顿的过渡高于最后一个值将是(和,因此,该行的速度越高)。
简单的解决方法是:
const time = pauseValues.lastT + (1 - pauseValues.lastT) * t;
正如你所看到的,通过使用(1 - pauseValues.lastT) * t
我们确保time
的最后的值(当t
达到1)为1。
下面是这种变化的代码:
const ANIMATIONLENGTH = 10000;
let pauseValues = {
lastT: 0,
currentT: 0,
currentPos: 0
};
const svg = d3
.select("#mediabar")
.append("svg")
.attr("width", 640)
.attr("height", 18);
svg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "#D3D3D3");
const line = svg
.append("rect")
.attr("height", 18)
.attr("width", 2)
.attr("fill", "red")
.attr("class", "slider");
const scaleTimeline = d3.scale
.linear()
.domain([0, 1])
.range([0, 640]);
const play = () => {
line
.transition()
.duration(ANIMATIONLENGTH * (1 - pauseValues.lastT))
.ease("linear")
.attrTween("x", () => t => {
const time = pauseValues.lastT + (1 - pauseValues.lastT) * t;
pauseValues.currentT = time;
pauseValues.currentPos = scaleTimeline(time);
return pauseValues.currentPos;
})
.each("end", () => {
pauseValues = {
lastT: 0,
currentT: 0,
currentPos: 0
};
play();
});
};
const pause = () => {
line.transition().duration(0);
setTimeout(() => {
pauseValues.lastT = pauseValues.currentT;
}, 100);
};
.buttons {
display: flex;
flex-direction: row;
margin-bottom: 4px;
}
.buttons-pause {
padding: 2px;
border: 1px solid black;
border-radius: 3px;
cursor: pointer;
}
.buttons-play {
padding: 2px;
border: 1px solid black;
border-radius: 3px;
margin-right: 4px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div class='buttons'>
<div class="buttons-play" onclick="play()">play</div>
<div class="buttons-pause" onclick="pause()">pause</div>
</div>
<div id='mediabar'></div>