개요

갑자기 자바스크립트 애니메이션에 관심을 갖게 되었다. 별 이유는 아니고 블로그에 너무 정적인 컨텐츠가 있는 것 같아서 동적인 컨텐츠를 추가할 겸 그리고 배워두면 나중에 원하는 데이터를 더 화려하게? 보여줄 수 있을 것 같았다.

anime.js

anime.js image

anime.js는 애니메이션을 위한 경량 자바스크립트 라이브러리다. CSS, SVG, DOM 속성과 자바스크립트 객체에 적용이 가능하다.
정말 극한으로 다루면…

anime.js example

이런 것도 만들 수 있는 것 같다. (위는 사진이다)

anime.js 다운로드

두 가지 방법이 존재하는데 편한 방법을 택하면 된다.

npm

npm install animejs --save

manual download

Github에서 다운로드

anime.js 라이브러리 삽입

anime.min.js를 적당한 위치에 놓은 후 불러오면 된다.

<script src="/location/to/anime.min.js"></script>

anime.js 기능

anime.js에서 제공하는 기능은 정말 많은데 몇 가지 예시를 적어본다.
이 예시에서 사용한 코드는 다음과 같다.

  • css
.box {
    height: 80px;
    width: 80px;
    background-color: #fbc22c;
    margin: 13px;
}
  • html
<script src="/location/to/anime.min.js"></script>
<script>
    code...
</script>

이동

그 말대로 X축 또는 Y축으로 이동시킨다. 둘 다 이동 시킬 수 있다.

<script>
    anime({
            targets: ".box",
            translateX: "500px"
    });
</script>

속성 변경

속성을 변경할 수 있다. 예를 들면 radius를 변경할 수 있다.

<script>
    anime({
            targets: '.box',
            left: '240px',
            borderRadius: ['0%', '50%'],
            easing: 'easeInOutQuad'
    });
</script>


물론 색도 변경가능하고 크기도 변경 가능하다.

Reference