Question

这是以yoyo = true运行的动画，意味着动画以一种方式运行，然后执行＆＃34;反向＆＃34;动画。

我希望能够在没有yoyo模式的情况下以反向模式播放动画。

换句话说，我想要第二部分（反向部分）

https://codepen.io/chrisgannon/pen/greVXG

var xmlns = "http://www.w3.org/2000/svg",
  xlinkns = "http://www.w3.org/1999/xlink",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  }


TweenMax.set('svg', {
  visibility: 'visible',
  transformOrigin:'50% 50%',
  scale:1
})

var mainTl = new TimelineMax({repeat:-1, yoyo:true, repeatDelay:2});
var skySunTl = new TimelineMax({paused:true});
skySunTl.fromTo('#lower', 10, {
  stopColor:'#020111'
},{
  stopColor:'#CD82A0',
  ease:Linear.easeNone
})
.fromTo('#upper', 10, {
  stopColor:'#1F1F2B'
},{
  stopColor:'#4B4A6A',
  ease:Linear.easeNone
},'-=10')

.to('#lower', 10, {
  stopColor:'#95DFFF',
  ease:Linear.easeNone
})
.to('#upper', 10, {
  stopColor:'#94DFFF',
  ease:Linear.easeNone
},'-=10')

.to('#lower', 10, {
  stopColor:'#f9b681',
  ease:Linear.easeNone
})
.to('#upper', 10, {
  stopColor:'#eb4a78',
  ease:Linear.easeNone
},'-=10')

.fromTo('#sun', 10, {
  fill:'#B30200'
},
  {
  fill:'#EC8323',
  ease:Linear.easeNone

},'-=30')
.to('#sun', 10, {
  fill:'#FFF',
  ease:Linear.easeNone
},'-=20')
.to('#sun', 10, {
  fill:'#fefdeb',
  ease:Linear.easeNone
},'-=10')

.fromTo('#sun', 15, {
  attr:{
    cy:410,
    r:105
  }},{
  attr:{
    cy:0,
    r:90
  },
  ease:Power1.easeInOut
},'-=30')
.to('#sun', 14, {
  attr:{
    cy:300,
    r:105
  },
  ease:Sine.easeInOut
},'-=13')
.from('#mainCircleMask circle', 30, {
  attr:{
    r:500
  },
  ease:Power1.easeInOut
},'-=30')

var waterTl = new TimelineMax({paused:true});
waterTl.fromTo('#waterCircle', 30, {
  fill:'#020111'
},{
  fill:'#5DB3C6',
  ease:Linear.easeNone
})
.fromTo('#waterRipple', 30, {
  fill:'#020111'
},{
  fill:'#A5DCE4',
  ease:Linear.easeNone
},'-=30')
.fromTo('body', 30, {
  backgroundColor:'#020111'
},{
  backgroundColor:'#FFF',
  ease:Linear.easeNone
},'-=30')


var skySunTween = TweenMax.to(skySunTl, 10, {
  time:skySunTl.duration(),
  ease:Power2.easeInOut
})

var waterTween= TweenMax.to(waterTl, 10, {
  time:waterTl.duration(),
  ease:Power2.easeInOut
})
mainTl.add(skySunTween, 0);
mainTl.add(waterTween, 0);
mainTl.timeScale(4);
mainTl.play(0)
//ScrubGSAPTimeline(mainTl)

//tl.timeScale(30)

谢谢

Answer 1

这应该可以解决问题，在reversed:true构造函数中混合使用TimelineMax()。在链接时间轴/补间时使用progress(0.5)：

https://codepen.io/jonathan/pen/dNxgVK

我改变了这个：

var mainTl = new TimelineMax({
    repeat:1, 
    yoyo:true,
    repeatDelay:2
});

使用reversed:true

进行此操作

var mainTl = new TimelineMax({
    reversed:true
});

{p} reversed位于TimelineMax文档中：

颠倒（值：布尔值）：* 获取或设置动画的反转状态，指示是否为不应该向后播放动画。

我改变了这个

mainTl.add(skySunTween, 0);
mainTl.add(waterTween, 0);
mainTl.timeScale(4);
mainTl.play();

添加progress(0.5)，代表时间轴的一半

mainTl.add(skySunTween, 0);
mainTl.add(waterTween, 0);
mainTl.timeScale(4);
mainTL.progress(0.5); // added GSAP progress() method
mainTl.play();

.progress（ value：Number，suppressEvents：Boolean ）：* [override]获取或设置时间轴的进度值，该值是一个值介于0和1之间，表示虚拟播放头的位置（不包括重复）其中0表示开头，0.5表示中途完成，1完成。

<强>资源：

progress()：https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/progress/

TimelineMax：https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

SVG动画/ TweenMax /反向动画

1 个答案: