애니메이션 매핑 (Animations Mapping)
이벤트로 연결된 두 개의 아트보드에 각각 동일한 이름을 가진 레이어가 있을 경우 이 두개의 레이어가 자동으로 애니메이션으로 연결된다. 백문이 불여일견, 일단 아래와 같이 두 개의 아트보드에 각각 사각형을 하나 씩 만들어보자.
그리고 첫 번째 아트보드와 두 번째 아트보드의 사격형 이름을 ‘Layer’라고 동일하게 변경한다.
이제 첫 번째 아트보드의 사각형을 터치하면 두 번째 아트보드로 화면이 전환되게 이벤트를 걸어보자. 어떻게 이벤트를 거는 것인지 머뭇거린다면 좀 더 공부가 필요한 상황이라고 볼 수 있다. 아래 링크에서 좀 더 공부하고 오길 바란다.
재대로 만들었다면 아래 동영상과 같이 작동할 것이다.
그럼 이제 두 번째 아트보드에 있는 사각형 레이어의 이름을 ‘Layer_02’로 바꿔보자.
이제 미리보기에서 사각형을 터치해 보자.
작은 사각형이 큰 사각형으로 바뀌기는 했지만 중간 연결 프레임이 전혀 없는 것을 알 수 있다. 이처럼 프린서플에서 애니메이션을 만들 때는 각 레이어의 이름이 굉장히 중요하다. 특히 아트보드의 개수가 늘어날 수록 레이어 이름 관리를 잘해야 애니메이션이 꼬이는 사고를 막을 수 있다는 점 기억하기 바란다.
사용자 지정 애니메이션 (Custom Animations)
프린서플의 애니메이션 지속시간은 기본값이 0.3초이다. 애니메이션에 사용되는 완화곡선(Easing Curve)은 iOS와 OSX에서 사용되는 것과 동일하다. 아트보드 사이의 애니매이션을 편집하고 싶으면 이벤트를 만든 후 생성되는 아트보드 사이의 화살표를 클릭하면 하단에 애니메이션 패널이 보일 것이다.
이제 어떤 요소들을 사용자가 지정할 수 있는지 알아보자.
키프레임 (Keyframes)
먼저 아래의 그림을 보면 레이어가 두 개인 것을 알 수있다. 왜냐면 방금 우리가 만든 애니메이션이 ‘Layer’라는 이름의 레이어의 속성 중 너비(Width)와 높이(Height)를 바꾼 애니메이션이기 때문이다.
이제 너비와 높이에 시간 차이를 줘서 애니메이션에 변화를 주도록 하자. 애니메이션 패널에서 높이(Height) 레이어를 아래 그림과 같이 몇 초 뒤에 변경되도록 해보자.
그 다음은 미리보기에서 확인해 보자.
이 정도면 키프레임에 대한 이해가 어느 정도 되었을 것이라 믿는다.
곡선 완화 (Easing Curve)
한글로 번역하니 겁나 어색한 단어다. 보통 이징값이라고 많이들 얘기한다. 타임라인 베이스의 키프레임에 익숙하지 않은 분들은 첨에 좀 어렵게 느껴질 수 있는 개념인데 인터넷 상에 자료는 널려 있으니 검색해 보길 바란다… 라고 쓰다가 귀찮아 할것 같아 아래 이미지 첨부한다.
위 그림과 같이 곡선의 형태로 애니메이션의 운동감을 조절할 수 있다는 얘기다.
프린서플은 기본적으로 iOS와 OSX의 설정값을 사용하지만 베지어 곡선을 이용해서 사용자 편집도 가능하다.
하나만 더 만들어 보자. 이번에는 아래 그림과 같이 아트보드와 원을 만들어 보자. 잊지 말자. 두 개의 아트보드에 있는 레이어의 이름은 ‘반드시’ 같아야 한다.
그 다음 첫 번째 아트보드의 원을 선택 후 탭 이벤트로 두 번째 아트보드로 연결되도록 한다.
미리보기를 보면 아마 다음처럼 작동할 것이다.
동작이 겁나 밋밋하다. 이제 이 동작에 생기를 불어 넣어 보자. 아트보드의 애니메이션 화살표를 선택하면 나타나는 캔버스 하단의 애니메이션 패널에서 원 레이어를 선택하자. 그리고 곡선 완화(아… 어색하다…) 설정을 ‘Spring’으로 변경한다.
자, 이제 미리보기에서 원을 탭 해본다.
여기서 하나만 더 추가해 보자. 두 번째 아트보드에 있는 원의 크기를 조금 더 크게 만들고 위치를 조금 아래로 내린다.
미리보기에서 훨씬 더 생기있는 애니메이션을 확인 할 수 있을 것이다.
속성 얼리기 (Frozen Properties)
말 그대로 속성을 얼리는 거다. 무슨 얘기냐하면 첫 번째 아트보드에서 두 번째 아트보드로 넘어오면서 애니메이션이 진행 될 때 변하지 않았으면 하는 속성을 지정해 줄 수 있다는 것이다. 예를 들어 앞서 만든 애니메이션에서 다음과 같이 너비(Width)를 얼려보자. 레이어 속성 옆의 눈꽃으로 얼리면 된다.
그리고 미리보기를 보자.
오늘은 여기까지…
여기까지 어느 정도가 이해가 되었다면, 그리고 혼자서 만들어 볼 수 있다면 기본적인 프로토타이핑은 쉽게 만들 수 있을 것이다. 다음 포스팅에서 다룰 ‘드라이버(Driver)’까지 함께 사용하면 매우 재미있는 인터랙션 디자인 작업이 가능하리라 생각한다. 물론 머리 속에 섹시한 아이디어가 있다는 전제하에ㅋㅋ
