속성 변경에 애니메이션 적용

애니메이션을 생성하려면, 애니메이션을 적용할 속성에 적합한 애니메이션 유형을 사용하고, 필요한 동작 유형에 따라 애니메이션을 적용하십시오.

‘ Components ’ > ‘ Default Components ’ > ‘ Animation ’에서 애니메이션 구성 요소를 ‘ Navigator ’ 또는 ‘ 2D ’ 뷰로 드래그하여 인스턴스를 생성할 수 있습니다.

다른 애니메이션 기법을 사용하여 유사한 결과를 얻을 수도 있습니다. 자세한 내용은 ‘애니메이션 추가’를 참조하십시오.

애니메이션 적용

속성 애니메이션은 속성의 값이 변경될 때 적용됩니다. 색상 및 숫자 애니메이션은 특정 용도를 위한 속성 애니메이션 유형입니다. 애니메이션 설정은 ‘ Properties > Animation Targets ’에서 지정할 수 있습니다.

색상 변경 애니메이션 적용

예를 들어, Rectangle 컴포넌트 인스턴스의 Color 속성 값에 애니메이션을 적용하여, 지정된 밀리초 단위의 시간 동안 현재 색상에서 다른 색상으로 값이 변경되도록 할 수 있습니다.

1. 2D 뷰에서 Color Animation 컴포넌트의 인스턴스를 생성합니다.
2. Properties > Animation Targets 로 이동합니다.
3. Target 에서 애니메이션을 적용할 컴포넌트를 선택합니다.
4. Property 에서 애니메이션을 적용할 속성을 입력합니다. 여러 속성에 애니메이션을 적용하려면 쉼표로 구분하십시오.

   

5. Color Animation 섹션에서 From color 에서 원래 색상을, To color 에서 새로운 색상을 선택합니다.
6. ' Animation ' 섹션에서 ' Duration'에 애니메이션 지속 시간을 설정합니다.

수치 값의 변경에 애니메이션 적용

마찬가지로, 속성의 수치 값이 변경될 때 애니메이션을 적용하려면 Number Animation 컴포넌트의 인스턴스를 생성하십시오.

1. Properties > Number Animation 로 이동합니다.

   

2. From 에서 원래 값을, To 에서 새 값을 선택합니다.
3. Animation 섹션에서 Duration 의 애니메이션 지속 시간을 설정합니다.

예를 들어, Rectangle 인스턴스의 X 속성 값에 애니메이션을 적용하여, x축상의 현재 위치에서 지정된 시간(밀리초 단위) 동안 다른 위치로 이동하는 것처럼 보이게 할 수 있습니다. 컴포넌트가 x축과 y축 모두에서 이동하는 것처럼 보이게 하려면, Properties 필드에 x와 y를 쉼표로 구분하여 입력하십시오.

속성 애니메이션을 사용하여 컴포넌트의 크기 및 불투명도를 애니메이션 처리하는 예제는 ‘Coffee Machine’ 예제를 참조하십시오.

애니메이션이 적용되지 않는 속성 설정

애니메이션이 진행되는 동안 속성 변경을 애니메이션으로 표현하지 않고 속성 값을 즉시 변경하려면:

1. ' Navigator'에서 ' Property Action ' 컴포넌트의 인스턴스를 생성합니다.
2. Properties >로 이동합니다. Property Action

   

3. ' Value ' 필드에 값을 설정합니다.

이는 애니메이션이 진행되는 동안 애니메이션이 적용되지 않는 속성 값을 설정할 때 유용합니다.

예를 들어, Number Animation 컴포넌트 인스턴스를 중심으로 Property Action 컴포넌트의 인스턴스 두 개를 포함하는 Sequential Animation 컴포넌트의 인스턴스를 생성할 수 있습니다. 첫 번째 속성 액션은 Rectangle의 Opacity 속성을 0.5 로 설정하고, 숫자 애니메이션은 이미지의 너비를 변경하며, 두 번째 속성 액션은 불투명도를 다시 1 로 설정합니다.

애니메이션 재생

애니메이션 재생 설정을 지정하려면 ‘ Properties ’ > ‘ Animation ’로 이동합니다.

애니메이션을 자동으로 실행하려면 ‘ Running ’을 선택합니다. 애니메이션은 ‘ Duration ’ 필드에 지정한 시간 동안 실행됩니다.

예를 들어, 사용자가 버튼을 선택할 때 애니메이션이 재생되도록 하려면 애니메이션의 ‘running’ 속성을 컴포넌트에서 발산하는 신호에 연결할 수 있습니다. 자세한 내용은 ‘컴포넌트를 신호에 연결하기’를 참조하십시오.

애니메이션을 반복하여 여러 번 실행하려면 ‘ Loops ’ 필드에 재생 횟수를 설정하십시오. 값을 -1로 설정하면 애니메이션이 명시적으로 중지될 때까지 계속 반복됩니다.

애니메이션이 중지되었을 때 끝까지 재생되도록 지정하려면 ‘ Run to end ’을 선택하십시오. 이 동작은 ‘ Loops ’ 속성이 설정된 경우에 가장 유용하며, 이 경우 애니메이션은 정상적으로 재생이 완료되지만 다시 시작되지는 않습니다.

컴포넌트에 정의된 모든 애니메이션은 그룹으로 관리하기 위해 ‘ Parallel Animation ’ 또는 ‘ Sequential Animation ’ 컴포넌트에 포함하지 않는 한 병렬로 실행됩니다.

애니메이션을 일시 중지하려면 ‘ ’(Paused)을 선택하십시오.

애니메이션에 이징 커브를 적용하려면, [ Easing Curve ] 필드에서 [ ] (Easing Curve Editor) 버튼을 선택하십시오.

애니메이션 그룹 재생

병렬로 또는 순차적으로 실행될 수 있는 여러 애니메이션을 만들 수 있습니다.

동시에 재생될 애니메이션 그룹을 관리하려면:

1. Navigator 에서 Parallel Animation 컴포넌트의 인스턴스를 생성합니다.
2. 다른 애니메이션들을 해당 컴포넌트로 드래그합니다.

지정된 순서대로 애니메이션을 차례로 재생하려면, 대신 ` Sequential Animation ` 인스턴스를 생성하십시오.

예를 들어, 배너 컴포넌트에는 여러 개의 아이콘이나 슬로건이 차례대로 표시될 수 있습니다. Opacity 속성의 값을 1.0 로 변경하면 불투명한 객체를 나타냅니다. 순차 애니메이션을 사용하면 각 불투명도 애니메이션이 이전 애니메이션이 끝난 후에 재생되는 반면, 병렬 애니메이션을 사용하면 애니메이션이 동시에 재생됩니다.

개별 애니메이션을 병렬 또는 순차 애니메이션 그룹에 포함시키면, 더 이상 해당 애니메이션을 개별적으로 시작하거나 중지할 수 없습니다. 반드시 그룹 단위로 시작하고 중지해야 합니다.

그룹화된 애니메이션 사이에 일시 정지 추가

Sequential Animation 에서 사용되는 Pause Animation 는 지정된 기간 동안 아무 일도 일어나지 않는 단계를 의미합니다.

두 애니메이션 사이에 일시 정지 시간을 지정하려면:

1. Navigator 의 Sequential Animation 내에서 Pause Animation 컴포넌트의 인스턴스를 생성합니다.
2. Properties > Animation 로 이동합니다.
3. ' Paused'을 선택합니다.
4. ' Duration ' 필드에서 일시 중지 기간을 설정합니다.

성능 고려 사항

UI에서 유동성과 동적 전환은 물론 시각적 효과를 활용하여 뛰어난 효과를 낼 수 있습니다. 그러나 지원되는 일부 기능은 UI의 성능에 영향을 미칠 수 있으므로 사용할 때 주의가 필요합니다.

일반적으로 속성을 애니메이션 처리하면 해당 속성을 참조하는 모든 바인딩이 재평가됩니다. 대개는 이것이 원하는 결과이지만, 경우에 따라 애니메이션을 수행하기 전에 바인딩을 비활성화한 다음, 애니메이션이 완료된 후 바인딩을 다시 할당하는 것이 더 나을 수도 있습니다.

애니메이션이 진행되는 동안에는 자바스크립트 실행을 피하십시오. 예를 들어, x 속성 애니메이션의 각 프레임마다 복잡한 자바스크립트 표현식을 실행하는 것은 피해야 합니다.

Script Action 컴포넌트의 인스턴스를 생성할 때는 각별히 주의하십시오. 스크립트 애니메이션은 메인 스레드에서 실행되므로, 완료하는 데 너무 오랜 시간이 걸릴 경우 프레임이 건너뛸 수 있습니다.

애니메이션 컴포넌트 요약

다음 표에는 프로그래밍 방식으로 컴포넌트 속성을 애니메이션화하는 데 사용할 수 있는 컴포넌트가 나열되어 있습니다. 이 컴포넌트들은 ‘ Components > Default Components > Animation ’에서 사용할 수 있습니다.