Web Animations 1.0 Overview

KIG 29th

Web Animations 1.0
Chang W. Doh
DaVinci S/W Lab.

2014, Notable Web Specifications
1. Web Component
2. Service Worker
3. Web Animations

Before talking about
Web Animations

We know...
●

이미 4종의 규격이 존재
○
○
○
○

CSS Animation
CSS Transition
SVG Animation
requestAnimationFrame()

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

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

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

Issues: CSS Animation/Transition
● Constraints
○
○
○
○

Synchronous
Sequencing
Seeking, Pause, Reverse
Blending for same prop.
■ 사랑해 마지않는 ‘transform’의 경우가 대표적!
○ Debugging :(

Issues: SVG Animation
● SVG 애니메이션은 강력! :)
○ 그러나, 옆집 아저씨!! :(
○ 웹 컨텐츠 =
■ SVG가 적고(혹은 아예 없거나)
■ 다른 요소들이 주가 됨
○ (Only) SVG Animation

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

● JavaScript를 이용한 명령형 애니메이션은
○ 보편성/활용성은 높으나
■ CSS 스타일(특히 inline style)에 의한
Recalculation, Layouting, Repaint, …
■ SVG 등과 같이 액세스 불가능한 기능도 존재

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
○ 애니메이션의 반복 시간, 시작 시점 지정

Web Animations 1.0
● 규격의 대상
○ Abstraction
Animation Model
○ APIs

● 포함하지 않는 것
○
○

CSS syntax & mapping
SVG syntax & mapping

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/

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

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 Fraction

interation,

// Iteration Index

target,
prevTime
)
{
/* do stuff */
}

// Target Element
// Previous Time Fraction

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
var parGroup = new ParGroup([new Animation(...), new Animation(...)]);
var seqGroup = new SeqGroup([new Animation(...), new Animation(...)]);

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

Player
● Full-controller of animation
// starting animation & getting player
var player = document.timeline.play(myAnimation);
// prop. example 2x speed up!
player.playbackRate = 2;
// animation control
player.cancel();
player.finish();
player.play();
player.pause();
player.reverse();

Web Animations 1.0 Overview

Recommended

Recommended

More Related Content

Similar to Web Animations 1.0 Overview

Similar to Web Animations 1.0 Overview (20)

More from Chang W. Doh

More from Chang W. Doh (20)

Web Animations 1.0 Overview