anime.js : CSS 애니메이션을 JS 에서

< 공식 문서 >

 

animejs.com/documentation/

anime.js

www.npmjs.com/package/animejs

npm i animejs

github.com/juliangarnier/anime

---

< 용도 >

 

anime.js 는 CSS 의 여러 속성을 JavaScript 안에서 쉽게 animation 하게 해주는 라이브러리다.

굉장히 직관적으로 사용하기 쉽다.

---

< 예제 코드 >

<template>
    
    <button @mousedown="mousedown">button</button>
    <div id="container"></div>

</template>

<script>

    import anime from 'animejs/lib/anime.es.js'

    export default {

        setup() {

            function mousedown() {

                anime({
                    
                    /* anime 할 녀석 id 또는 클래스명 */
                    targets         : '#container', 

                    /* anime 할 CSS 속성들 */
                    scale           : 0.5,
                    rotate          : '1turn',
                    backgroundColor : 'rgb(255, 100, 0)',

                    /* 시간 설정 */
                    delay           : 100,          // 실행전 0.1초 기다려~!
                    duration        : 1000,         // 1초 동안 실행

                    /* easing type */
                    // https://animejs.com/documentation/#linearEasing
                    easing          : 'spring', // 

                    /* 방향 */
                    direction       : 'alternate',  // 갔다가 제자리로.

                    /* lifecycle callback */
                    begin       : (anim) => { console.log(anim.began)},     // true
                    change      : ()     => { console.log('change!')},
                    update      : (anim) => { console.log(anim.progress)},  // 0 ~ 100 진행 상황
                    complete    : (anim) => { console.log(anim.completed)}  // true

                });

            }

            return { mousedown }        

        }
        
    }

</script>

<style scoped>

    #container {

        width               : 200px;
        height              : 200px;
        background-color    : rgb(0, 100, 200);

    }

</style>

---

< 유지 보수 >

 

2016년 중순에 출시한뒤,

2020년 10월에 마지막으로 업데이트되었다.

거의 5년을 유지보수하고있으니 믿고 사용해도 될듯하다.