我想在最后重复这个动画。重复();不适用于多个对象。它是使用 TweenMax (GSAP) 创建的。所有 div 都有 svg 图像，并且在 JS 中我为动画定义了 TweenMax.from 和 TweenMax.to 。
TweenMax.from(".chat", 0.7, {x:0, opacity:0, scale:0.1, ease:Back.easeOut});
TweenMax.to(".chat", 0.7, {x:0, scale:0, ease:Power2.easeOut, delay:3})
TweenMax.from(".call", 0.7, {x:0, opacity:0, scale:0.1, ease:Back.easeOut, delay:3});
TweenMax.to(".call", 0.7, {x:0, scale:0, ease:Power2.easeOut, delay:6})
TweenMax.from(".whatsapp", 0.7, {x:0, opacity:0, scale:0.1, ease:Back.easeOut, delay:6});
TweenMax.to(".whatsapp", 0.7, {x:0, scale:0, ease:Power2.easeOut, delay:9}) .demo{
position: absolute;
top: 50%;
left: 50%;
}
.logo{
width: 66px;
}
.chat{
width: 31px;
margin: 17px;
}
.call{
width: 30px;
margin-top: 12px;
margin-left: 17px;
}
.whatsapp{
width: 35px;
margin-top: 14px;
margin-left: 17px;
}<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="demo"> <img class="logo" alt="circle" src="https://svgshare.com/i/7Ah.svg"/> </div>
<div class="demo"> <img class="chat" alt="chat" src="https://svgshare.com/i/798.svg"/> </div>
<div class="demo"> <img class="call" alt="call" src="https://svgshare.com/i/7B2.svg"/> </div>
<div class="demo"> <img class="whatsapp" alt="whatsapp" src="https://svgshare.com/i/7At.svg"/> </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>最佳答案
您可以将整个内容放入一个函数中，该函数会在最终动画的完成时调用自身，如下所示:
const animation = () {
TweenMax.from(".chat", 0.7, {x:0, opacity:0, scale:0.1,
ease:Back.easeOut});
TweenMax.to(".chat", 0.7, {x:0, scale:0, ease:Power2.easeOut, delay:3})
TweenMax.from(".call", 0.7, {x:0, opacity:0, scale:0.1, ease:Back.easeOut,
delay:3});
TweenMax.to(".call", 0.7, {x:0, scale:0, ease:Power2.easeOut, delay:6})
TweenMax.from(".whatsapp", 0.7, {x:0, opacity:0, scale:0.1,
ease:Back.easeOut, delay:6});
TweenMax.to(".whatsapp", 0.7, {x:0, scale:0, ease:Power2.easeOut, delay:9, onComplete: () => {animation()} })
}
但是最好的方法是在TimelineMax的构造函数中使用repeat: -1 .
关于javascript - TweenMax 重复 GSAP，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50946080/