- Object Reference > Animation
드디어 미루고 미루었던 애니메이션이 나오네요. ㅠㅠ
애니메이션은 그 자체가 중요한 것이 아니라 정보와 데이터를 적절하게 보여질 수 있게 사용하는 것이 중요합니다.
많은 경우 개발자가 임의로 집어넣는데 그럴 경우에는 중구난방 어지러운 애플리케이션이 만들어집니다.
가능하면 인터랙션 디자이너가 참여하면 좋고
그렇지 못하더라도 공통적인 가이드를 가지고 적용해야 합니다.
애니메이션은 크게 다음과 같이 구분됩니다.
PropertyAnimation
- 속성 값을 직접 변경하는 애니메이션으로 해당 속성은 시각과 끝 값을 가져야 하며 중간값을 구할 수 있는 scalar 값을 가져야 합니다.
* scalar 값은 방향 구별 없이 하나의 수치로 완전하게 표현되는 값이라고 합니다.
- 그래서 텍스트나 boolean 값은 처리할 수 없습니다.
TransitionAnimation
- 우리말로 표현하면 '전이'라고 표현할 수 있는데 변경전과 변경후의 이미지가 어떻게 변하는지 보여주는 형식입니다.
MoveAnimation
- 말 그대로 좌표값이 변경되는 애니메이션입니다.
- 컴포넌트의 move 메소드에 효과를 적용하는 애니메이션입니다.
CompositeAnimation
- TransitionAnimation 와 PropertyAnimation 을 여러개 등록해서 동시에 동작시킬 수 있습니다.
말로는 잘 설명이 안되기 때문에...
일단 예제를 보도록 하겠습니다.
애니메이션을 처리하기 위해서는 먼저 해당 오브젝트를 설정해주어야 합니다.
UX 스튜디오에서 dataset과 마찬가지로 invisible objects 영역에 가져다 놓아주면 됩니다.
아무것도 지정하지 않은 상태라면 아래 코드와 같이 속성이 지정될 겁니다.
<PropertyAnimation id="PropertyAnimation00" endingmode="to" repeat="1" repeattype="normal" duration="0" starttime="0"/>
이 상태에서는 어떤 것을 애니메이션 처리할지 결정되어있지 않습니다.
이제 대상을 정해야 겠죠.
애니메이션의 속성은 2가지 형태로 UX 스튜디오에서 확인할 수 있습니다.
먼저 기본적인 속성 패널에서 확인하는 형태입니다.
해당하는 속성과 이벤트를 정의할 수 있습니다.
애니메이션을 어떻게 처리할지 사전에 정의되어 있는 경우에는 일반 속성 패널로도
가능합니다.
하지만 좀 더 세밀한 작업을 처리하고자 한다면 다음과 같이 처리할 수 있습니다.
Invisible Objects 영역에서 해당 애니메이션 객체를 더블클릭하면
애니메이션 에디터 패널로 이동합니다.
일반 속성 패널과 내용이 다른 것은 아니지만 몇가지 추가적인 기능을 제공합니다.
먼저 상단에 있는 Preview 버튼을 선택하면 디자인 영역에 있는 대상 객체가 어떻게 보여질지 바로 확인할 수 있습니다.
따로 애플리케이션을 실행시키지 않더라도 애니메이션의 동작을 확인할 수 있는 겁니다.
그리고 Interpolation 을 선택하면 하단의 Interpolation Graph 에서 동작을 확인할 수 있습니다.
Interpolation 은 보간법이라고 하며 몇개의 점에 주어진 함수값을 기초로 그 점들 사이의 함수값을 구하는 근사 계산법을 이야기한다고 합니다. 이를 기반으로 애니메이션의 가속을 어떻게 처리할지 판단하는 겁니다.
Interpolation Graph 에서 애니메이션을 확인하고 Preview 에서 실제 어떻게 동작하는지 확인하는거죠.
Interpolation 객체에 사전에 정의된 함수를 제공하고 있으며
필요에 따라 사용자가 직접 정의해서 사용할 수도 있습니다.
이렇게 지정된 애니메이션은 저절로 실행되는 건 아니고 run() 메소드를 실행시켜주어야 합니다.
run 메소드를 실행하면서 타겟을 지정할 수도 있습니다.
애니메이션을 지정하는 또 다른 방법은 해당 객체에 직접 스타일로 지정하는 겁니다.
예를 들어 아래와 같은 코드를 사용할 수 있습니다.
<Button id="Button18" taborder="34" text="Button18" position="absolute 528 121 663 154" style="mouseentereffect:PropertyAnimation00;"/>
마우스가 해당 객체영역에 들어가게 되면 지정된 애니메이션이 실행되는 겁니다.
UX 스튜디오에서 지정할때는 아래와 같이 애니메이션 속성을 드래그앤드롭해서
원하는 스타일 속성을 선택하고 지정할 수 있습니다.
1회성으로 사용되는 경우에는 애니메이션 객체를 지정하지 않고
코드상에서 애니메이션 속성을 정의할 수도 있습니다.
* 내용이 너무 길어지니 다음 편에 다시..
http://cafe.naver.com/xplatform101/222