[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] OpacityAnimation 엘리먼트 : Delay/EasingMode/EasingType 속성 사용하기

■ OpacityAnimation 엘리먼트의 Delay/EasingMode/EasingType 속성을 사용하는 방법을 보여준다.

▶ 예제 코드 (XAML)


xmlns:mxic="using:Microsoft.Xaml.Interactions.Core"
xmlns:mxi="using:Microsoft.Xaml.Interactivity"
xmlns:ctwa="using:CommunityToolkit.WinUI.Animations"
xmlns:ctwb="using:CommunityToolkit.WinUI.Behaviors"

<Button
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Width="150"
    Height="100">
    <ctwa:Explicit.Animations>
        <ctwa:AnimationSet x:Name="moveAnimationSet"
            IsSequential="True">
            <ctwa:StartAnimationActivity Animation="{Binding ElementName=fadeOutAnimationSet}" />
            <ctwa:InvokeActionsActivity>
                <mxic:ChangePropertyAction
                    TargetObject="{Binding ElementName=textBlock}"
                    PropertyName="Foreground"
                    Value="Purple" />
            </ctwa:InvokeActionsActivity>
            <ctwa:StartAnimationActivity
                Animation="{Binding ElementName=fadeInAnimationSet}"
                Delay="00:00:02" />
        </ctwa:AnimationSet>
    </ctwa:Explicit.Animations>
    <TextBlock Name="textBlock"
        FontSize="20"
        Text="🦙 Text">
        <ctwa:Explicit.Animations>
            <ctwa:AnimationSet x:Name="fadeOutAnimationSet">
                <ctwa:OpacityAnimation
                    Delay="0"
                    EasingMode="EaseOut"
                    EasingType="Linear"
                    Duration="00:00:01"
                    From="1"
                    To="0" />
            </ctwa:AnimationSet>
            <ctwa:AnimationSet x:Name="fadeInAnimationSet">
                <ctwa:OpacityAnimation
                    Delay="0"
                    EasingMode="EaseOut"
                    EasingType="Linear"
                    Duration="00:00:01"
                    From="0"
                    To="1" />
            </ctwa:AnimationSet>
        </ctwa:Explicit.Animations>
    </TextBlock>
    <mxi:Interaction.Behaviors>
        <mxic:EventTriggerBehavior EventName="Click">
            <mxic:ChangePropertyAction
                TargetObject="{Binding ElementName=textBlock}"
                PropertyName="Foreground"
                Value="White" />
            <ctwb:StartAnimationAction Animation="{Binding ElementName=moveAnimationSet}" />
        </mxic:EventTriggerBehavior>
    </mxi:Interaction.Behaviors>
</Button>
</Page>

xmlns:mxic="using:Microsoft.Xaml.Interactions.Core"

xmlns:mxi="using:Microsoft.Xaml.Interactivity"

xmlns:ctwa="using:CommunityToolkit.WinUI.Animations"

xmlns:ctwb="using:CommunityToolkit.WinUI.Behaviors"

<Button

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="150"

Height="100">

<ctwa:Explicit.Animations>

<ctwa:AnimationSet x:Name="moveAnimationSet"

IsSequential="True">

<ctwa:StartAnimationActivity Animation="{Binding ElementName=fadeOutAnimationSet}" />

<ctwa:InvokeActionsActivity>

<mxic:ChangePropertyAction

TargetObject="{Binding ElementName=textBlock}"

PropertyName="Foreground"

Value="Purple" />

</ctwa:InvokeActionsActivity>

<ctwa:StartAnimationActivity

Animation="{Binding ElementName=fadeInAnimationSet}"

Delay="00:00:02" />

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

<TextBlock Name="textBlock"

FontSize="20"

Text="🦙 Text">

<ctwa:Explicit.Animations>

<ctwa:AnimationSet x:Name="fadeOutAnimationSet">

<ctwa:OpacityAnimation

Delay="0"

EasingMode="EaseOut"

EasingType="Linear"

Duration="00:00:01"

From="1"

To="0" />

</ctwa:AnimationSet>

<ctwa:AnimationSet x:Name="fadeInAnimationSet">

<ctwa:OpacityAnimation

Delay="0"

EasingMode="EaseOut"

EasingType="Linear"

Duration="00:00:01"

From="0"

To="1" />

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

</TextBlock>

<mxi:Interaction.Behaviors>

<mxic:EventTriggerBehavior EventName="Click">

<mxic:ChangePropertyAction

TargetObject="{Binding ElementName=textBlock}"

PropertyName="Foreground"

Value="White" />

<ctwb:StartAnimationAction Animation="{Binding ElementName=moveAnimationSet}" />

</mxic:EventTriggerBehavior>

</mxi:Interaction.Behaviors>

</Button>

</Page>