마카로닉스

1773 No

Vue.js TweenMax 테스트

2021-11-09 03:40:30 By 라이트 0 233 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>    
    <title>TweenMax</title>  
    <style>
        ul { display:flex; justify-content:center } li.tweenbox { display:flex; justify-content:center; align-items:center; width:100px; height:100px; margin:20px; background:lightcoral; border-radius:10px; color:#fff; list-style:none }
    </style>  
</head>
<body>
    <h2>TweenMax</h2>
  

    
    <div id="app">
        <p>값은 {{animeNumber}} 입니다.</p>
        <input v-model.number="myNumber" type="number">

        <br>
        <ul> 
            <li class="tweenbox">1</li>
            <li class="tweenbox">2</li>
            <li class="tweenbox">3</li>
            <li class="tweenbox">4</li>
            <li class="tweenbox">5</li>
        </ul>
    </div>


    <script>
         new Vue({
            el:"#app",
            data:{
               myNumber:0,
               tweenedNumber:0
            },

            watch :{
                myNumber(){
                    console.log(this.tweenedNumber);
                    //data 의 tweendedNumber 프로터티를 1초에 myNumer 까지 증가시킨다.
                    TweenMax.to(this.$data, 1, {tweenedNumber:this.myNumber});

                    var timeLine = new TimelineMax(); 
                    timeLine.to('.tweenbox', 1, { backgroundColor: '#ddd' }) 
                    .to('.tweenbox', 1, { backgroundColor: 'cyan' }) 
                    .to('.tweenbox', 1, { backgroundColor: '#ccc' });

                    /**
                     * - onComplete : Function - 애니메이션이 완료될 때 호출되어야하는 함수
                        - onCompleteParams : Array - 함수를 전달할 매개 변수의 배열
                        ex) onCompleteParams: [element, "param2"]
                        매개 변수중 하나에서 트윈맥스 자체 참조하려면 {self}로 쓰면 됨.
                        - onCompleteAll : Function - 전체 트윈 시퀀스가 완료될 때 호출되어야하는 함수
                        - onCompleteAllParams : Array - 메서드를 전달할 매개 변수의 배열
                     */

                    TweenMax.staggerFrom(".tweenbox", 1, {
                        ease:Back.easeOut,
                        opacity: 0,
                        y: 200,
                        delay: 0.5,
                        onCompleteParams:["{self}"]
                        }, 0.2);

                   
                }
            },

            computed:{
                //tweenedNumber 값이 변경되는 변화중 애니메이션을 산출한다.
                animeNumber(){
                    return this.tweenedNumber.toFixed(0);
                }
            }
         });      
    </script>

  
</body>
</html>