SVGアニメーション/ TweenMax /リバースアニメーション

Question

yoyo = trueで実行されているアニメーションは、アニメーションが一方向に移動してから「逆」アニメーションを実行することを意味します。

私は、ヨーヨーモードを持たずにモードを逆転して再生したいと考えています。言い換えれば

、私は2番目の部分を持っているしたいと思います（逆1）

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) 

がreversed:trueのミックスを使用して、これはトリックを行う必要がありますあなたの

Answer 1

ありがとうございましたあなたのTimelineMax()コンストラクタであなたのタイムライン/トゥイーンをチェーンするときもprogress(0.5)を使用して：

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

を私はこれを変更：これに

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

をTimelineMaxドキュメントで発見されreversed:true

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

reversedを使用して：

は（：ブール値）：逆転* は、アニメーションが逆方向に再生される必要があるかどうか ない示しアニメーションの逆の状態を取得または設定します。

と私は、このために、この

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

を変更してタイムライン

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

.progress（値を通じて半分を表す、progress(0.5)を追加：番号、suppressEvents。 Boolean ）：* [override] Getまたはsタイムラインの進捗を0から1の間の値 に設定して、仮想再生ヘッドの位置を示す （リピートは除きます）。ここで0は最初に、0.5は途中で が完了し、1が完了します。

資源：

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

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