퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 네비게이션
  4. 트랜지션[Transitions]

트랜지션[Transitions]

Transition 클래스

네비게이터에서 페이지 간 전환에 대한 애니메이션을 제어합니다.

EnteringAnimation 및 ExitingAnimation 트리거와 달리 Transition을 사용하면 탐색할 페이지 또는 벗어나는 페이지에 따라 다른 애니메이션을 만들 수 있습니다.

예제

1
2
3
4
5
6
7
8
<Page ux:Template="Main">
    <Transition To="Contacts">
        <Move X="-1" RelativeTo="ParentSize" Duration="1"/>
    </Transition>
    <Transition>
        <Move Y="1" RelativeTo="ParentSize" Duration="1"/>
    </Transition>
</Page>

Contacts 페이지로 이동하는 경우 이 페이지에는 특별한 트랜지션이 있습니다. 이 경우 페이지가 왼쪽으로 밀려납니다. 이 페이지에서 다른 모든 트랜지션은 아래로 슬라이드 됩니다.

To / From

모든 탐색 변경은 “To” 및 “From” 페이지를 정의합니다. 트랜지션에서 이들은 항상 네비게이션에서 페이지의 포워드 순서로 정의됩니다. 이렇게 하면 뒤로 이동(예: goBack 사용) 할 때 동일한 트랜지션이 사용되지만 반대 방향으로 수행됩니다.

예를 들어, 는 Contacts 페이지로의 순방향 전환과 Contacts 페이지에서 이 페이지로의 역방향 트랜지션을 일치시킵니다.

비슷하게, 은 Main 페이지에서의 순방향 전환과 이 페이지에서 Main 페이지로의 역방향 트랜지션과 일치시킵니다.

우선순위(Priority)

우선 순위가 가장 높은 트랜지션 하나만 페이지 변경 시마다 선택됩니다. 우선 순위는 다음과 같습니다.

  • Style은 운영체제 종속적인 스타일과 매칭됩니다.
  • Interaction은 Any를 제외한 나머지와 매칭됩니다.
  • To 페이지명 매칭
  • From 페이지명 매칭
  • ToBack, FromBack, ToFront, FromFront의 Direction
  • ToActive, ToInactive의 Direction
  • InFront, Behind의 Direction
  • Direction Any

매칭되는 트랜지션이 없으면 Navigator.Transition 속성에 따라 기본 트랜지션이 만들어집니다. 기본값을 원하지 않으면 속성없이 최종 대체(fallback) 트랜지션을 지정하십시오.

재생 방향

페이지가 비활성 상태가 되면 트랜지션이 앞으로 재생됩니다. 페이지가 활성화되면 트랜지션이 뒤로 재생됩니다. 이는 트랜지션이 항상 애니메이션을 비활성 상태로 정의한다는 것을 의미합니다.

특정 속성 조합을 사용하면 처음에는 이상하게 보일 수 있습니다. 예를 들면 다음과 같습니다.

1
2
3
<Transition Direction="ToActive">
    <Move X="100" Duration="1"/>
</Transition>

이 트랜지션은 페이지가 활성 상태가 될 때만 선택됩니다. 애니메이션은 X=100에서 시작하여 1의 지속 시간 동안 X=0쪽으로 이동합니다.

활성 페이지의 최종 상태는 항상 모든 트랜지션이 비활성화된 상태입니다.

확장 예제

트랜지션 예제에서는 트랜지션을 사용하여 다양한 페이지 전환을 보여줍니다.

Transition의 인터페이스

링크로 대신합니다: https://www.fusetools.com/docs/fuse/triggers/transition#section-table-of-contents

Was this article helpful to you? Yes No

How can we help?