KIG 29th

Web Animations 1.0

Chang W. DohDaVinci S/W Lab.

1. Web Component2. Service Worker3. Web Animations

2014, Notable Web Specifications

Before talking aboutWeb Animations

We know...

● 이미 4종의 규격이 존재○ CSS Animation○ CSS Transition○ SVG Animation○ requestAnimationFrame()

Issues

● CSS Animation/Transition○ 조합, 시퀀싱, 병렬 처리의 이슈○ 제한적인 스크립트 조작성

● SVG Animation○ 고성능 요구 & 복잡성○ HTML 컨텐츠에 범용적으로 적용 불가

● requestAnimationFrame()○ JavaScript!!○ Main Thread 사용!

● Constraints○ Synchronous○ Sequencing○ Seeking, Pause, Reverse○ Blending for same prop.

■ 사랑해 마지않는 ‘transform’의 경우가 대표적!○ Debugging :(

Issues: CSS Animation/Transition

Issues: SVG Animation

● SVG 애니메이션은 강력! :)○ 그러나, 옆집 아저씨!! :(

○ 웹 컨텐츠 =■ SVG가 적고(혹은 아예 없거나)■ 다른 요소들이 주가 됨

○ (Only) SVG Animation

Issues: JavaScript

● requestAnimationFrame()은○ 업데이트를 위한 좋은 시점을 제공하는 방법이나○ main thread를 사용

● JavaScript를 이용한 명령형 애니메이션은○ 보편성/활용성은 높으나

■ CSS 스타일(특히 inline style)에 의한 Recalculation, Layouting, Repaint, …

■ SVG 등과 같이 액세스 불가능한 기능도 존재

Introducing Web Animations

Web Animations● CSS 및 SVG 애니메이션을 위한 기반 모델 제공● 애니메이션 API

○ Declarative처럼 그러나 API!!!○ 하드웨어 가속 친화적!

● 애니메이션 동기화 API○ Timeline○ Sequence

● 동적인 애니메이션 조작성

Related Spec.

● CSS3 Animation/Transition● SVG Animation

Extra features

● Timing group○ 애니메이션 동기화 및 제어

● Speed Control○ 애니메이션의 일부 혹은 전체에 대한 Playback rate

● Custom Effect API○ 웹 애니메이션의 진행에 대한 Callback

● Iteration start○ 애니메이션의 반복 시간, 시작 시점 지정

Coverage

Web Animations 1.0

● 규격의 대상○ Abstraction

Animation Model○ APIs

● 포함하지 않는 것○ CSS syntax & mapping○ SVG syntax & mapping

Status

Web Animations 1.0 Spec.

● Editor’s Draft● Spec. Repository

○ http://dev.w3.org/fxtf/web-animations

Browser supports

● Chrome○ Web Animations Engine replaced CSS

Animation/Transition Engine.■ Dec., 2013, Shipped on Canary■ ~Feb., 2014, Shipped on Chrome Official version

○ Web Animations API■ maybe 2Q or 3Q, 2014

● Firefox, Safari○ On radar

● Internet Explorer○ ?

Polyfill & Demos

● web-animations.js○ github.com/web-animations/web-animations-js

● Web Animations demo○ maxwelliott.org/web-animations-js/demos/

Inside of spec.

Web Animations Model Overview

● Timing Model○ 애니메이션에 관여된 시간을 제어

● Animation Model○ Timing Model에서 전달된 시간값을 기반으로 애니메이션 속성에 대한 실제 값을 생성

Hierachy of timing nodes

Hierachical Timing

● Inherited Time vs. Local Time○ Timing Node는 상위 노드로부터 시간값을 상속

■ 상대적인 시간값

Timing group

● 2 Types○ 하위 애니메이션에 대한 동기화

○ Sequence■ 순차적으로 재생

○ Parallel■ 동시 재생

Timing group mixin

Sequence

Parallel group

Controlling Iteration

● CSS Animation과의 차이점○ iteration Duration = Active Duration / Iteration Count

Iteration start

● Iteration 시의 애니메이션 시작점 지정

Custom Effect

● Web Animation에 대한 타이밍 콜백 제공○ Web Animation에서 제공하지 않는 기능에 대한 연동 지점■ Canvas, Video, Audio, ...

function (time, // Time Fractioninteration, // Iteration Indextarget, // Target ElementprevTime // Previous Time Fraction

){

/* do stuff */}

APIs()

Creating Animation

● new Animation( target, props, time )

<div class="pulse" style="width:150px;">Hello world!</div><script> var elem = document.querySelector('.pulse'); var player = document.timeline.play(new Animation(elem, [ {opacity: "0.5", transform: "scale(0.5)"}, {opacity: "1.0", transform: "scale(1)"} ], { direction: "alternate", duration: 0.5, iterations: Infinity }));</script>

Motion path

● Creating Path Animation

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <path id=path d="M 100,100 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"/> </defs></svg><script> var path = document.querySelector('#path'); var animFunc = new MotionPathEffect( path.pathSegList); var animation = new Animation(targetElement, animFunc, 2);</script>

Timing Groups

Creation (sequence/parallel) group

Nested groups

var parGroup = new ParGroup([new Animation(...), new Animation(...)]);var seqGroup = new SeqGroup([new Animation(...), new Animation(...)]);

var parGroup = new ParGroup([ new SeqGroup([ new Animation(...), new Animation(...), ]), new Animation(...)]);

Player

// starting animation & getting playervar player = document.timeline.play(myAnimation);

// prop. example 2x speed up!player.playbackRate = 2;

// animation controlplayer.cancel();player.finish();player.play();player.pause();player.reverse();

● Full-controller of animation

Thank you!