올해 초 Chrome 36에서는 광범위한 웹 애니메이션 사양의 일환으로 element.animate 메서드를 출시했습니다. 이를 통해 개발자는 효율적인 네이티브 애니메이션을 명령형으로 작성할 수 있으며, 가장 적합한 접근 방식으로 애니메이션과 전환을 빌드할 수 있습니다.
다음은 화면 전체에 구름 애니메이션을 적용하고 완료 시 콜백을 사용하는 방법을 간단히 설명한 내용입니다.
var player = cloud.animate([
{transform: 'translateX(' + start + 'px)'},
{transform: 'translateX(' + end + 'px)'}
], 5000);
player.onfinish = function() {
console.info('Cloud moved across the screen!');
startRaining(cloud);
};
이 방법은 매우 쉽고 필수적으로 애니메이션이나 전환을 빌드할 때 도구 상자의 일부로 고려할 가치가 있습니다. 그러나 Chrome 39에서는 element.animate에서 반환된 AnimationPlayer 객체에 재생 컨트롤 기능이 추가되었습니다. 이전에는 애니메이션이 생성된 후 cancel()를 호출하거나 finish 이벤트를 리슨할 수만 있었습니다.
이러한 재생 추가 기능을 통해 웹 애니메이션이 할 수 있는 작업의 가능성을 열 수 있습니다.즉, 전환에 관해 규정하는 대신 애니메이션을 범용 도구로 전환할 수 있습니다. '고정' 또는 사전 정의된 애니메이션
일시중지, 되감기 또는 재생 속도 변경
먼저 구름을 클릭하면 애니메이션이 일시중지되도록 위 예시를 업데이트해 보겠습니다.
cloud.addEventListener('mousedown', function() {
player.pause();
});
playbackRate 속성을 수정할 수도 있습니다.
function changeWindSpeed() {
player.playbackRate *= (Math.random() * 2.0);
}
reverse() 메서드를 호출할 수도 있습니다. 이는 일반적으로 현재 playbackRate를 반전하는 것(-1로 곱함)과 같습니다. 하지만 몇 가지 특수한 사례가 있습니다.
reverse()메서드로 인한 변경으로 인해 실행 중인 애니메이션이 효과적으로 종료되는 경우currentTime도 반전됩니다.예를 들어 새 애니메이션이 역순으로 재생되면 전체 애니메이션이 역순으로 재생됩니다.플레이어가 일시중지되면 애니메이션이 재생됩니다.
플레이어 스크러빙
이제 AnimationPlayer를 사용하면 애니메이션이 실행되는 동안 currentTime를 수정할 수 있습니다. 일반적으로 이 값은 시간이 지남에 따라 증가하거나 (playbackRate가 음수인 경우 감소) 이렇게 하면 사용자 상호작용을 통해 애니메이션의 위치를 외부에서 제어할 수 있습니다. 이를 흔히 스크러빙이라고 합니다.
예를 들어 HTML 페이지가 하늘을 나타내고 드래그 동작으로 현재 재생 중인 구름의 위치를 변경하려면 문서에 핸들러를 추가하면 됩니다.
var startEvent, startEventTime;
document.addEventListener('touchstart', function(event) {
startEvent = event;
startEventTime = players.currentTime;
player.pause();
});
document.addEventListener('touchmove', function(event) {
if (!startEvent) return;
var delta = startEvent.touches[0].screenX -
event.changedTouches[0].screenX;
player.currentTime = startEventTime + delta;
});
문서 위로 드래그하면 원래 이벤트와의 거리를 반영하도록 currentTime가 변경됩니다. 동작이 끝날 때 애니메이션 재생을 재개할 수도 있습니다.
document.addEventListener('touchend', function(event) {
startEvent = null;
player.play();
});
페이지에서 마우스를 들어 올린 위치에 따라 되돌리기 동작과 결합할 수도 있습니다 (결합된 데모).
사용자 상호작용에 대한 응답으로 AnimationPlayer를 스크러빙하는 대신 currentTime를 사용하여 진행률이나 상태를 표시할 수도 있습니다(예: 다운로드 상태 표시).
여기서 유용성은 AnimationPlayer를 사용하면 값을 설정하고 기본 네이티브 구현에서 진행률 시각화를 처리할 수 있다는 점입니다. 다운로드 사례에서 애니메이션의 길이는 총 다운로드 크기로 설정하고 currentTime는 현재 다운로드된 크기로 설정할 수 있습니다 (데모).
UI 전환 및 동작
모바일 플랫폼은 오랫동안 드래그, 슬라이드, 플링 등의 일반적인 동작의 영역이었습니다. 이러한 동작에는 일반적으로 공통적인 테마가 있습니다. 목록 뷰의 '당겨 새로고침'이나 화면 왼쪽에서 펼쳐지는 사이드바와 같이 드래그 가능한 UI 구성요소입니다.
웹 애니메이션을 사용하면 데스크톱 또는 모바일에서 웹에서 유사한 효과를 매우 쉽게 재현할 수 있습니다. 예를 들어 currentTime를 제어하는 동작이 완료되면 다음과 같이 처리됩니다.
var steps = [ /* animation steps */ ];
var duration = 1000;
var player = target.animate(steps, duration);
player.pause();
configureStartMoveListeners(player);
var setpoints = [0, 500, 1000];
document.addEventListener('touchend', function(event) {
var srcTime = player.currentTime;
var dstTime = findNearest(setpoints, srcTime);
var driftDuration = dstTime - srcTime;
if (!driftDuration) {
runCallback(dstTime);
return;
}
var driftPlayer = target.animate(steps, {
duration: duration,
iterationStart: Math.min(srcTime, dstTime) / duration,
iterations: Math.abs(driftDuration) / duration,
playbackRate: Math.sign(driftDuration)
});
driftPlayer.onfinish = function() { runCallback(dstTime); };
player.currentTime = dstTime;
});
이렇게 하면 '드리프트'를 실행하는 추가 애니메이션이 생성됩니다. 이 애니메이션은 동작이 완료된 지점부터 잘 알려진 타겟까지 재생됩니다.
애니메이션은 생성 순서에 따라 우선순위가 지정되므로 이 경우 driftPlayer가 플레이어보다 우선합니다. driftPlayer가 완료되면 driftPlayer와 그 효과가 사라집니다. 하지만 최종 시간은 기본 플레이어의 currentTime와 일치하므로 UI는 일관되게 유지됩니다.
마지막으로, 새끼 고양이를 좋아한다면 이러한 동작을 보여주는 데모 웹 애플리케이션이 있습니다. 이 앱은 모바일 친화적이며 하위 호환성을 위해 폴리필을 사용하므로 휴대기기에 로드해 보세요.
Go forth and element.animate
element.animate 메서드는 간단한 애니메이션에 사용하거나 반환된 AnimationPlayer를 다른 방식으로 활용하는 등 지금 가장 멋진 메서드입니다.
이 두 가지 기능은 경량 폴리필을 통해 다른 최신 브라우저에서도 완전히 지원됩니다. 이 폴리필은 기능 감지도 실행하므로 브라우저 공급업체가 사양을 구현함에 따라 시간이 지남에 따라 이 기능이 더 빠르고 향상될 것입니다.
Web Animations 사양도 계속 발전할 것입니다. 출시 예정 기능을 사용해 보고 싶다면 더 자세한 폴리필인 web-animations-next에서도 사용할 수 있습니다.