TweenMax重复GSAP

Question

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

Answer 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的构造函数中使用重复：-1。

Answer 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()

Answer 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)

TweenMax重复GSAP

问题描述

3 个解决方案

解决方案1
2 2018-07-20 00:03:43

解决方案2
0 2019-08-17 17:14:27

解决方案3
0 2019-09-17 07:35:33

TweenMax重复GSAP

问题描述

3 个解决方案

解决方案1 2 2018-07-20 00:03:43

解决方案2 0 2019-08-17 17:14:27

解决方案3 0 2019-09-17 07:35:33

解决方案1
2 2018-07-20 00:03:43

解决方案2
0 2019-08-17 17:14:27

解决方案3
0 2019-09-17 07:35:33