SVG 动画 / TweenMax / 反向动画

Question

这是运行 yoyo = true 的动画，意思是动画单向运行，然后执行 "reverse" 动画。

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

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

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

这应该可以解决问题，在您的 TimelineMax() 构造函数中混合使用 reversed:true。并且在链接 timelines/tweens:

时也使用 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
});

reversed 可在 TimelineMax 文档中找到：

reversed ( value:Boolean ) : * Gets or sets the animation's reversed state which indicates whether or not the animation should be played backwards.

我改变了这个

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] Gets or sets the timeline's progress which is a value between 0 and 1 indicating the position of the virtual playhead (excluding repeats) where 0 is at the beginning, 0.5 is halfway complete, and 1 is complete.

资源：

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

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

SVG 动画 / TweenMax / 反向动画

SVG animation / TweenMax / Reverse animation

animation

svg

gsap