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

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 트리거와 애니메이션

트리거와 애니메이션

Trigger 클래스

트리거는 퓨즈에서 상호작용 응답, 전환(transitions) 및 애니메이션을 위한 주요 도구입니다.

트리거는 이벤트, 동작, 기타 사용자 입력 또는 앱의 상태 변화를 감지하고 응답으로 애니메이션 및 동작을 수행하는 UX 마크업에서 사용할 수 있는 객체입니다.

트리거가 활성화되면 트리거 태그 안에 넣는 객체에 따라 동작 타임라인을 수행합니다.

트리거는 다음과 같은 타입의 하위 노드를 UX 마크업에 포함할 수 있습니다:

  • 애니메이터(Animators) – 트리거가 활성화되면 속성, 변형 또는 효과를 애니메이션으로 만듭니다.
  • 액션(Actions) – 지속적인 이펙트가 있는 작업 또는 트리거가 활성화될 때 JavaScript를 다시 호출합니다.
  • 노드(Nodes) (visuals, behaviors, other triggers) – 트리거가 활성화되어 있는 동안 상위 비주얼에 추가됩니다.
  • 리소스(Resources) (ux:Key=”your_key”로 표시된 노드) – 트리거가 활성화되어 있는 동안 부모 범위에 대해 {Resource your_key}를 무시합니다.

자세한 내용은 이 페이지 하단의 비고 항목을 참조하십시오.

퓨즈에서 사용 가능한 트리거

링크로 대신합니다: https://www.fusetools.com/docs/fuse/triggers/trigger#available-triggers-in-fuse

Trigger의 인터페이스

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

비고

휴식 상태 및 편차(Rest state and deviation)

UX 마크업 요소의 기본 레이아웃과 구성을 휴식 상태(rest state)라고 합니다. 트리거는 이 휴식 상태에서의 편차를 정의합니다.

각 트리거는 중간 애니메이션이 중단 되더라도 자신의 애니메이션을 “적용 취소하여[un-apply]” 나머지 상태로 돌아 오는 방법을 알고 있습니다. 이것은 애니메이션이 프로그램의 논리적 상태와 완전히 분리되어 있어 실제 데이터와 실제 사용자 입력이 있는 여러 디바이스, 화면 크기에서 결합된 애니메이션을 처리하는 복잡성이 크게 줄어들기 때문에 좋습니다.

펄스 트리거(Pulse triggers)

펄스 트리거는 클릭 또는 탭핑과 같은 일회성 이벤트를 감지하고 해당 이벤트를 한 번 재생합니다. 일반적인 사용 사례는 JavaScript에 대한 콜백을 수행하는 것입니다.

<Panel Color="Blue">
    <Tapped>
        <Callback Handler="{panelTapped}" />
    </Tapped>
</Panel>

펄스 트리거는 일반적으로 과거 시제 동사 이름을 사용합니다.

While-triggers

‘While…’으로 시작하는 이름의 트리거는 특정 조건에서 활성화되는 지속 트리거이며 해당 조건이 사라질 때까지 활성 상태로 유지됩니다.

예를 들어 WhilePressed는 포함된 비주얼이 포인터에 의해 눌리는 동안 활성화되고 포인터가 놓이면 비활성화 됩니다.

<Panel Color="Red" ux:Name="panel">
    <WhilePressed>
        <Scale Factor="0.9" Duration="0.2" Easing="BackOut" />
        <Change panel.Color="Blue" Delay="0.2" Duration="0.2" Easing="CubicOut" />
    </WhilePressed>
</Panel>

포함하는 타임라인은 포인터를 누를 때 처음부터 시작하여 포인터가 눌려진 상태에서 애니메이션의 끝 상태를 유지합니다. 애니메이션 중간에 포인터가 놓이면 진행률이 취소되고 마우스를 놓을 때 진행 상황이 자연스럽게 되돌아갑니다.

Animation-triggers

‘…Animation’으로 끝나는 이름의 트리거는 특정 컨트롤에 특화되어 있습니다. 컨트롤의 논리적 진행 상황을 애니메이션 진행 상황에 매핑합니다.

예를 들어, ScrollingAnimation의 진행은 ScrollView의 상대 스크롤 위치에 연결됩니다. 진행의 시작 부분으로 스크롤하면 0, 끝까지 스크롤하면 진행 상태는 1입니다.

여기서 진행은 목표 값으로 “seeks[탐색]” 됩니다. 예를 들어, ScrollView 위치에서 갑자기 점프하면 트리거 애니메이션이 갑자기 점프됩니다. 이렇게 하면 트리거 진행이 사용자 입력에 정확하게 연결됩니다.

Animator의 Animator.Delay 및 Animator.Duration 설정은 ‘…Animation’ 트리거에서 존중되지만 상대 값으로만 진행됩니다(진도와 일치하도록 0 … 1 범위에서 정규화 됨).

Bypass

트리거가 이미 활성화 상태에 있으면 “bypass” 모드로 실행됩니다. 이것은 펄스 액션을 트리거하지 않으며 단순히 애니메이션을 최종 상태로 두고 애니메이션을 건너뜁니다.

이 기본값은 트리거에서 Byass=”Never”를 지정하여 무시할 수 있습니다.

다양한 동작과 기능은 전환시 우회 모드를 사용하는 옵션을 제공합니다. 이러한 방식은 애니메이션을 건너뛰고 트리거링 및 펄스 액션을 건너뛰는 방식으로 작동합니다.

[[ 동영상 강좌 ]]

Was this article helpful to you? Yes No

How can we help?