이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome 39의 웹 애니메이션 재생 컨트롤

Sam Thorogood

올해 초 Chrome 36에서는 더 광범위한 웹 애니메이션 사양의 일부로 요소.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 메서드는 간단한 애니메이션에 사용하든 반환된 AnimationPlayer를 다른 방식으로 활용하든 지금 현재 완전히 안정적입니다.

이 두 기능은 다른 최신 브라우저에서도 경량 폴리필을 통해 완벽하게 지원됩니다. 이 폴리필은 또한 기능 감지를 수행하므로, 브라우저 공급업체가 사양을 구현하면 이 기능은 시간이 지남에 따라 더욱 빨라지고 개선됩니다.

웹 애니메이션 사양도 계속 발전할 예정입니다. 출시 예정 기능을 사용해 보고 싶다면 지금 더 자세한 폴리필: web-animations-next에서 확인할 수도 있습니다.