요소의 TweenMax 회전을 적절하게 업데이트합니다.

Question

현재 TweenMax를 사용하여 회전 각도를 증가시켜 X 초마다 180도 회전하는 것을 시도하고 있습니다. 특히 CSSPlugin 내의 2D 변환.

순간 새로운 "애니메이션"트리거 될 때마다에서

현재 문제는 요소는 180도 전환 한 후 0도에 그것의 회전을 재설정합니다.

의도 된 결과

내가 뭘하려는 추가로 180도 현재의 총 회전 할 때마다 추가되는 경우에 그것을 가지고 있습니다. 예 :

TweenMax.to(el, 1, { 
    rotation: '+=180', 
    repeat: -1, 
    repeatDelay: 1, 
}); 

전체 예

가 here을 볼 수있다 : 180, 360, 540 등

현재 니핏 & 예 여기

내 TweenMax 코드의 대부분이다.

Answer 1

GSAP는 애니메이션의 끝 회전에 도달하는 "짧은"방법을 적용합니다. 대신 _cw 또는 다른 옵션을 사용하여 회전을 적용 할 방법을 라이브러리에 알려야합니다.

라이브 예 :

https://jsbin.com/ridoqa/edit?html,css,js,output

var el = document.querySelectorAll('#box'); 

TweenMax.from(el, 1, { 
    rotation: '+=360_cw', 
    repeat: -1, 
    repeatDelay: 1, 
}); 

더 많은 정보를 정기적으로 : https://greensock.com/forums/topic/7997-rotate-the-shortest-way/