[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] SaturationEffectAnimation 엘리먼트 : 채도 효과 애니메이션 만들기

■ SaturationEffectAnimation 엘리먼트를 사용해 채도 효과 애니메이션을 만드는 방법을 보여준다.

※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Border Height="280">
        <Image
            VerticalAlignment="Center"
            Source="ms-appx:///Assets/Bloom.jpg" />
        <ctwm:UIElementExtensions.VisualFactory>
            <ctwm:PipelineVisualFactory>
                <ctwm:SaturationEffect x:Name="saturationEffect"
                    IsAnimatable="True" />
            </ctwm:PipelineVisualFactory>
        </ctwm:UIElementExtensions.VisualFactory>
        <ctwa:Explicit.Animations>
            <ctwa:AnimationSet x:Name="animationSet"
                IsSequential="True">
                <ctwa:SaturationEffectAnimation
                    Target="{x:Bind saturationEffect}"
                    EasingMode="EaseOut"
                    EasingType="Linear"
                    Duration="00:00:03"
                    From="5"
                    To="0" />
                <ctwa:SaturationEffectAnimation
                    Target="{x:Bind saturationEffect}"
                    EasingMode="EaseOut"
                    EasingType="Linear"
                    Duration="00:00:03"
                    From="0"
                    To="5" />
            </ctwa:AnimationSet>
        </ctwa:Explicit.Animations>
        <mxi:Interaction.Behaviors>
            <mxic:EventTriggerBehavior EventName="Loaded">
                <ctwb:StartAnimationAction Animation="{x:Bind animationSet}" />
            </mxic:EventTriggerBehavior>
        </mxi:Interaction.Behaviors>
    </Border>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/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"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Image

VerticalAlignment="Center"

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

<ctwm:UIElementExtensions.VisualFactory>

<ctwm:PipelineVisualFactory>

<ctwm:SaturationEffect x:Name="saturationEffect"

IsAnimatable="True" />

</ctwm:PipelineVisualFactory>

</ctwm:UIElementExtensions.VisualFactory>

<ctwa:Explicit.Animations>

<ctwa:AnimationSet x:Name="animationSet"

IsSequential="True">

<ctwa:SaturationEffectAnimation

Target="{x:Bind saturationEffect}"

EasingMode="EaseOut"

EasingType="Linear"

Duration="00:00:03"

From="5"

To="0" />

<ctwa:SaturationEffectAnimation

Target="{x:Bind saturationEffect}"

EasingMode="EaseOut"

EasingType="Linear"

Duration="00:00:03"

From="0"

To="5" />

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

<mxi:Interaction.Behaviors>

<mxic:EventTriggerBehavior EventName="Loaded">

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

</mxic:EventTriggerBehavior>

</mxi:Interaction.Behaviors>

</Border>

</Page>

TestProject.zip