트리거와 애니메이터

트리거는 퓨즈로 애니메이션을 제작하는 선언적인 방법을 제공합니다. 일반적으로, 트리거는 사용자 및 프로그램 입력에 반응하는 이벤트를 나타냅니다. 트리거(Trigger)는 애니메이터(Animators)와 액션(Actions)을 포함할 수 있습니다.

아래 예제는 패널의 WhilePressed 트리거를 통해 패널을 90도 회전합니다. 이 때, 바운스 애니메이션도 함께 적용합니다.

1
2
3
4
5
<Panel Width="100" Height="100" Background="#F00">
    <WhilePressed>
        <Rotate Degrees="90" Duration="0.5" Easing="BounceInOut"/>
    </WhilePressed>
</Panel>

BackwardAnimation:순방향/역방향 애니메이션 구분

TriggerAnimation의 속성 중 ux:Binding에 BackwardAnimation을 지정하면 역방향 애니메이션에 다른 효과를 적용할 수 있습니다. 아래 코드를 실행해 보면 알 수 있습니다.

1
2
3
4
5
6
7
8
<Panel Width="100" Height="100" Background="#F00">
    <WhilePressed>
        <Rotate Degrees="90" Duration="0.5" />
        <TriggerAnimation ux:Binding="BackwardAnimation" >
            <Rotate Degrees="90" Duration="1" Easing="BounceOut" />
        </TriggerAnimation>
    </WhilePressed>
</Panel>

애니메이터 (Animators)

애니메이터는 이벤트가 트리거될 때 어떤 요소가 어떻게 움직일지를 지정합니다. 트리거가 활성화되면 순방향, 비활성화되면 역방향이 실행됩니다. 애니메이션의 정확한 결과를 제어하기 위해서는 아래 세 쌍의 속성들을 알아야 합니다.

Duration / DurationBack

실행 시간이며, 초 단위입니다.

1
2
3
4
5
6
<Panel Width="100" Height="100" Background="#F00">
    <WhilePressed>
        <Move X="100" Duration="0.6"/>
        <Rotate Degrees="90" Duration="0.3"/>
    </WhilePressed>
</Panel>

Delay / DelayBack

지연시간입니다. 아래 코드는 위 코드와 달리 끝까지 이동한 후 회전합니다.

1
2
3
4
5
6
<Panel Width="100" Height="100" Background="#F00">
    <WhilePressed>
        <Move X="100" Duration="0.6"/>
        <Rotate Degrees="90" Duration="0.3" Delay="0.6"/>
    </WhilePressed>
</Panel>

Easing / EasingBack

점점 느려지거나 점점 빨라지는 애니메이션을 위한 값입니다. 위쪽 소스 중 Easing=”BounceOut”과 같이 적용할 수 있습니다. 아래 타입 뒤에 In, Out, InOut을 붙여서 사용하면 됩니다.

Linear
Quadratic
Cubic
Quartic
Quintic
Sinusoidal
Exponential
Circular
Elastic
Back
Bounce

Change

일시적으로 속성을 변경할 때 사용합니다. 만일 영구적으로 변경하길 원한다면 Set을 사용해야 합니다. 아래 코드는 빨간색 사각형을 마우스나 터치로 눌렀을 때 파란색으로 변하게 하고, 놓으면 다시 빨간색으로 돌아오게 합니다.

1
2
3
4
5
<Panel ux:Name="panel" Width="100" Height="100" Color="Red">
    <WhilePressed>
        <Change panel.Color="Blue" Duration="0.3"/>
    </WhilePressed>
</Panel>

다른 객체에 값을 적용할 수도 있습니다.

1
2
3
4
5
6
7
8
<StackPanel>
    <Panel ux:Name="panel" Width="100" Height="100" Color="Red" />
    <Button Text="Change">
        <WhilePressed>
            <Change panel.Color="Blue" Duration="0.3"/>
        </WhilePressed>
    </Button>
</StackPanel>

Cycle

Low와 High값 사이를 반복합니다.

1
2
3
4
5
6
<Panel Width="100" Height="100" Color="Red">
    <Translation ux:Name="someTranslation" />
    <WhilePressed>
        <Cycle Target="someTranslation.X" Low="-20" High="20" Frequency="2" />
    </WhilePressed>
</Panel>

Transform 애니메이터

이동, 크기, 회전 등에 대한 애니메이션을 정의합니다.

Move

객체를 이동시킵니다.

1
2
3
4
5
<Panel Width="100" Height="100" Color="Red">
    <WhilePressed>
        <Move X="50" />
    </WhilePressed>
</Panel>

RelativeTo 속성값을 이용해서 객체 크기의 비율만큼 이동할 수도 있습니다.

1
2
3
4
5
<Panel Width="100" Height="100" Color="Red">
    <WhilePressed>
        <Move X="0.5" RelativeTo="Size" />
    </WhilePressed>
</Panel>

아래는 RelativeTo에 적용할 수 있는 값입니다.

– Local (기본값): 포인트값으로 이동
– Size: 객체의 크기 비율로 이동합니다.
– ParentSize: 부모 객체의 크기 비율로 이동합니다.
– PositionChange: LayoutAnimation과 연계되어 이동합니다.
– WorldPositionChange: LayoutAnimation과 연계되어 이동합니다.
– Keyboard: 키보드의 사이즈에 연계하여 이동합니다.

RelativeNode 속성은 다른 객체를 기준으로 이동하도록 합니다. RelativeTo와 유사합니다.

– Size
– ParentSize
– PositionOffset
– TransformOriginOffset

Scale

객체의 크기를 조절합니다. 아래는 0.4초 동안 객체를 2배로 크게 만드는 예제입니다.

1
2
3
4
5
<Panel Width="100" Height="100" Color="Red">
    <WhilePressed>
        <Scale Factor="2" Duration="0.4"/>
    </WhilePressed>
</Panel>

– SizeChange: RelativeNode 속성에 의해 지정된 객체의 크기 변화에 맞춰서 크기가 조절됩니다.
– SizeFactor: RelativeNode 속성에 의해 지정된 객체의 크기를 기준으로 Factor 값만큼의 크기가 설정됩니다. 1을 설정하면 지정된 객체와 동일한 크기가 설정됩니다.

Rotate

객체를 회전합니다. 아래 코드는 패널을 0.5초 동안 90도만큼 회전시킵니다. DegreesX, DegreesY, DegreesZ를 따로 적용할 수도 있습니다.

1
2
3
4
5
<Panel Width="100" Height="100" Color="Red">
    <WhilePressed>
        <Rotate Degrees="90" Duration="0.5"/>
    </WhilePressed>
</Panel>

Resize

LayoutAnimation과 함께 사용해서 요소의 크기를 조절합니다.

Spin

객체를 회전시킵니다.

1
2
3
4
5
<Panel Width="100" Height="100" Color="Red">
    <WhilePressed>
        <Spin Frequency="2" />
    </WhilePressed>
</Panel>

Skew

객체를 비스듬하게 기울입니다.

1
2
3
4
5
<Panel Width="100" Height="100" Color="Red">
    <WhilePressed>
        <Skew DegreesX="30" Duration="0.4"/>
    </WhilePressed>
</Panel>

Attractor

Attractor는 애니메이션에 더 자연스러운 움직임을 주기 위해 사용됩니다. 그것은 애니메이터와 타겟 사이의 중개 역할을 합니다. 간단한 형태의 물리 시뮬레이션을 통해 타겟의 Value값을 지속적으로 따라갈 수 있습니다.

아래 코드는 패널을 누를 때 우측 아래로 (100, 100)만큼 이동합니다.

1
2
3
4
5
6
7
8
9
<Panel ux:Name="somePanel" X="0" Y="0" Width="100" Height="100" Color="Red">
    <Translation ux:Name="someTranslation"/>
    <Attractor ux:Name="someAttractorX" Target="someTranslation.X"/>
    <Attractor ux:Name="someAttractorY" Target="someTranslation.Y"/>
    <WhilePressed>
        <Change someAttractorX.Value="100"/>
        <Change someAttractorY.Value="100"/>
    </WhilePressed>
</Panel>

#퓨즈 #퓨즈툴 #퓨즈툴즈 #퓨즈툴스 #Fuse #Fusetools #모바일 #앱 #크로스플랫폼 #iOS #Android #안드로이드 #Objective-C #Swift #Java #C++ #우노 #Uno