jindo.m.KeyFrame

KeyFrame

CSS의 KeyFrame와 비슷한 기능으로 CSS와 달리 JS로 설정하고 실행할 수 있다. 주로 이벤트 기반의 애니메이션에서 많이 사용한다.

method

• frame : 인자로 넣은 진행값에 맞는 값으로 각 객체에 속성을 지정한다.
• get : 인자로 넣은 진행값인 경우 각 객체에 지정되어야 할 속성 값을 얻는다.
• set : 특정 진행값의 상황에서의 각 객체가 가져야 할 속성 값을 지정한다.
• preprocess : get, frame 메서드를 빠르게 사용할 수 있도록 set 으로 지정한 속성을 전처리한다.

event

• proprocessEnd : Preprocess 작업이 완료되었을때 발생하는 이벤트

이 중 preprocess, proprocessEnd의 경우는 필요 없기 때문에 비교 대상에서 제외한다.

비교 라이브러리

WebAnimation

Frame별로 작성할 수 있는 라이브러리는 없으며 대체한다면 WebAnimation의 Animation객체를 사용하면 비슷하게 구현할 수 있다. 일반적인 Animation객체를 사용하면 엘리먼트를 아래와 같이 쉽게 Animation을 할 수 있다.

method

• frame : 인자로 넣은 진행값에 맞는 값으로 각 객체에 속성을 지정한다.
• get : 인자로 넣은 진행값인 경우 각 객체에 지정되어야 할 속성 값을 얻는다.
• set : 특정 진행값의 상황에서의 각 객체가 가져야 할 속성 값을 지정한다.

예제

Keyframe 링크

var keyframe = new jindo.Keyframe();

keyframe.set(0, [ el, { '@left' : '0px' } ]);
keyframe.set(100, [ el, { '@left' : '100px' } ]);
keyframe.preprocess(false);

LOG(keyframe.get(70)); // 결과 : [ el, { '@left' : '150px '} ]

특징으로는 preprocess 메서드가 있어 성능을 위해 데이터 구조를 만들 수 있다. 이 메서드를 호출하면 proprocessEnd로 이벤트를 받을 수 있으며 이후에 작업을 시작하면 된다.

WebAnimation 링크

// 3초간 left를 100px에서 200px로 이동.
var effect = new KeyframeEffect(target, [ {'left':'100px'}, {'left':'200px'} ], 3);

KeyframeEffectn에 TimingInput을 사용하면 KeyFrame와 같은 방식으로 사용할 수 도 있다. 아래 예제는 위의 KeyFrame의 예제를 KeyframeEffect으로 변경한 예제이다.

// target 을 0px 부터 100px 사이의 70% 시점으로 변화시킴
 
var effect = new KeyframeEffect(target, [ {'left':'0px'}, {'left':'100px'} ], {
    iterationStart : 0.7,
    iteration : 0,
    fill : 'both' 
});
document.timeline.play(effect);

WebAnimation의 경우는 preprocess라는 과정이 없기 때문에 proprocessEnd도 없다. 다만, 아래와 같이 애니메이션과 관련한 이벤트가 존재한다.

start : 애니메이션이 시작 될 때 발생
iteration : 애니메이션이 진행 될 때 발생
end : 애니메이션이 종료 될 때 발생
cancel : 애니메이션이 취소 될 때 발생

이와 관련한 다른 기능들은 링크를 확인한다.