Javascript 使用滑块设置元素变换（向前、向后）中动画的百分比

我有一个滑块，其可能值介于0到1之间，步长为0.1

例如，如果我在起始点移动滑块，动画将从0%开始，如果我将滑块移动到0.5 50%，则意味着它将从动画的50%开始到结束。 我的问题是，例如，如果我选择50%的滑块，动画将从50%开始，但如果我想将其返回到另一个百分比的动画，动画将不会返回到选定的百分比

我怎样才能解决这个问题

这是我的代码：

d3.选择Visualization.append'svg'； var vis=d3.selectsvg.attrwidth，800.attrheight，150.styleborder，1px纯红； 变量矩形=vis.appendrect.attrwidth，100.attrheight，70.attrx，0.attry，50； var持续时间=5000； 函数setPercentValuepercentage{ //矩形中断； 矩形转换 .durationduration*1-百分比 .easet=>d3.easeCubicpercentage+t*1-百分比 .attrx，250 .宽度，100 .身高100 .styleopacity，0.5 .填充，红色； }

---

动画仍在运行，这不是问题所在。问题是，一旦第一个动画结束，您将为元素设置从其最终值到这些相同最终值的动画，而不会发生任何事情

最简单的解决方案是在setPercentValue函数中再次设置初始位置/大小：

d3.选择Visualization.append'svg'； var vis=d3.selectsvg.attrwidth，800.attrheight，150.styleborder，1px纯红； 变量矩形=vis.appendrect.attrwidth，100.attrheight，70.attrx，0.attry，50； var持续时间=5000； 函数setPercentValuepercentage{ 矩形中断； 矩形宽度，100 .身高70 .attrx，0 attry先生，50岁 过渡 .durationduration*1-百分比 .easet=>d3.easeCubicpercentage+t*1-百分比 .attrx，250 .宽度，100 .身高100 .styleopacity，0.5 .填充，红色； }