时间戳

首页 > 解决方案 > 如何正确停止动画中间

javascript - 如何正确停止动画中间

问题描述

这是一个使用 CSS 关键帧的简单脉动动画。

问题是，如果我想丢弃或删除中间的动画，动画会以突然的动作停止（如您在片段中看到的那样突然跳转到其初始状态）。

即使您在动画中间停止动画，我也希望动画能够顺利返回其初始状态。

接受 JQuery 和 TweenMax。

有没有办法做到这一点？

let test = document.getElementById("test");


setTimeout(function(){

test.classList.add("addAniamte");

}, 2000)


setTimeout(function(){

test.classList.remove("addAniamte");
test.classList.add("removeAniamte");
console.log('stoping aniamtion!');

}, 4500)
@-webkit-keyframes pulse {
 0% {
 -webkit-transform: scale(1, 1);
}
 50% {
 -webkit-transform: scale(3, 3);
}
 100% {
 -webkit-transform: scale(1, 1);
};
}


#test {
	background: red;
	width: 20px;
	height: 20px;
  margin: 60px;
}

.addAniamte{
  -webkit-animation: pulse 1s linear infinite;
	animation: pulse 1s linear infinite; 
}

.removeAniamte{
  -webkit-animation: none;
	animation:none;
}
<div id="test"></div>

标签： javascriptjqueryhtmlcssgsap

解决方案

使用 GSAP 很容易做到这一点！以下是如何在 GSAP 3 中执行此类操作。

var tween = gsap.from("#test", {duration: 1, scale: 0.33, repeat: -1, yoyo: true, paused: true});

function startAnimation() {
    tween.play();
}

function stopAnimation() {
    tween.pause();
    gsap.to(tween, {duration: 0.5, progress: 0});
}
   
#test {
  background: red;
  width: 60px;
  height: 60px;
  margin: 60px;
}
<div id="test"></div>

<button onclick="startAnimation()">Start</button>
<button onclick="stopAnimation()">Stop</button>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.0.4/dist/gsap.min.js"></script>

如果没有 GSAP（或至少是仅 JS 的方法），它会非常混乱且容易出错，正如其他答案所示。事实上，我有自己的问题导致了一篇关于该主题的 CSS-Tricks 文章。

推荐阅读