SVG 애니메이션/TweenMax/Reverse 애니메이션

여기서 yoyo = true로 실행되는 애니메이션은 애니메이션이 한 방향으로 이동 한 다음 "역방향"애니메이션을 의미합니다.SVG 애니메이션/TweenMax/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)

이 reversed:true의 혼합을 사용하여,이 트릭을 할해야 당신에게

출처

2017-02-18 Léo Coco

감사 귀하의 TimelineMax() 생성자에서 당신이 당신의 타임 라인/트윈 체인 때 또한 progress(0.5)를 사용하여 : reversed:true

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

reversed이 TimelineMax 문서에서 발견하여 이에

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

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

을

나는 이것을 변경 :

012

3,516,는 (: 부울 값) * 반전 가져 또는 애니메이션이 거꾸로 재생되어야할지 여부 또는 나타내는 애니메이션의 반대 상태로 설정한다.

그리고 이런이

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을 : 부울 ) : * [가져 오기 또는 가져 오기] 타임 라인의 진행률은 이고 가상 재생 헤드의 위치를 나타내는 0과 1 사이의 값인 (반복 제외)입니다. 0은 처음에, 0.5는 중간에 이 완료되고 1이 완료됩니다.

자료 :

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

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

출처

2017-02-21 18:40:41

SVG 애니메이션/TweenMax/Reverse 애니메이션

답변

관련 문제