RG-Destination

이것은 속성으로 지정한 위치에서 dom원래 위치로 애니메이션을 만들어주는 역할을 합니다.
jQuery 플러그인으로 복수의 엘리먼트들을 애니메이션을 만들어주는 역할을 합니다.
특정 이벤트로 호출되면 옵션으로 만든 애니메이션으로 움직입니다.

큐(애니메이션될 엘리먼트)의 특징은 속성이 들어있는 엘리먼트라면 애니메이션 작동을 합니다.

아이디어

• index속성을 넣어서 애니메이션되는 순서를 지정할 수 있게 합니다. 전부 없으면 엘리먼트 출력순서대로…
• css3 지원하는지에 대한 체크 필요

엘리먼트 구조

• 초기화 엘리먼트 (container)
• 엘리먼트 (queue)
• contents

동작 프로세스

1. 초기화
   엘리먼트를 큐로 사용할건지에 대한 결정합니다.
   큐로 될 엘리먼트들을 배열에 담습니다.
   큐의 속성들을 파악해서 엘리먼트가 담긴 배열에 같이 속성을 집어넣습니다.
   큐 엘리먼트 속성에 시작 속성 위치로 이동해둡니다.
2. 시작
   특정 메서드로 호출하여 애니메이션 실행합니다.
3. 애니메이션 중…
   따로 딜레이와 속도 속성값에 영향을 받습니다.
   큐 엘리먼트 도착할때까지 애니메이션을 합니다.
   큐의 딜레이 속성은 특정 큐에 딜레이타임을 따로 설정하여 다른 딜레이를 만들 수 있습니다.
4. 종료
   하나의 큐가 애니메이션이 완료되면 완료 콜백함수가 나오며(요청 할 경우), 모든 애니메이션이 완료되면 완료 콜백함수가 실행됩니다.(요청 할 경우)

애니메이션 타입

• opacity
• position
• scale

컨테이너 속성

엘리먼트에 들어가는 속성과 스크립트 초기화에 대한 속성의 차이점은 프리픽스가 들어가는지에 대한 차이밖에 없습니다.
엘리먼트에 들어가는 속성이라면 “rgd-“프리픽스가 들어갑니다.

• delay : 모든 큐에대한 딜레이값 (값이 10이면 el1:10, el2:20, el:30, el:40...)
• speed : 모든 큐에대한 애니메이션 속도

큐 속성

각자 큐에대한 속성

<div rgd-delay=“3000” rgd-opacity=“0”></div>

• id : 구분 값
• delay : 딜레이 타임
• speed : 애니메이션 속도
• opacity : 투명도
• posX : 좌표 x 위치값
• posY : 좌표 y 위치값
• width : 가로사이즈
• height : 세로사이즈

html DOM

<div id=“target">
  <div class=“item1” rgd-{method}=“{act}">title</div>
  <div class=“item2” rgd-{method}=“{act}">img</div>
  <div class=“item2" rgd-{method}=“{act}”>text</div>
</div>

스크립트 초기화와 메서드 실행

// init
var rgd1 = $(‘#rgd1’).rgDestination({
  delay : 3000,
  speed : 400,
  complete : function() { console.log(‘complete everyone'); },
  queue : {
    item1 : {
      delay : 3000,
      speed : 400,
      opacity : 0,
      posX : '-999px',
      posY : ‘-999px’,
      width : ‘500px’,
      height : ‘500px’,
      complete : function() { console.log(‘complete queue’); }
    }
  }
});

// play
rgd1.play();

// replay
rgd1.play();

// stop
rgd1.pause();

// Resume
rgd1.resume();