올해 초, 더 광범위한 웹 애니메이션 사양의 일부로 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()를 호출하거나 종료 이벤트를 수신 대기만 할 수 있었습니다.
이러한 재생 추가 기능은 웹 애니메이션이 할 수 있는 일의 가능성을 열어줍니다.즉, 애니메이션을 일반적인 용도의 도구로 변환할 수 있습니다. 예를 들어 '고정'되거나 사전 정의된 애니메이션입니다.
일시중지, 되감기 또는 재생 속도 변경
먼저 구름을 클릭하면 애니메이션이 일시중지되도록 위의 예를 업데이트합니다.
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이 완료되면, 효과와 효과가 사라집니다. 그러나 최종 시간은 기본 플레이어의 currentTime과 일치하므로 UI가 일관되게 유지됩니다.
마지막으로 고양이를 좋아한다면 이러한 동작을 보여주는 데모 웹 애플리케이션도 있습니다. 모바일 친화적이고 이전 버전과의 호환성을 위해 폴리필을 사용하므로 휴대기기에 로드해 보세요!
이동 및element.animate
element.animate 메서드는 간단한 애니메이션에 사용하든 반환된 AnimationPlayer를 다른 방식으로 활용하든 지금 바로 완벽하게 작동합니다.
이 두 기능은 가벼운 폴리필을 통해 다른 최신 브라우저에서도 완벽하게 지원됩니다. 이 폴리필은 기능 감지도 수행하므로 브라우저 공급업체가 사양을 구현하므로 이 기능은 시간이 지남에 따라 더욱 빨라지고 개선됩니다.
웹 애니메이션 사양도 계속해서 개선될 예정입니다. 출시 예정인 기능을 사용해 보고 싶다면 보다 자세한 폴리필: web-animations-next에서 확인하세요.