[Javascript독학] anime.js 사용하기

독학에 재미를 느끼면서 프로그래밍 독학을 시작했습니다. 예전부터 프로그래밍 공부는 조금씩 했지만 항상 문법만 익히고 끝내고 익히고 끝내고를 반복하여 실제로 사용해보지는 못했습니다. 마치 영어 단어만 외우고 실생활에 사용하지 못하는 것과 마찬가지 었죠..

 

이번에는 문법을 익힌 후 유튜브 영상들을 참고하면서 실습을 진행했습니다. 반복해서 여러 유형 실습해보면 제 것이 될 것이라는 믿음은 학창 시절 공부하면서 확인을 했고 이번에도 똑같이 적용해보고 있습니다.

 

실습 유튜브 영상은 'Dev Ed'라는 유투버의 재생목록에 있는 Javascript Animation Tutorials입니다. 사이트에 들어갔을 때 특정 버튼을 누르면 버튼이 변하면서 무언가 동작하거나 창이 나오거나 이러한 애니메이션을 제작하는 과정을 모아놓은 재생목록입니다. 실제로 사용할 일도 많아 보이네요 ㅎㅎ

 

오늘 진행한 영상은 SVG Morphing Animation with Javascript Tutorial입니다.

영상 주된 내용은 버튼을 누르면 애니메이션이 동작하면서 다른 화면으로 전환되는 내용입니다.

 

내용은 간단하더라고요 HTML에 원하는 도형을 SVG 포맷으로 붙여놓고 querySelector로 불러와서 작업하면 됩니다. 위 내용 기반으로 영상 속과는 다른 애니메이션을 진행했습니다.

 

우선 script scr에 CDNjs에서 불러온 animemin.js 사이트 링크를 걸어 줍니다. 이 과정으로 anime.js의 함수를 사용할 수 있습니다. 그 후 querySelector로 불러온 SVG에 click event를 부여하여 click 하면 anime.timeline()이 실행되게 하고 원하는 애니메이션을 anime.js사이트에서 불러와 사용하면 됩니다. 

 

위 영상과 다른 애니메이션으로 실습한 것을 보여드리면 우선 SVG 그림을 갖고 옵니다. 저는 삼각형을 갖고 왔습니다. 그림은 figma라는 사이트에서 쉽게 그려서 SVG 포맷으로 갖고 올 수 있습니다.

 

Ani.addEventListener('click',()=>{

    const timeline = anime.timeline({

        duration:500,

        easing:'easeInOutQuad'

    })

 

    timeline.add({

        targets: ".Tri",

        translateX: toggle ? 0 : 250,

        scale: toggle ? 1 : 0.5,

        ratate: toggle ? 0 : '1turn'

    }).add({

        targets:"section",

        backgroundColor: toggle ? 'rgb(199,199,199)' : 'rgb(22,22,22)'

    })

    if(!toggle){

        toggle=true;

    }else{

        toggle=false;

    }    

})

 

위 내용처럼 진행하면 움직이면서 사이즈가 작아지는 삼각형 애니메이션을 만들 수 있습니다.

Javascript 는 다른 언어보다 쉽고 재미있는 것 같네요 ㅎㅎ 실습 내용 계속해서 업데이트하겠습니다!

 

더 많은 정보와 리뷰를 원하시면 여기로!

모바일은 여기로!