Javascript 如何在适当的中间停止动画

下面是一个使用CSS关键帧的简单脉动动画

问题是，如果我想丢弃或删除动画中间的动画，动画停止与一个猛拉运动（突然跳到它的初始状态，如你可以在片段中看到）。 <>我希望动画能够回到它的初始状态，即使你在动画中间停止它。

接受JQuery和TweenMax

有办法吗

let test=document.getElementById（“test”）；
setTimeout（函数（）{
test.classList.add（“addAniamte”）；
}, 2000)
setTimeout（函数（）{
test.classList.remove（“addAniamte”）；
test.classList.add（“removeAniamte”）；
console.log（'停止操作！'）；
}，4500）

@-webkit关键帧脉冲{
0% {
-webkit变换：比例（1,1）；
}
50% {
-webkit转换：规模（3,3）；
}
100% {
-webkit变换：比例（1,1）；
};
}
#试验{
背景：红色；
宽度：20px；
高度：20px；
利润率：60像素；
}
阿达尼安特先生{
-webkit动画：脉冲1s线性无限；
动画：脉冲1s线性无限；
}
.removeAniamte{
-webkit动画：无；
动画：无；
}

---

我尝试使用

getComputedStyle

使javascript完全动态化。为了顺利停止动画，我们需要一个watcher变量，它将计算每个动画周期的持续时间。（

tempAnimationWatcher

）

将动画开始事件添加到元素

计算单个动画持续时间（

testAnimationTime

）并启动

tempAnimationWatcherInterval

以观看动画循环时间

tempAnimationWatcher

如果

停止动画

，则在剩余的css时间后停止动画。（

testAnimationTime-tempAnimationWatcher

）

注意：

测试时间

计算基于css动画时间以秒为单位的考虑。参见第行

testAnimationTime=parseInt（animationdurationncss.substring（0，animationdurationncss.length-1））*1000，这是删除最后一个字符并在毫秒内转换它


const test=document.getElementById（“测试”）；
让tempAnimationWatcher=0；
设testAnimationTime=0；
让tempAnimationWatcherInterval；
test.addEventListener（'animationstart'，函数（e）{
console.log（'动画开始'）
const animationdurationncss=getComputedStyle（测试）；
testAnimationTime=parseInt（animationdurationncss.substring（0，animationdurationncss.length-1））*1000；
tempAnimationWatcher=0；
tempAnimationWatcherInterval=setInterval（（）=>{
tempAnimationWatcher+=10；
如果（tempAnimationWatcher>=testAnimationTime）tempAnimationWatcher=0；
}, 10);
});
函数startAnimation（）{
test.classList.add（“addAniamte”）；
}
函数stopAnimation（）{
clearInterval（tempAnimationWatcherInterval）；
设置超时（（）=>{
test.classList.remove（“addAniamte”）；
控制台日志（“停止操作！”）；
}，（testAnimationTime-tempAnimationWatcher））；
}
startAnimation（）
@关键帧脉冲{
0% {
-webkit变换：比例（1,1）；
}
50% {
-webkit转换：规模（3,3）；
}
100% {
-webkit变换：比例（1,1）；
}
;
}
#试验{
背景：红色；
宽度：20px；
高度：20px；
利润率：60像素；
}
阿达尼安特先生{
动画：脉冲2s线性无限；
}


开始
停止
使用GSAP很容易做到这一点！下面介绍如何在GSAP3中执行类似的操作


var-tween=gsap.from（“#test”，{持续时间：1，标度：0.33，重复：-1，yoyo:true，暂停：true}）；
函数startAnimation（）{
tween.play（）；
}
函数stopAnimation（）{
tween.暂停（）；
gsap.to（tween，{持续时间：0.5，进度：0}）；
}

#试验{
背景：红色；
宽度：60px；
高度：60px；
利润率：60像素；
}

开始
停止
有帮助吗？您是针对chrome浏览器还是其他浏览器？仅针对chrome，我对这样做的可能性感到失望。。。我正在研究GSAP…这是结果吗？如果这能满足你的需要，我会解释的。单击“开始”开始动画，然后单击“停止”停止。持续时间过后，只有动画才会停止。@Zachsauier您可能是对的。我从来没用过GSAP。所以我只想用香草javascript。