CSS3로 공 튀기기 애니메이션 구현하기

JavaScript와 JQuery를 배우면서, 애니메이션 구현하는 방법 또한 접하게 되었다.

실제로 사용해보니 드롭다운 내비게이터 같은 정말 홈페이지에서 쓸법한 애니메이션을 구현할 수도 있었다.

 

그렇기 때문에 더 이상 CSS3를 사용한 애니메이션 구현은 필요 없을 줄 알았다.

이를 증명이라도 하려는 듯, 나는 다른 사람의 블로그에 있는 공 튀기기 CSS3 애니메이션의 동작을 보고서

JavaScript와 JQuery를 사용해 구현하고자 했다.

 

 

공 튀기기 모션이 어느 정도 구현이 된 것을 확인할 수 있다.

왜 "완벽하게"가 아니라 "어느 정도"구현이 됐다고 말하는지는 동작을 하다 보면 생기는 오류에서 찾을 수 있다.

 

우선 처음 delay( )를 설정할 때 각각의 공마다 서로 다른 시작 delay( )를 주어야만 한다.

그렇다고 해서 delay( )를 바로 줘버리면 animate( )되기도 전에 delay( ) 애니메이션이 끝나버리므로

임시로 stop( ) 한 후에 delay( )를 주었다.

    $.each($(".ball"),function(index, obj){
        $(obj).stop().delay(index*delayOffset);
    });

그 후에 animate( )를 동시에 실행함으로써 시작 delay( )만 다르고, 모두 같은 동작을 하는 것을 알 수 있다.

그러나, 동작을 하는 와중에 무언가 특정 상황이 발생하면 공이 서로 같은 위치에서 동작을 하게 된다.

다시 말해서 처음 주어주었던 delay( )가 의미가 없어진다.

 

공끼리 서로 달라붙어서 하나처럼 행동한다...

이를 해결하려면 어떻게 해야 할까 고민하던 끝에 결국 CSS3로 이 애니메이션을 구현하기로 결정했다.

 

 

소스코드도 훨씬 간결해지고, 위와 같은 오류도 발생하지 않았다.

 

이번 애니메이션 구현을 통해 배운 것이 있다면, 너무 하나의 방식, 하나의 것에만 집착하지 않고

다른 방식으로도 접근할 수 있도록 하는 자세, 다양성을 추구하는 자세를 갖추는 것의 중요성을

절대로 무시해서는 안 되겠다는 것이다.

 

또한, 내비게이터와 같은 복잡한 동작을 구현할 때는 JavaScript + JQuery로 구현하고

지금과 같은 간단하거나, 무한반복을 해야 하는 동작을 구현해야 할 때는

CSS3로 작업을 해야 효율성이 좋겠다는 생각이 들었다.