본문 바로가기
트렌드 이슈 · 토픽

마우스 드래그로 애니메이션을 만들 수 있는「Animatize」

by 두우우부 2022. 1. 15.
반응형

 

디지털로 애니메이션을 만들려면 Adobe After Effects와 같은 소프트웨어를 사용해야 합니다. 그러나 이러한 소프트웨어는 작업이 복잡하기 때문에 누구나 쉽게 사용할 수 있는 것은 아닙니다. 그런 문제를 해결하고 누구나 쉽게 브라우저에서 애니메이션을 만들 수 있는 "Animatize"를 엔지니어 David Miranda 씨가 공개했습니다.

Animatize - animations the easy way
https://animatize.com/


우선 샘플을 보고 애니메이션을 만듭니다. 방법은 간단하며, "Try it out!" 부분에 있는 하늘색 배 아이콘을 검은색 배경 위에서 움직일 뿐.

 

 


화면 상단에서 배를 움직이면 하단의 더 큰 이미지에서 애니메이션으로 만들어집니다.

 


작성한 애니메이션은 아래에 있는 「generate code」를 클릭해 「copy code」를 클릭하면, 웹사이트에 삽입 가능한 코드로 출력됩니다.

 


Animatize에서는 준비된 이미지뿐만이 아니라, 아무 이미지나 애니메이션으로 만드는 것도 가능합니다. 자신의 애니메이션은 페이지 하단의 "Make your own animation" 부분에서 만듭니다. 「upload a background」 부분에 애니메이션의 배경이 될 이미지, 「upload a character」 부분에 움직이고 싶은 이미지를 업로드하면…

 

 

마우스의 드래그로 캐릭터를 움직일 필요가 있기 때문에 섬세한 움직임을 재현할 수는 없습니다만, 문자 그대로 「간단한 애니메이션을 간단하게 작성」할 수 있습니다. 하지만 삽입 코드가 너무 길어 페이지를 로드하는데 시간이 오래 걸리는 경우도 있습니다.

반응형