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
- Web Animations
- Web Component
- Service Worker
이미 4종의 규격이 존재
- css animation
- css transition
- svg animation
- 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 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(...)
]);