search

Animation 객체

저작툴에서 제작된 객체의 속성이 변하면 자동으로 transition 애니메이션이 동작합니다. 각각에 변경된 속성들은 동시에 애니메이션이 동작하며 enable() 메서드와 config() 메서드를 통해서 애니메이션 동작을 설정할 수 있습니다.

애니메이션을 순차적으로 적용하고 싶은 경우에는 sequence() 메서드를 사용합니다. 이 메서드는 순차적인 애니메이션 실행을 설정할 수있는 객체를 반환합니다.

sequence() 메서드에 의해 애니메이션이 진행되는 동안에는 enable(), config() 메서드를 사용할 수 없습니다. 또한 setDrag() 메서드를 통해 설정된 드래그 기능도 애니메이션이 완료될때까지 동작하지 않습니다.

file-download
2MB
에니메이션 API 예제.jik
arrow-up-right-from-squareOpen
예제는 직지 버전 3.1.30 이상에서 동작합니다.

hashtag
메서드

  • enable (value: Boolean): void

    group 또는 element가 transition을 사용할지 여부를 결정합니다. false 값인 경우 애니메이션 없이 속성 값이 바로 적용되어 표시됩니다.

    • value: Boolean 설정(true), 해지(false)

      // group객체의 transition을 사용하지 않음
group.animation.enable(false);

// Getter
var enable = group.animation.enable();
// group에 속한 element들중 하나라도 enable 값이 false이면 false 값을 반환합니다.

  • config (transition: Object): void

    transition 속성값을 설정합니다.

    • transition : Object

      • duration: Number transition이 진행 완료되는 시간(second 단위)

      • timeFunction: String transition 효과를 나타내는 speed 곡선 함수arrow-up-right 이름

      • delay: Number transition 효과 시작전 시간 지연 설정값(second 단위)

      var transition = {
  duration: 1,
  timeFunction: 'ease',
  delay: 0
}
group.animation.config(transition);

  • sequence (name: String): Object

    순차적인 애니메이션을 정의할 수 있는 객체를 반환합니다.

    • name: String 정의될 애니메이션의 이름을 지정합니다. (생략 가능)

    • 반환되는 객체에 대해서는 아래 sequence 객체 내용 참고

      group.animation.sequence()
  .next({x: 30})
  .play(function(){
    // transition 완료
  })

    sequence 메서드 반환객체

    • next (style: Object, transition: Object): sequence Object

      애니메이션 설정을 추가합니다.

      • style : Object element의 스타일 속성을 객체 형식으로 기술합니다.

      • transition : Object config() 메서드의 transition 파라메터를 참고하세요

        • duration: Number

        • timeFunction: String

        • delay: Number

        • enable: Boolean

        transition 옵션은 해당 구간에서만 적용됩니다. 이 값을 생략하면 config()에서 설정했던 값 또는 기본값이 다시 적용됩니다.

      // transition 설정
group.animation.config({
    duration: 1,
    timeFunction: 'ease',
    delay: 0
});
group.animation.sequence()
  .next({x: 300, y: 300})
  .next({x: 600, y: 300})
  .next({x: 600, y: 600})

  // 값 변동 없으므로 아래 두 next 메서드는 무시됨
  .next({x: 600, y: 600})
  .next({x: 600, y: 600})

  .next({x: 300, y: 600})
  .next({x: 300, y: 300});
  .play();
      // `transition`을 개별적으로 지정하고자 할때
group.animation.sequence()
  .next({x: 300, y: 300}, { duration: 0.3, timeFunction: 'linear', delay: delay})
  .next(x: 600, y: 300})
  .next({x: 600, y: 600})
  .next({x: 300, y: 600}, { duration: 2, timeFunction: 'ease', delay: delay })
  .next({x: 300, y: 300}, { duration: 1, timeFunction: 'linear', delay: delay});
  .play()

    • delay (second: Number): sequence Object

      다음 애니메이션 시작하기 전에 시간을 지연시킵니다.

      • second : Number

        지연 시간 (단위: 초)

      group.animation.sequence()
  .next({x: 300, y: 300})

  // 1 초 후 (600,300) 위치로 transition 됨
  .delay(1)

  .next({x: 600, y: 300})
  .play();

    • play (onComplete: Function, onLoop: Function): void

      sequence 객체에 정의된 애니메이션을 시작합니다.

      • onComplete : Function

        transition이 모두 완료되어 멈출때 호출됨

      • onLoop : Function

        loop가 설정되어 있다면 loop가 1번 완료 될때마다 호출됨

      group.animation.sequence()
  .next({x: 300, y: 300})
  .play(function(loop_counter){
      // 에니메이션 완료완
  });
  
// loop가 설정된 경우
seq.stop()
  // 5회만 반복
  .loop(5)
  .play(nulll, loop_counter){
      // loop_counter :  현재 몇번 반복 실행되고 있는지 횟수
  });

    • stop (): sequence Object

      실행중인 애니메이션을 중지합니다. 다시 play() 시키면 처음부터 다시 시작합니다.

      var seq = group.animation.sequence()
  .next({x: 100})
  .next({x: 200})
  .next({x: 300});

// 실행
seq.play();
...
// (200으로 이동 후) 멈춤
seq.stop();
...
// 다시 실행 : (100) 위치로 다시 이동하여 실행됨
seq.play();

// stop의 경우 리턴 값에 특별히 pipe 메서드가 제공되어
// 다른 animation으로 전환할 수 있습니다.
seq.stop()
  .pipe(function(){
    // 계속해서 다른 seq2 실행
    seq2.play();
  });

    • pause (): sequence Object

      실행중인 애니메이션을 일시 정지합니다. 다시 play() 시키면 멈춘 위치부터 시작합니다.

      var seq = group.animation.sequence()
  .next({x: 100})
  .next({x: 200})
  .next({x: 300});

  // 실행
  seq.play();
  ...
  // (200으로 이동 후) 일시 정지
  seq.pause();
  ...
  // 다시 실행 : (300) 위치로 이동됨
  seq.play();

    • loop (repeat): sequence Object

      애니메이션 반복 실행 횟수를 지정합니다.

      var seq = group.animation.sequence()
  .next({x: 100})
  .next({x: 200})
  .next({x: 300})

  // 무한반복
  .loop();
  .play();

  ...
seq.stop()
  // 5회만 반복
  .loop(5)
  .play();
      // callback 함수로 반복 실행 만들기
var seq = group.animation.sequence()
  .next({x: 100})
  .next({x: 200})
  .next({x: 300})
  //.loop();
  .play(onComplete);

function onComplete(repeat){
  // 무한반복
  seq.play(onComplete);
}

    • reverse (): sequence Object

      애니메이션을 역순으로 실행합니다.

      var seq = group.animation.sequence()
  .next({x: 100})
  .next({x: 200})
  .next({x: 300})
  .loop();
  .play(onComplete);

function onComplete(repeat){
  if(repeat%2 === 0){
    // 역방향 진행
    seq.reverse();
  }
}

    • clear (): void

      정의된 애니메이션을 메모리에서 모두 제거합니다. 더이상 사용되지 않는 애니메이션은 반드시 clear() 시켜줍니다.

      var seq = group.animation.sequence()
  ...
  .loop()
  .play();

// 애니메이션 실행됨
seq.stop().play();

// 실행 객체를 찾지 못해 실행할 수 없음
seq.clear()
seq.play();
Previous공통 APINextWindow API ($this)

Last updated