애니메이션 재생헤드를 처음으로...

안녕하세요 leo 님 :)

단일 대상의 애니메이션을 지속적으로 클릭시 동일한 애니메이션이 작동되게 코드를 작성하는 방법은 다양하게 있습니다. 그중에서 두가지 정도만 코드로 보여드리면서 설명을 드려보겠습니다

1. 애니메이션 종료 후 진행률을 가져와 애니메이션의 시작점으로 재생헤드를 이동시켜 다시 애니메이션이 시작될 수 있도록 한다.

    
     boxes.forEach((box)=>{
      box.addEventListener('click',()=>{
        gsap.to(box,{
          rotation:360,
          onComplete(){
              this.paused(true).progress(0)
          }
        })
      })
    })

여기서 콜백함수인 onComplete 메서드를 consise 방식으로 설정했기 때문에 함수 안에서의 this는 tween 자체가 들어오게 됩니다.

자신의 트윈을 일시정지 시킨 후 progress의 setter 기능을 활용해 재생헤드를 제일 앞으로 (0) 이동시켜 줍니다. (progress의 값이 1일경우 애니메이션 종료를 뜻합니다.)

일시정지를 하지 않으면 애니메이션이 무한으로 반복되기 때문에 항상 앞에 일시정지를 해주시고 paused메서드에서 반환되는 값이 역시 트윈 자체가 반환되기 때문에 method chain 기능을 활용해 작성할 수 있습니다.

2. 결국 360도의 값을 가지고 있기 때문에 애니메이션이 다시 작동되지 않는다면, 애니메이션 종료 후 원래의 값으로 되돌려 놓거나 지워버린다.

• clearProps를 사용한 속성 제거

    
    boxes.forEach((box)=>{
      box.addEventListener('click',()=>{
        gsap.to(box,{
          rotation:360,
          clearProps:'rotation',
      
        })
      })
    })

gsap part1에서 애니메이션의 속성 자체를 제거하는 clearProps에 대해 설명한적이 있습니다. 해당 속성을 사용할 경우 애니메이션 종료 후 대상이 가지고있는 property를 제거해 줌으로써 동일한 애니메이션을 다시 실행할 수 있습니다.

• gsap.set을 사용해 되돌리기

   
    boxes.forEach((box)=>{
      box.addEventListener('click',()=>{
        gsap.to(box,{
          rotation:360,
          onComplete(){
            gsap.set(box,{rotation:0})
          }
        })
      })
    })

애니메이션 종료 시점을 체크해 set메서드를 사용하여 box의 rotation값을 다시 0으로 되돌려 놓으면 해당 애니메이션을 다시 재생시킬 수 있습니다.

위에서 언급드린 방법 말고도 다양한 방법들이 존재하며 이는 정해진 규칙이 아닌 개발자의 취향에 따라 얼마든지 변형하여 사용가능합니다.

열심히 공부하시는 leo님을 응원합니다 :)

화이팅 💪