[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] HueRotationEffect 엘리먼트 : Angle/IsAnimatable 속성을 사용해 HUE 회전 효과 설정하기

■ HueRotationEffect 엘리먼트의 Angle/IsAnimatable 속성을 사용해 HUE 회전 효과를 설정하는 방법을 보여준다.

▶ 예제 코드 (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"
xmlns:ctwm="using:CommunityToolkit.WinUI.Media"

<Border Height="280">
    <Image VerticalAlignment="Center"
            Source="ms-appx:///Assets/Bloom.jpg" />
    <ctwm:UIElementExtensions.VisualFactory>
        <ctwm:PipelineVisualFactory>
            <ctwm:HueRotationEffect x:Name="hueRotationEffect"
                Angle="0"
                IsAnimatable="True" />
        </ctwm:PipelineVisualFactory>
    </ctwm:UIElementExtensions.VisualFactory>
    <ctwa:Explicit.Animations>
        <ctwa:AnimationSet x:Name="animationSet"
            IsSequential="True">
            <ctwa:HueRotationEffectAnimation
                Target="{x:Bind hueRotationEffect}"
                EasingMode="EaseOut"
                EasingType="Linear"
                Duration="00:00:03"
                From="0"
                To="6" />
            <ctwa:HueRotationEffectAnimation
                Target="{x:Bind hueRotationEffect}"
                EasingMode="EaseOut"
                EasingType="Linear"
                Duration="00:00:03"
                From="6"
                To="0" />
        </ctwa:AnimationSet>
    </ctwa:Explicit.Animations>
    <mxi:Interaction.Behaviors>
        <mxic:EventTriggerBehavior EventName="Loaded">
            <ctwb:StartAnimationAction Animation="{x:Bind animationSet}" />
        </mxic:EventTriggerBehavior>
    </mxi:Interaction.Behaviors>
</Border>

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"

xmlns:ctwm="using:CommunityToolkit.WinUI.Media"

<Image VerticalAlignment="Center"

Source="ms-appx:///Assets/Bloom.jpg" />

<ctwm:UIElementExtensions.VisualFactory>

<ctwm:PipelineVisualFactory>

<ctwm:HueRotationEffect x:Name="hueRotationEffect"

Angle="0"

IsAnimatable="True" />

</ctwm:PipelineVisualFactory>

</ctwm:UIElementExtensions.VisualFactory>

<ctwa:Explicit.Animations>

<ctwa:AnimationSet x:Name="animationSet"

IsSequential="True">

<ctwa:HueRotationEffectAnimation

Target="{x:Bind hueRotationEffect}"

EasingMode="EaseOut"

EasingType="Linear"

Duration="00:00:03"

From="0"

To="6" />

<ctwa:HueRotationEffectAnimation

Target="{x:Bind hueRotationEffect}"

EasingMode="EaseOut"

EasingType="Linear"

Duration="00:00:03"

From="6"

To="0" />

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

<mxi:Interaction.Behaviors>

<mxic:EventTriggerBehavior EventName="Loaded">

<ctwb:StartAnimationAction Animation="{x:Bind animationSet}" />

</mxic:EventTriggerBehavior>

</mxi:Interaction.Behaviors>

</Border>