속성 변경 애니메이션 만들기

애니메이션을 만들려면 애니메이션을 적용할 속성에 적합한 애니메이션 유형을 사용하고 필요한 동작 유형에 따라 애니메이션을 적용합니다.

애니메이션 컴포넌트를 Components > Default Components > Animation 에서 Navigator 또는 2D 보기로 드래그하여 인스턴스를 만들 수 있습니다.

다른 애니메이션 기법을 사용하여 비슷한 결과를 얻을 수 있습니다. 자세한 내용은 애니메이션 추가하기를 참조하세요.

애니메이션 적용

속성 애니메이션은 속성 값이 변경될 때 적용됩니다. 색상 및 숫자 애니메이션은 특정 목적을 위한 속성 애니메이션 유형입니다. Properties > Animation Targets 에서 애니메이션에 대한 설정을 지정합니다.

색상 변경 애니메이션 적용

예를 들어 직사각형 컴포넌트 인스턴스의 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 에서 애니메이션의 지속 시간을 설정합니다.

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

속성 애니메이션을 사용하여 컴포넌트의 스케일 및 불투명도에 애니메이션을 적용하는 예제는 커피 머신 예시를 참조하세요.

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

애니메이션 중에 속성 값을 즉시 변경하려면 속성 변경에 애니메이션을 적용하지 않습니다:

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

   

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

애니메이션 중에 애니메이션이 적용되지 않은 속성 값을 설정할 때 유용합니다.

예를 들어 Number Animation 컴포넌트 인스턴스 주위에 Property Action 컴포넌트 인스턴스 두 개를 포함하는 Sequential Animation 컴포넌트 인스턴스를 만들 수 있습니다. 첫 번째 속성 동작은 직사각형의 Opacity 속성을 0.5 으로 설정하고 숫자 애니메이션은 이미지의 너비를 변경하며 두 번째 속성 동작은 불투명도를 1 으로 다시 설정합니다.

애니메이션 재생

애니메이션 재생에 대한 설정을 지정하려면 Properties > Animation 으로 이동합니다.

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

예를 들어 사용자가 버튼을 선택할 때 애니메이션을 재생하도록 애니메이션의 실행 속성을 컴포넌트에서 방출되는 신호에 연결할 수 있습니다. 자세한 내용은 컴포넌트를 신호에 연결하기를 참조하세요.

애니메이션을 반복해서 여러 번 실행하려면 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의 성능에 영향을 줄 수 있으므로 사용할 때 주의해야 합니다.

일반적으로 프로퍼티에 애니메이션을 적용하면 해당 프로퍼티를 참조하는 모든 바인딩이 다시 평가됩니다. 일반적으로는 이렇게 하는 것이 좋지만 경우에 따라서는 애니메이션을 수행하기 전에 바인딩을 비활성화한 다음 애니메이션이 완료되면 바인딩을 다시 할당하는 것이 더 나을 수 있습니다.

애니메이션 중에는 JavaScript를 실행하지 마세요. 예를 들어, x 속성 애니메이션의 각 프레임에 대해 복잡한 자바스크립트 표현식을 실행하는 것은 피해야 합니다.

스크립트 애니메이션은 메인 스레드에서 실행되므로 완료하는 데 너무 오래 걸리면 프레임이 건너뛸 수 있으므로 Script Action 컴포넌트의 인스턴스를 만들 때는 특히 주의하세요.

애니메이션 컴포넌트 요약

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