Fatal编程技术网
  • animation/
  • Animation 动态更改SVG动画速度，无位置跳跃

Animation 动态更改SVG动画速度，无位置跳跃

animation svg path

Animation 动态更改SVG动画速度，无位置跳跃,animation,svg,path,Animation,Svg,Path,我有一个简单的SVG，其中有一个元素围绕圆形路径旋转。当用户悬停时，通过更改dur属性，旋转速度会加快。问题是，发生时元素会跳到不同的位置。如何解决这个问题 $（'g'）。悬停( 函数（）{ $（this.find（'animateMotion'）.attr（'dur'，'3s'）； }, 函数（）{ $（this.find（'animateMotion'）.attr（'dur'，'7s'）； } ); 调整动画时间线，使动画位于同一点 var firstTime=true； $（'g'）。

我有一个简单的SVG，其中有一个元素围绕圆形路径旋转。当用户悬停时，通过更改dur属性，旋转速度会加快。问题是，发生时元素会跳到不同的位置。如何解决这个问题

$（'g'）。悬停(
函数（）{
$（this.find（'animateMotion'）.attr（'dur'，'3s'）；
},
函数（）{
$（this.find（'animateMotion'）.attr（'dur'，'7s'）；
}
);

调整动画时间线，使动画位于同一点



var firstTime=true；
$（'g'）。悬停(
函数（）{
$（this.find（'animateMotion'）.attr（'dur'，'3s'）；
如果（第一次）{
第一次=错误；
返回；
}
document.getElementById（“根”）.setCurrentTime(
document.getElementById（“根”）.getCurrentTime（）*3/7）；
},
函数（）{
$（this.find（'animateMotion'）.attr（'dur'，'7s'）；
document.getElementById（“根”）.setCurrentTime(
document.getElementById（“根”）.getCurrentTime（）*7/3）；}
);



这种方法效果要好得多，但我第一次悬停时还是会有跳跃。在那之后，它确实工作得很好，但是在跳跃之前。因为动画开始得很快。它不会慢下来，直到你盘旋一次并停止盘旋。这对我来说似乎很奇怪，但我想这是你的功能。我很抱歉，我在最初的帖子中犯了一个错误，动画应该启动得很慢。你知道如何让动画具有缓慢的初始值吗？我知道，但你真的应该自己去弄清楚。很明显，你是对的，也许我今天过得很慢，但我没有马上看到。