2015-01-29 11 views
2

회전식 모델을 만들고 있는데 GSAP의 TweenMax와 Directional Rotation 플러그인을 사용하여 회전식 슬라이드를 돌리고 있습니다.TweenMax에서 방향 회전에 완전 회전 (360도) 추가

사용자가 "시작"버튼을 클릭 할 때까지 회전식 슬라이드가 천천히 회전합니다. 그러면 회전식 메뉴가 첫 번째 요소로 회전합니다. 내 문제는 요소에 전체 회전을 추가하려고하지만 회전 대상에 360도를 추가하더라도 회전하지 않는다는 것입니다. 나는도 (degrees)가 거리가 아닌 좌표와 같은 역할을한다고 생각한다.

TweenMax.to(carousel, 1, { directionalRotation:{ rotationY: Math.degrees(item.eq(0).angle + Math.PI/2) + 360 + "_cw" }, ease: Expo.easeInOut, onComplete: stopUpdateAppearance }); 

그러나이 didn를 :

TweenMax.to(carousel, 1, { directionalRotation:{ rotationY: Math.degrees(item.eq(0).angle + Math.PI/2) + "_cw" }, ease: Expo.easeInOut, onComplete: stopUpdateAppearance }); 

이 내가 트릭 (알 360)을 할 것이라고 생각했던 것입니다 :

코드가 원래 대상 요소에 스핀 무슨이다 일하지 마라. 그래서 그때 나는 시도했다 :

TweenMax.to(carousel, 1, { directionalRotation:{ rotationY: "+=360_cw" }, ease: Expo.easeInOut }); 
TweenMax.to(carousel, 1, { directionalRotation:{ rotationY: Math.degrees(item.eq(0).angle + Math.PI/2) + "_cw" }, ease: Expo.easeInOut, onComplete: stopUpdateAppearance }); 

이것은 시작 위치로 회전 한 것과 같은 결과를 보였다.

GSAP 및 TweenMax에 익숙하지 않아 구문이나 접근 방식에 대해 알 수 없습니다. 어떻게 생각해?

+0

당신이 제공하시기 바랍니다 수 있습니다 jsfiddle 또는 codepen 예제를 사용하면 코드를 문맥에서 볼 수 있습니다. 따라서 우리는'item.eq (0) .angle'과'Math.degrees (item.eq (0) .angle + Math.PI/2')가 코드에서 출력되는 것을 볼 수 있습니다. –

답변

1

var currentRotation = 50; 
TweenMax.to(carousel, 1, { directionalRotation:{rotationY:"+=" + (360-currentRotation) + "_cw"}, ease: Expo.easeInOut }); 

P.S. 들어 360

에서 (버튼이 클릭 될 때) 현재 회전 목마를 감산 시도 그냥 추측 :

특별히 Y 축을 중심으로 회전 싶지 않는 경우에, 어쩌면 당신은 회전 오브젝트 {의 rotationY}를 제거해야하고 대신를 사용

TweenMax.to(carousel, 1, { directionalRotation:"+=" + (360-currentRotation) + "_cw", ease: Expo.easeInOut }); 

희망이