Javascript CSS更改动画持续时间而不跳跃

我有一个轮子旋转的简单动画。我试图控制转速的纺车使用滑块（输入范围）。我成功地做到了这一点，但每次我更改动画时，动画都会重新启动（它会跳跃）。寻找一个解决方案，以创建一个平稳的速度增加。当用户增加滑块的值时，滚轮以更高的速度旋转

在下面的代码中，#加载是纺车

$（document）.on（'input'，'#slider'，function（）{
var speed=$（this.val（）；
$（'#speed'）.html（speed）；
$（“#加载”）.css（“动画持续时间”，50/速度+“s”）；
});
#加载{
位置：绝对位置；
左：0；
右：0；
保证金：自动；
变换原点：50%50%；
动画：旋转光无限线性；
动画持续时间：0；
}
@关键帧旋转右{
100% {
变换：旋转（360度）；
}
}

速度：
如果没有不使用CSS动画的不同方法，我不能完全确定这是否可行。问题在于，无论何时更改速度，动画都不会正常化。它始终从动画的0%设置动画到动画的100%。每次调整
动画持续时间
，都将使用动画中的当前位置重新插值

换句话说，如果在
t=12
时从
动画持续时间：25
更改为
50
，那么动画完成了一半（180度）；现在只完成了四分之一（90度）。但是，您无法控制
t
，这是浏览器的功能。如果可以，您可能希望将
t
设置为保持在插值中的位置，在本例中，
t=25
，以便保持与原来相同的动画完成百分比，但会延长剩余时间

我稍微修改了你的脚本，试图更好地展示我所描述的内容。它将在速度0和5之间每秒增加速度
0.25
。您可以看到问题的症结在于浏览器控制的
t

为了用JavaScript控制自己，你可以重写它，但我认为你必须放弃CSS动画

要更深入地讨论这个由浏览器控制的
t
变量，请看这篇关于CSS技巧的文章：

某些浏览器允许暂停/恢复CSS关键帧动画，但
就这样。你不可能去世界上某个特定的地方
动画，也不能平滑地反转部分路径或更改
时间尺度，或在特定点添加回调，或将其绑定到富
播放事件集。JavaScript提供了很好的控制，如中所示
下面是演示

这是您的问题，您希望能够更改动画的持续时间，但同时也可以在动画中找到正确的位置


$（函数（）{
var-speed=parseInt（$（“#滑块”）.val（），10）；
$（“#速度”）.html（速度）；
$（“#加载”）.css（“动画持续时间”，50/速度+“s”）；
var forward=真；
setInterval（函数（）{
速度+=（前进？0.25:-0.25）；
如果（速度>=5）{
正向=假；
}否则如果（速度TL；DR

不，你不能（根据我的测试）

首先，让我们去掉css中的动画声明，并将其向上移动到Javascript，这样动画循环就不会启动（即使您无法直观地看到它正在运行）

您是否注意到，即使从初始位置移动滑块，长方体似乎也从随机位置开始？这是因为动画循环实际上一直在运行


现在，您可以使用
getComputedStyle（loadingElement）.getPropertyValue（'transform'）；
通过动画，在任何给定的时间，实际获取应用于长方体的当前变换值，这将返回一个矩阵，该矩阵不会给出与此类似的结果，但我们可以从该矩阵计算旋转角度：

（使用一些数学解释）

现在我们有了这个值，我们必须对它进行规格化，使其角度只有正值，然后我们可以将这个角度作为
transform:rotate（Xdeg）

到目前为止还不错，您可以在代码段中看到这一点，但是即使您这样做，并增加/减少速度值，动画循环已经以设置的时间刻度运行，并且无法重置此循环

到目前为止，我的答案是，其他对动画循环有更深入了解的人可以从构建动画循环，并可能提出一个工作代码

如果你还在读这篇文章，你可能会想，只要用
loadingElement.style.removeProperty（'animation'）
删除动画，然后再次分配它，它就不起作用了。如果用setInterval（…，0）再次启动动画，使它在下一个循环中运行，它也不会起作用


$（document）.on（'input'，'#slider'，function（）{
var speed=$（this.val（）；
var loadingElement=document.querySelector（“加载”）
$（'#speed'）.html（speed）；
//获取应用于元素的动画的当前状态（这是一个矩阵）
var currentCss=getComputedStyle（loadingElement）.getPropertyValue（'transform'）；
如果（currentCss！=“无”）{
//从矩阵中解析我们需要的每个值（总共有6个）
var values=currentCss.split（“（”）[1]；
values=values.split（'））[0]；
values=values.split（'，'）；
var a=数值[0]；
var b=数值[1]；
var c=数值[2]；
var d=数值[3]；
//这里我们进行实际计算
变量角度=数学圆（数学atan2（b，a）*（180/数学PI））；
//标准化为正值
角度=角度<0？角度+360：角度；
loadingElement.style.removeProperty（'animation'）；//出于测试目的删除属性
$（“#加载”）.c
Math.round(Math.atan2(b, a) * (180/Math.PI));

@keyframes updatedKeyframes {
  0% {
    transform: rotate(90deg);
  },
  100% {
    transform: rotate(450deg); // 90 + 360 
  }
}