文章/答案/技术大牛

发布

问TweenMax重复GSAP
EN

Stack Overflow用户

提问于 2018-06-20 18:31:13

回答 4查看 670关注 0票数 1

我想在最后重复这个动画。repeat()；不适用于多个对象。它是用TweenMax创建的。所有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>

javascript

gsap

回答 4

Stack Overflow用户

发布于 2018-07-20 08:03:43

您可以将整个内容放在一个函数中，该函数会像这样调用最终动画的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

Stack Overflow用户

发布于 2019-08-18 01:14:27

我没有时间准确地重现你的动画。但是这段代码应该给出了如何使用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()

票数 0

Stack Overflow用户

发布于 2019-09-17 15:35:34

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

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)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50946080

复制

相似问题

问TweenMax重复GSAP
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TweenMax重复GSAPEN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TweenMax重复GSAP
EN