제29차 HTML5 KIG 회의

2014 Wish List

Browser/Web OS & W3C - close the gap with Native

Fast developing awesome features

• e.g. WebRTC, Web Components, EME, MSE, Web Audio, Crypto API, CSS Filter, masking, regions, exclusions, shapes, flexbox, …

ES6

• promise, …

Keep enhancing performance

• CG, GPU, Rendering, Loading Time(ServiceWorker),…

Dev. Tools

• Mobile support, port forwarding
• Performance profiler : Chrome tracing
• Loading Time profiler : WebPage Test
• HTML5 Cross Browser Polyfills
• A lot of video lectures from the Web

App/Servie development

• Game, Multimedia services, …

Mobile Browser Internal (Understanding Blink Rendering Engine)

HTML5 Animation, Tooling and Web Animations II

2014. Notable Web Specifications

1. Web Animations
2. Web Component
3. Service Worker

이미 4종의 규격이 존재

1. css animation
2. css transition
3. svg animation
4. requestAnimationFrame()

Issues

CSS Animation/Transition

• 조합, 시퀀싱, 병렬 처리의 이슈
• 제한적인 스크립트 조작성

SVG Animation

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

requestAnimationFrame()

• JavaScript!!
• Main Thread 사용!

Issues : CSS Animation/Transition

• Synchronous
• Sequencing
• Seeking, Pause, Reverse
• Blending for same prop
• 사랑해 마지 않는 'transform'의 경우가 대표적!
• Debugging을 할 수 없다.

Issues : SVG Animation

• SVG 애니메이션은 강력
• 그러나 옆집 아저씨

Issues : JavaScript

requestAimationFrame()은

• 업데이트를 위한 좋은 시점을 제공하는 방법이나
• main thread를 사용

JavaScript를 이용한 명령형 애니메이션은

• 보편성/활용성은 높으나
• CSS 스타일(특히 inline style)에 의한 Recalculation, Layouting,
  Repaint, ...
• SVC등과 같이 액세스 불가능한 기능도 존재

Web Animations

CSS 및 SVG 애니메이션을 위한 기반 모듈 제공

애니메이션 API

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

애니메이션 동기화 API

• Timeline
• Sequence

동적인 애니메이션 조작성

Related Spec

CSS3 Animation/Transitions

SVG Animations

Extra features

Timing group

• 애니메이션 동기화 및 제어

Speed Control

• 애니메이션의 일부 혹은 전체에 대한

Custom Effect API

• 웹 애니메이션의 진행에 대한 Callback

Iteration start

• 애니메이션의 반복 시간, 시작 시점 지정

Coverage

Web Animation 1.0

규격의 대상

• Abstraction Animation Model
• APIs

포함하지 않는 것

• CSS syntax & mapping
• SVT syntax & mapping

Web Animation 1.0 Spec

• Editor’s Draft
• Spec. Repository

Browser supports

Chrome

• Web Animcations Engine replaced CSS Animcation/Transition Engine.
• Dec., 2013, Shipped on Canary
• ~Feb., 2014, Shipped on Chrome Official version
• Web Animation API
• maybe 2Q or 3Q, 2014

Firefox, safair

• On radar

Interner Explorer

• ?

Polyfill & Demos

web-animations.js

Demo

Web Animations Model Overview

Timing Model

• 애니메이션에 관여된 시간을 제어

Animation Model

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

Hierachy of timing nodes

Hierachical Timing

Inherited Time vs. Local Time

Timing group

2 Types

하위 애니메이션에 대한 동기화

Sequence

• 순차적으로 재생
• Parallel
• 동시 재생

Timing group mixin

Controlling Iteration

CSS Animation과의 차이점

• iteration Duration = Iteration Count / Active Duration

iteration start

Custom Effect

Web Animation에 대한 타이밍 콜백 제공

• Web Animation에서 제공하지 않은 기능에 대한 연동 지점

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.display(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(...)
]);