[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] 화면 로드시 효과 애니메이션 만들기

■ 화면 로드시 효과 애니메이션을 만드는 방법을 보여준다.

※ 비주얼 스튜디오에서 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">
    <Grid>
        <Border Height="320">
            <Image
                VerticalAlignment="Center"
                Source="ms-appx:///Assets/Bloom.jpg" />
        </Border>
        <TextBlock
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            TextWrapping="Wrap"
            FontSize="36"
            FontWeight="SemiBold"
            Foreground="White"
            Text="This is sample text" />
        <ctwm:UIElementExtensions.VisualFactory>
            <ctwm:PipelineVisualFactory>
                <ctwm:LuminanceToAlphaEffect />
                <ctwm:OpacityEffect Value="0.4" />
                <ctwm:BlendEffect
                    Mode="Multiply"
                    Source="{ctwm:BackdropSource}" />
                <ctwm:BlurEffect x:Name="blurEffect"
                    Amount="32"
                    IsAnimatable="True" />
                <ctwm:SaturationEffect x:Name="saturationEffect"
                    Value="0"
                    IsAnimatable="True" />
                <ctwm:ExposureEffect x:Name="exposureEffect"
                    Amount="1"
                    IsAnimatable="True" />
            </ctwm:PipelineVisualFactory>
        </ctwm:UIElementExtensions.VisualFactory>
        <ctwa:Explicit.Animations>
            <ctwa:AnimationSet x:Name="animationSet">
                <ctwa:AnimationScope
                    EasingMode="EaseOut"
                    Duration="00:00:03">
                    <ctwa:ClipAnimation
                        From="0 0 1280 0"
                        To="0" />
                    <ctwa:TranslationAnimation
                        From="32,0,0"
                        To="0" />
                    <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.2" />
                    <ctwa:ExposureEffectAnimation
                        Target="{x:Bind exposureEffect}"
                        From="1"
                        To="0" />
                </ctwa:AnimationScope>
            </ctwa:AnimationSet>
        </ctwa:Explicit.Animations>
        <mxi:Interaction.Behaviors>
            <mxic:EventTriggerBehavior EventName="Loaded">
                <ctwb:StartAnimationAction Animation="{x:Bind animationSet}" />
            </mxic:EventTriggerBehavior>
        </mxi:Interaction.Behaviors>
    </Grid>
</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">

<Grid>

<Image

VerticalAlignment="Center"

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

</Border>

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

TextWrapping="Wrap"

FontSize="36"

FontWeight="SemiBold"

Foreground="White"

Text="This is sample text" />

<ctwm:UIElementExtensions.VisualFactory>

<ctwm:PipelineVisualFactory>

<ctwm:LuminanceToAlphaEffect />

<ctwm:OpacityEffect Value="0.4" />

<ctwm:BlendEffect

Mode="Multiply"

Source="{ctwm:BackdropSource}" />

<ctwm:BlurEffect x:Name="blurEffect"

Amount="32"

IsAnimatable="True" />

<ctwm:SaturationEffect x:Name="saturationEffect"

Value="0"

IsAnimatable="True" />

<ctwm:ExposureEffect x:Name="exposureEffect"

Amount="1"

IsAnimatable="True" />

</ctwm:PipelineVisualFactory>

</ctwm:UIElementExtensions.VisualFactory>

<ctwa:Explicit.Animations>

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

<ctwa:AnimationScope

EasingMode="EaseOut"

Duration="00:00:03">

<ctwa:ClipAnimation

From="0 0 1280 0"

To="0" />

<ctwa:TranslationAnimation

From="32,0,0"

To="0" />

<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.2" />

<ctwa:ExposureEffectAnimation

Target="{x:Bind exposureEffect}"

From="1"

To="0" />

</ctwa:AnimationScope>

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

<mxi:Interaction.Behaviors>

<mxic:EventTriggerBehavior EventName="Loaded">

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

</mxic:EventTriggerBehavior>

</mxi:Interaction.Behaviors>

</Grid>

</Page>

TestProject.zip