웹 브라우저에서 실행되는 무료 애니메이션 도구 " Expressive Animator "공개 프리뷰 버전이 공개되었습니다. 브라우저에서 타임 라인을 이용한 직관적 인 애니메이션 생성을 가능하게하는 도구로, 실제로 사용해 기능을 확인해 보았습니다.
"Expressive Animator"를 사용하려면 크롬브라우저 또는 마이크로소프트 엣지 브라우저를 이용하면 됩니다.
공식 사이트를 방문하여 "Try the preview version"을 클릭합니다 .
"Expressive Animator"애니메이션 편집 화면이 브라우저에 표시됩니다. 애니메이션 편집 화면에서 화면 왼쪽에 "이동" "확대"등의 다양한 도구가 줄서, 중앙에는 애니메이션의 미리보기 영역 오른쪽에는 애니메이션의 각 소재의 "색상" "크기" "각도"등을 조정 하는 영역 하단에 타임 라인이 표시되어 있습니다. 또한 "Expressive Animator '는 개발 초기 단계의 도구이므로, 기사 작성 시점에서는 화면 왼쪽의 도구의 대부분이 비활성화되어 있습니다.
화면 왼쪽 하단의 재생 마크를 클릭하면 작성중인 애니메이션이 재생됩니다.
다음 동영상은 실제로 초기 상태에서 표시되는 샘플 애니메이션을 재생하는 모습을 확인할 수 있습니다.
샘플에서는 중앙 이모티콘이 색을 바꾸면서 빙글 빙글 회전하고 있었기 때문에이 움직임을 어떻게 설정에서 실현하고 있는지 확인하는 것입니다. 먼저 화면 오른쪽 하단의 소재 목록에서 "body"를 클릭하면 타임 라인의 해당 부분 (화면 왼쪽)가 강조 표시되어 그 부분의 설정 항목이 화면 오른쪽 상단에 표시됩니다. 타임 라인에 5 개의 지점을 맞고 있으며, 첫 번째 점에서 두 번째 지점까지의 범위가 "오렌지 색상으로 "로 설정되어있는 것을 알 수 있습니다.
그리고 두 번째 점에서 4 번째 지점까지 "적색"으로 설정되어 네 번째 점에서 5 번째 점까지의 범위는 다시 "오렌지색상 "가되도록 설정되어 있습니다 . 이제 오렌지 → 빨강 → 오렌지 색상이 바뀌는 동작을 실현하고 있습니다.
또한 이모티콘을 구성하는 눈과 입, 얼굴 부분을 정리 한 "Emoji"그룹에는 타임 라인의 각 점마다 가로 배율이 100 % → 0 % → 마이너스 100 % → 0 % → 100 % 로 설정되어있어 마치 이모티콘이 가로 방향으로 한 회전 한 것 같은 애니메이션을 실현하고 있습니다.
몇번 해보다 보면 간단한조작으로 애니메이션 만들기의 구조가 이해했기 때문에 실제로 샘플 애니메이션 편집을 할 수 있습니다. 우선 화면 왼쪽의 빨간색 아이콘을 클릭하고 원하는 위치에서 마우스를 드래그 앤 드롭하여 새로운 소재를 추가해서 만들수 있습니다.
좌측에 네모상자를 선택하여 사각형 모양을 만들어 우측에 원하는 색상으로 변경할수있습니다.
네모상자 두개로 썬글라스 모양을 표현할수 있습니다.
몇번 사용하다보면 원하는 애니메이션을 만들수 있을거 같네여 ~
'IT' 카테고리의 다른 글
| 삼성 갤럭시 Z 폴드3 부트로더 해제시 카메라 꺼짐 (0) | 2021.08.25 |
|---|---|
| 이것만 사용하면 당구의신 (0) | 2021.07.24 |
| 유튜브 새로운 수익 기능 Super Thank (슈퍼 감사) (0) | 2021.07.23 |
