[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] ColorAnimation 엘리먼트 : 색상 애니메이션 만들기

■ ColorAnimation 엘리먼트를 사용해 색상 애니메이션을 만드는 방법을 보여준다.

▶ 예제 코드 (XAML)


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

<Button Name="button"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Padding="10 10 10 10"
    Content="Click me!">
    <ctwa:Explicit.Animations>
        <ctwa:AnimationSet x:Name="fadeInAnimationSet">
            <ctwa:AnimationScope
                Duration="00:00:01"
                EasingType="Sine">
                <ctwa:OpacityAnimation From="0" To="1" />
                <ctwa:ColorAnimation
                    Target="(Button.Foreground).(SolidColorBrush.Color)"
                    Layer="Xaml">
                    <ctwa:ColorKeyFrame Key="0.0" Value="White"  />
                    <ctwa:ColorKeyFrame Key="0.5" Value="Orange" />
                    <ctwa:ColorKeyFrame Key="0.8" Value="Green" EasingType="Linear"/>
                    <ctwa:ColorKeyFrame Key="1.0" Value="Black" EasingMode="EaseOut" EasingType="Cubic" />
                </ctwa:ColorAnimation>
            </ctwa:AnimationScope>
        </ctwa:AnimationSet>
    </ctwa:Explicit.Animations>
</Button>

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

<Button Name="button"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="10 10 10 10"

Content="Click me!">

<ctwa:Explicit.Animations>

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

<ctwa:AnimationScope

Duration="00:00:01"

EasingType="Sine">

<ctwa:OpacityAnimation From="0" To="1" />

<ctwa:ColorAnimation

Target="(Button.Foreground).(SolidColorBrush.Color)"

Layer="Xaml">

<ctwa:ColorKeyFrame Key="0.0" Value="White" />

<ctwa:ColorKeyFrame Key="0.5" Value="Orange" />

<ctwa:ColorKeyFrame Key="0.8" Value="Green" EasingType="Linear"/>

<ctwa:ColorKeyFrame Key="1.0" Value="Black" EasingMode="EaseOut" EasingType="Cubic" />

</ctwa:ColorAnimation>

</ctwa:AnimationScope>

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

</Button>