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 컨텐츠에 범용적으로 적...
Issues: CSS Animation/Transition
● Constraints
○
○
○
○

Synchronous
Sequencing
Seeking, Pause, Reverse
Blending for same p...
Issues: SVG Animation
● SVG 애니메이션은 강력! :)
○ 그러나, 옆집 아저씨!! :(
○ 웹 컨텐츠 =
■ SVG가 적고(혹은 아예 없거나)
■ 다른 요소들이 주가 됨
○ (Only) SVG An...
Issues: JavaScript
● requestAnimationFrame()은
○ 업데이트를 위한 좋은 시점을 제공하는 방법이나
○ main thread를 사용

● JavaScript를 이용한 명령형 애니메이션은
...
Introducing Web Animations
Web Animations
● CSS 및 SVG 애니메이션을 위한 기반 모델 제공
● 애니메이션 API
○ Declarative처럼 그러나 API!!!
○ 하드웨어 가속 친화적!
● 애니메이션 동기화 API
○ Time...
Related Spec.
● CSS3 Animation/Transition
● SVG Animation
Extra features
● Timing group
○ 애니메이션 동기화 및 제어

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

● Custom Effect API
○...
Coverage
Web Animations 1.0
● 규격의 대상
○ Abstraction
Animation Model
○ APIs

● 포함하지 않는 것
○
○

CSS syntax & mapping
SVG syntax & mappi...
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 Canar...
Polyfill & Demos
● web-animations.js
○ github.com/web-animations/web-animations-js

● Web Animations demo
○ maxwelliott.or...
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 (
...
APIs()
Creating Animation
● new Animation( target, props, time )
<div class="pulse" style="width:150px;">Hello world!</div>
<scri...
Motion path
● Creating Path Animation
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<path id=path d="M 100...
Timing Groups
Creation (sequence/parallel) group
var parGroup = new ParGroup([new Animation(...), new Animation(...)]);
va...
Player
● Full-controller of animation
// starting animation & getting player
var player = document.timeline.play(myAnimati...
Thank you!
Upcoming SlideShare
Loading in …5
×

Web Animations 1.0 Overview

1,734 views

Published on

KIG 29차 발표 자료 - Web Animations 1.0 소개

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,734
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
28
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Web Animations 1.0 Overview

  1. 1. KIG 29th Web Animations 1.0 Chang W. Doh DaVinci S/W Lab.
  2. 2. 2014, Notable Web Specifications 1. Web Component 2. Service Worker 3. Web Animations
  3. 3. Before talking about Web Animations
  4. 4. We know... ● 이미 4종의 규격이 존재 ○ ○ ○ ○ CSS Animation CSS Transition SVG Animation requestAnimationFrame()
  5. 5. Issues ● CSS Animation/Transition ○ 조합, 시퀀싱, 병렬 처리의 이슈 ○ 제한적인 스크립트 조작성 ● SVG Animation ○ 고성능 요구 & 복잡성 ○ HTML 컨텐츠에 범용적으로 적용 불가 ● requestAnimationFrame() ○ JavaScript!! ○ Main Thread 사용!
  6. 6. Issues: CSS Animation/Transition ● Constraints ○ ○ ○ ○ Synchronous Sequencing Seeking, Pause, Reverse Blending for same prop. ■ 사랑해 마지않는 ‘transform’의 경우가 대표적! ○ Debugging :(
  7. 7. Issues: SVG Animation ● SVG 애니메이션은 강력! :) ○ 그러나, 옆집 아저씨!! :( ○ 웹 컨텐츠 = ■ SVG가 적고(혹은 아예 없거나) ■ 다른 요소들이 주가 됨 ○ (Only) SVG Animation
  8. 8. Issues: JavaScript ● requestAnimationFrame()은 ○ 업데이트를 위한 좋은 시점을 제공하는 방법이나 ○ main thread를 사용 ● JavaScript를 이용한 명령형 애니메이션은 ○ 보편성/활용성은 높으나 ■ CSS 스타일(특히 inline style)에 의한 Recalculation, Layouting, Repaint, … ■ SVG 등과 같이 액세스 불가능한 기능도 존재
  9. 9. Introducing Web Animations
  10. 10. Web Animations ● CSS 및 SVG 애니메이션을 위한 기반 모델 제공 ● 애니메이션 API ○ Declarative처럼 그러나 API!!! ○ 하드웨어 가속 친화적! ● 애니메이션 동기화 API ○ Timeline ○ Sequence ● 동적인 애니메이션 조작성
  11. 11. Related Spec. ● CSS3 Animation/Transition ● SVG Animation
  12. 12. Extra features ● Timing group ○ 애니메이션 동기화 및 제어 ● Speed Control ○ 애니메이션의 일부 혹은 전체에 대한 Playback rate ● Custom Effect API ○ 웹 애니메이션의 진행에 대한 Callback ● Iteration start ○ 애니메이션의 반복 시간, 시작 시점 지정
  13. 13. Coverage
  14. 14. Web Animations 1.0 ● 규격의 대상 ○ Abstraction Animation Model ○ APIs ● 포함하지 않는 것 ○ ○ CSS syntax & mapping SVG syntax & mapping
  15. 15. Status
  16. 16. Web Animations 1.0 Spec. ● Editor’s Draft ● Spec. Repository ○ http://dev.w3.org/fxtf/web-animations
  17. 17. 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 ○ ?
  18. 18. Polyfill & Demos ● web-animations.js ○ github.com/web-animations/web-animations-js ● Web Animations demo ○ maxwelliott.org/web-animations-js/demos/
  19. 19. Inside of spec.
  20. 20. Web Animations Model Overview ● Timing Model ○ 애니메이션에 관여된 시간을 제어 ● Animation Model ○ Timing Model에서 전달된 시간값을 기반으로 애니메 이션 속성에 대한 실제 값을 생성
  21. 21. Hierachy of timing nodes
  22. 22. Hierachical Timing ● Inherited Time vs. Local Time ○ Timing Node는 상위 노드로부터 시간값을 상속 ■ 상대적인 시간값
  23. 23. Timing group ● 2 Types ○ 하위 애니메이션에 대한 동기화 ○ Sequence ■ 순차적으로 재생 ○ Parallel ■ 동시 재생
  24. 24. Timing group mixin Sequence Parallel group
  25. 25. Controlling Iteration ● CSS Animation과의 차이점 ○ iteration Duration = Active Duration / Iteration Count
  26. 26. Iteration start ● Iteration 시의 애니메이션 시작점 지정
  27. 27. 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
  28. 28. APIs()
  29. 29. 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>
  30. 30. 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>
  31. 31. 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(...) ]);
  32. 32. 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();
  33. 33. Thank you!

×