[트윈맥스(TweenMax)] 사용법5

마크업 부터 시작하는 UI/트윈맥스(TweenMax) 2017. 9. 21. 15:16

728x90
반응형

repeat(반복)


트윈맥스는 반복 옵션을 설정할 수 있습니다. repeat 이 바로 그 속성 입니다.

이 반복 속성은 원래 하려고 했던 애니메이션에 몇번 더 반복할 껀지 넣어주면 됩니다.

자바스크립트 코드를 보면 이렇습니다.

1
TweenMax.to('.box'2, {width:100,height:100,repeat:1});
cs

뒷쪽에 repeat 이라는 속성이 보이실 꺼예요. 지금 repeat 의 값으로 1 이라는 숫자가 들어가 있습니다.

그러면 일반적으로 한번만 움직이는거 아닌가 생각이 들텐데 이 옵션은

애니메이션이 최초 1회 실행 후에 반복하는 횟수 입니다. 즉 repeat이 1 이면 총 두번에 걸쳐 같은 애니메이션이 진행 됩니다.






무한 반복


무한 반복은 repeat 속성에 -1 이라는 값을 넣어주면 됩니다.

1
TweenMax.to('.box'2, {width:100,height:100,repeat:-1});
cs






repeatDelay(반복 지연)


repeat 동작이 있을 경우 반복이 실행될 시간을 지연시켜 줍니다.

당연한 이야기지만 이 속성을 쓰기위해 repeat 속성이 반드시 들어가야 합니다.

이 예제는 1초가 지난 후 다시 반복을 수행시킵니다. 

1
TweenMax.to('.box'2, {width:100,height:100,repeat:1,repeatDelay:1})
cs






yoyo (요요...)


장난감 요요를 떠올리시면 될꺼 같습니다.

장난감 요요는 내려갔다가 다시 올라오는데요. 중요한건 내려간 경로와 똑같이 위로 올라온다는 것입니다.

요요는 repeat 속성이 반드시 필요한거 같습니다.

repeat 속성의 속성값을 1로 주면 최초 실행 1번 + 반복 횟수(repeat속성의 값) 1번 으로 총 2번이 실행 됩니다.

그러나 repeat 속성이 2 이상의 숫자가 들어가면 움직이는데 장애가 발생하는거 같습니다.

고로, 한번만 갔다가 되돌아 올것인지, 영원토록 갔다 왔다를 할것인지 결정하는게 좋을듯 합니다.

yoyo의 속성값으로 줄 수 있는 값은 Boolean입니다. true, false

1
TweenMax.to('.box2'2, {width:100,height:100,repeat:-1,yoyo:true}
cs






yoyoEase


이 옵션은 일단 둘의 차이를 먼저 보는게 좋을듯 싶습니다.

위의껀  yoyoEase 옵션이 없는 상태이고 아래껀 yoyoEase 옵션이 있는 상태 입니다.

yoyoEase 옵션이 없는 상태인 경우 진행 했었던 애니메이션 그대로 뒤로 돌아가는 반면,

yoyoEase 옵션이 있는 상태인 경우 돌아가는 상태에 easing 상태를 줍니다.

yoyoEase 옵션을 주려면 easing을 넣어줘야 합니다.

yoyoEase 옵션은 Boolean 값을 넣어줘야만 합니다.

1
2
3
4
5
6
7
myTween1 = new TweenMax.to('.box1'2, {
  width:70,
  height:70,
  repeat:-1,
  yoyo:true,
  ease: Bounce.easeOut, x: 30
})
cs






onCompleteParams


onCompleteParams 는 애니메이션 중 호출하고자 하는 함수에 파라미터를 붙혀줄 수 있습니다.

물론, onComplete 옵션이 반드시 있어야 합니다. (onComplete : http://recoveryman.tistory.com/380)

사용은 이렇게 사용할 수 있습니다.

1
2
3
4
5
6
7
TweenMax.to('.box1'2, {
    width:70,
    height:70,
    ease: Bounce.easeOut, x: 30,
    onComplete:myFunc,
    onCompleteParams:["{self}"]
});
cs

배열의 형태로 넘겨줘야 하며, 자기 자신을 넘겨줄 때엔 "{self}" 라고 해야 합니다.

"{self}" 는 위의 코드로 보면 저 트윈 그 자체 입니다.

이렇게 보면 yoyo가 없는데도 yoyo옵션이 있는것 처럼 보입니다.

반응형