구글에서 발표한 Google Web Designer은 플래시없이 웹기반(html5)으로 애니메이션을 구현할수 있는 도구툴입니다.
Google Web Designer를 통해 쉽게 구현된 애니메이션을 html과 css를 바로 제작해주는것이 큰 장점입니다.
google
 
지금부터 Google Web Designer에서 애니메이션을 만들어 보겠습니다.
왼쪽 툴상자에서 타원도구툴을 이용해 원형을 하나 만듭니다.
2_1
 
타임라인을 통해 애니메이션을 제작합니다.
원형객체를 선택후  타임라인에서 오른쪽 마우스 클릭하면 키프레임을 추가할 수 있습니다.
3_1
 
0.5초에서 원형객체를 애니메이션하고자 하는 위치로 이동합니다.   직접선택툴을 이용해  직접 이동시키거나 오른쪽 옵션창을 통해 정확한 값을 넣어 이동키실수 있습니다. 2_2_2
 
원형객채(공)이 통통 튀는 애니메이션을 주기위해 두개의 키프레임을 추가선택해 0.7초 1초에 각각 키프레임을 추가후 0.5초 에서는  top:198px,  0.7초 에서는 top:180px, 1초에서는 top:198px로 위치시킵니다.2_3_2
 
재생버튼을 통해 애니메이션을 미리 확인해볼수 있습니다.
3_2
 
자연스런 애니메이션 동작을 위해 키프레임 각 구간별  가속도를 지정해줍니다.
키프레임 타임 구간을 오른쪽 마으스 클릭하면 애니메이션 속도를 조정할수 있는 옵션메뉴가 나옵니다.
4
 
기본적으로 제공하는  선형, 이징, 이즈아웃, 이즈인, 이즈인 아웃 외 맞춤을 선택해 직접 속도를 조절할수 있습니다.
5
 
이렇게 Google Web Designer를 통해 쉽게 애니메이션을 구현해 보았습니다.
 
애니메이션을 “코드보기”를 통해 작성된  html코드및 css3를 바로 확인할 수 있습니다.
7
 
애니메이션 만들기외 Google Web Designer가 내세우는 기능은 여러가지 있습니다. 아래 Google Web Designer 공부하기링크를 통해 경험해보세요.
[Google Web Designer 공부하기]
https://support.google.com/webdesigner/#topic=3249465
 
Google Web Designer 툴과 같은 html5기반 애니메이션 툴은 여럿있습니다.  Google Web Designer툴과 함께 비교 경험해보시면 더 좋을것 같습니다.
[유사한 툴]
http://html.adobe.com/edge/animate/
http://tumult.com/hype/
http://www.sencha.com/products/animator/
https://developer.apple.com/iad/iadproducer/

카테고리: Review

0개의 댓글

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다