TweenMax 重复 GSAP答案

【问题标题】：TweenMax Repeat GSAPTweenMax 重复 GSAP
【发布时间】：2021-08-16 13:43:13
【问题描述】：

我想在最后重复这个动画。重复（）;不适用于多个对象。它是使用 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>

【问题讨论】：

您可以为任何补间添加“重复”，但如果您希望重复整个补间序列，请查看 TimelineMax。你会喜欢的。 greensock.com/docs/TimelineMax 这是一篇必读文章，可以彻底改变您的动画工作流程：css-tricks.com/writing-smarter-animation-code

标签： javascript gsap

【解决方案1】：

你可以把整个东西放在一个函数中，它会像这样在最终动画的 onComplete 中调用它自己：

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。

【讨论】：

【解决方案2】：

我没有时间准确地重新创建您的动画。但是这段代码应该给出如何使用 TimelineMax 来完成它的概念性想法。

 // put the timeline in a function, so that it does not automatically start affecting the DOM before you want it to.
 const getTimeline = () => {
   // the timeline methods are chain-able
   let timeline = new TimelineMax({repeat: -1, paused: true})  // repeat setting for infinite repeat
    timeline.set('.chat', {x:0, opacity:0, scale:0.1}) //set the elements in their start positions
            .set('.call', { {x:0, opacity:0, scale:0.1})
            .addLabel('one', 3) //add labels for other sections of the timeline
            .addLabel('two', 2) //the first param is the element, the second is the time at which the label starts
            .addLabel('three', 4)
            .to('.chat', 0.7, { scale:1, opacity: 1, ease:Power2.easeOut}, 'one')  // this tween will start where you set label one to start
            .to('.chat', 0.7, { scale:0, opacity: 0, ease:Power2.easeOut}, 'two')
            .to('.call', 0.7, { scale:1, opacity: 1, ease:Power2.easeOut}, 'three')
            .to('.call', 0.7, { scale:0, opacity: 0, ease:Power2.easeOut}, 6) // You don't have to use a label. You can just set the time where you want this tween to start
   return timeline
}

let timeline = getTimeline()
timeline.play()

【讨论】：

【解决方案3】：

如果你有多个补间，你可以这样做

function chatTween() {
  var tl = new TimelineMax()
  tl.from(".chat", 0.7, {x:0, opacity:0, scale:0.1, ease:Back.easeOut})
    .to(".chat", 0.7, {x:0, scale:0, ease:Power2.easeOut, delay:3})
  return tl
}

function callTween() {
  var tl = new TimelineMax()
  tl.from(".call", 0.7, {x:0, opacity:0, scale:0.1, ease:Back.easeOut})
    .to(".call", 0.7, {x:0, scale:0, ease:Power2.easeOut, delay:3})
   return tl
}

function whatsappTween() {
  var tl = new TimelineMax()
  tl.from(".whatsapp", 0.7, {x:0, opacity:0, scale:0.1, ease:Back.easeOut})
    .to(".whatsapp", 0.7, {x:0, scale:0, ease:Power2.easeOut, delay:3})
   return tl
}

你可以像这样将它添加到主时间轴中并让它像这样重复

var tl = new TimelineMax({ repeat: -1 })
tl.add(chatTween(), 0)
  .add(chatTween(), 2)
  .add(chatTween(), 4)

【讨论】：

【解决方案4】：

如果您想重复整个动画，那么这将是可行的

tl=gsap.timeline({repeat:-1})
tl.from(".chat", 0.7, {x:0, opacity:0, scale:0.1, ease:Back.easeOut});
  .to(".chat", 0.7, {x:0, scale:0, ease:Power2.easeOut, delay:3})

  .from(".call", 0.7, {x:0, opacity:0, scale:0.1, ease:Back.easeOut, delay:3});
  .to(".call", 0.7, {x:0, scale:0, ease:Power2.easeOut, delay:6})

  .from(".whatsapp", 0.7, {x:0, opacity:0, scale:0.1, ease:Back.easeOut, delay:6});
  .to(".whatsapp", 0.7, {x:0, scale:0, ease:Power2.easeOut, delay:9})

【讨论】：