[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] BlurEffect 엘리먼트 : Amount/IsAnimatable 속성을 사용해 BLUR 효과 설정하기

■ BlurEffect 엘리먼트의 Amount/IsAnimatable 속성을 사용해 BLUR 효과를 설정하는 방법을 보여준다.

▶ 예제 코드 (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"

<Button
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Width="100"
    Height="100"
    Content="Start">
    <mxi:Interaction.Behaviors>
        <mxic:EventTriggerBehavior EventName="Click">
            <ctwb:StartAnimationAction Animation="{x:Bind buttonAnimationSet}" />
        </mxic:EventTriggerBehavior>
    </mxi:Interaction.Behaviors>
    <ctwm:UIElementExtensions.VisualFactory>
        <ctwm:PipelineVisualFactory Source="{ctwm:BackdropSource}">
            <ctwm:BlurEffect x:Name="blurEffect"
                Amount="0"
                IsAnimatable="True" />
            <ctwm:SaturationEffect x:Name="saturationEffect"
                Value="1"
                IsAnimatable="True" />
            <ctwm:ExposureEffect x:Name="exposureEffect"
                Amount="0"
                IsAnimatable="True"/>
        </ctwm:PipelineVisualFactory>
    </ctwm:UIElementExtensions.VisualFactory>
    <ctwa:Explicit.Animations>
        <ctwa:AnimationSet x:Name="buttonAnimationSet">
            <ctwa:AnimationScope
                Duration="00:00:01"
                EasingMode="EaseOut">
                <ctwa:ScaleAnimation
                    From="1.1"
                    To="1" />
                <ctwa:BlurEffectAnimation
                    Target="{x:Bind blurEffect}"
                    From="32"
                    To="0" />
                <ctwa:SaturationEffectAnimation
                    Target="{x:Bind saturationEffect}"
                    From="0"
                    To="1" />
                <ctwa:ExposureEffectAnimation
                    Target="{x:Bind exposureEffect}"
                    From="1"
                    To="0" />
            </ctwa:AnimationScope>
        </ctwa:AnimationSet>
    </ctwa:Explicit.Animations>
</Button>

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"

<Button

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="100"

Height="100"

Content="Start">

<mxi:Interaction.Behaviors>

<mxic:EventTriggerBehavior EventName="Click">

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

</mxic:EventTriggerBehavior>

</mxi:Interaction.Behaviors>

<ctwm:UIElementExtensions.VisualFactory>

<ctwm:PipelineVisualFactory Source="{ctwm:BackdropSource}">

<ctwm:BlurEffect x:Name="blurEffect"

Amount="0"

IsAnimatable="True" />

<ctwm:SaturationEffect x:Name="saturationEffect"

Value="1"

IsAnimatable="True" />

<ctwm:ExposureEffect x:Name="exposureEffect"

Amount="0"

IsAnimatable="True"/>

</ctwm:PipelineVisualFactory>

</ctwm:UIElementExtensions.VisualFactory>

<ctwa:Explicit.Animations>

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

<ctwa:AnimationScope

Duration="00:00:01"

EasingMode="EaseOut">

<ctwa:ScaleAnimation

From="1.1"

To="1" />

<ctwa:BlurEffectAnimation

Target="{x:Bind blurEffect}"

From="32"

To="0" />

<ctwa:SaturationEffectAnimation

Target="{x:Bind saturationEffect}"

From="0"

To="1" />

<ctwa:ExposureEffectAnimation

Target="{x:Bind exposureEffect}"

From="1"

To="0" />

</ctwa:AnimationScope>

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

</Button>