'frame animation' 태그의 글 목록

'frame animation'에 해당되는 글 1건

2011.12.29 HTML5 프레임 애니메이션 저작 환경 현황 (2011년 12월 기준)

HTML5 프레임 애니메이션 저작 환경 현황 (2011년 12월 기준)

Dev 2011. 12. 29. 16:39

프레임 애니메이션이란 영화처럼 한 프레임 한 프레임의 움직임으로 표현하는 애니메이션이다 (한땀 한땀...). 쉽게 말해 플래시 애니메이션을 말한다. "Flash 대 HTML5" 논쟁에서 시작, HTML5가 대중의 관심을 듬뿍 흡입한 상황이지만, 과연 현실이 HTML5로 플래시를 대체할 수 있는 상황인지 궁금했다.

요약
* HTML5의 SVG와 CSS3 기술로 프레임 애니메이션을 구현할 수 있음
- SVG : Scalable Vector Graphic. 진작부터 존재했던 플래시의 대안 기술. HTML5의 일부로 포함됨.
- HTML + CSS3 : CSS3에 frame 단위 애니메이션 효과에 대한 정의가 포함됨.
* Sencha Animator라는 CSS3 기반 공개 컨텐츠 저작툴이 존재함
* Adobe에서 Edge라는 CSS3 기반 상용 컨텐츠 저작툴을 발표함 (현재 preview 상태. '12년 정식 버전 출시 예정)
* 프레임 애니메이션을 구현할 수 있는 요소 기술은 존재하나, 본격적인 컨텐츠를 저작할 수 있는 상용 저작툴이 미흡한 상황임
* SVG와 CSS3 Animation 기능에 대한 브라우저의 지원이 미흡함 (특히 안드로이드 모바일 브라우저)

(출처: http://caniuse.com )

Reference
* [HTML5 강좌] 19. SVG
- SVG로 프레임 애니메이션 저작이 가능하다
* Sencha Animator - HTML5, CSS3 애니메이션 저작 도구
- CSS3로 프레임 애니메이션 저작이 가능하다
* Adobe, HTML5 저작 도구 Edge 공개 (2011-08)
- Adobe Edge가 HTML/CSS 기반 애니메이션 저작 기능을 제공한다
* Why has Edge gone with div-based animation over canvas SVG? (2011-08)
- Edge 개발시 Canvas와 SVG 사용을 고려했으나 성능상의 문제로 채택하지 않았다
- iOS4에서 Canvas와 SVG 성능이 미흡했다 (약간 자의적 판단...)
- Edge는 현재 preview 버전이다. 정식 버전 출시시 달라질 수 있다
* [RIA] 스마트한 RIA 구현을 위한 몇 가지 팁 (2011-11)
- Adobe Edge는 내년('12) 정식 버전 출시 예정이다

(이상)