ANIMATION Archives - 17 중 2 번째 페이지

[C#/WINUI3/.NET8] 윈도우 왼쪽 패널 확장/축소 애니메이션 만들기

■ 윈도우의 왼쪽 패널을 확장하거나 축소시키는 애니메이션을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를

[C#/WINUI3] Visual 클래스 : StartAnimation 메소드를 사용해 애니메이션 시작하기

■ Visual 클래스의 StartAnimation 메소드를 사용해 애니메이션을 시작하는 방법을 보여준다. ▶ 예제 코드 (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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Border Name="border"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Width="200"
        Height="200"
        Background="{ThemeResource AccentAAFillColorDefaultBrush}" />
</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"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Border Name="border"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="200"

Height="200"

Background="{ThemeResource AccentAAFillColorDefaultBrush}" />

</Page>

▶ 예제 코드 (C#)


using System;

using Microsoft.UI.Composition;
using Microsoft.UI.Xaml.Hosting;

Visual borderVisual = ElementCompositionPreview.GetElementVisual(this.border);

Compositor compositor = borderVisual.Compositor;

ScalarKeyFrameAnimation scalarKeyFrameAnimation = compositor.CreateScalarKeyFrameAnimation();

scalarKeyFrameAnimation.InsertKeyFrame(0, 0);
scalarKeyFrameAnimation.InsertKeyFrame(1, 1);

scalarKeyFrameAnimation.Duration = TimeSpan.FromSeconds(3);

borderVisual.StartAnimation("Opacity", scalarKeyFrameAnimation);

using System;

using Microsoft.UI.Composition;

using Microsoft.UI.Xaml.Hosting;

Visual borderVisual = ElementCompositionPreview.GetElementVisual(this.border);

Compositor compositor = borderVisual.Compositor;

ScalarKeyFrameAnimation scalarKeyFrameAnimation = compositor.CreateScalarKeyFrameAnimation();

scalarKeyFrameAnimation.InsertKeyFrame(0, 0);

scalarKeyFrameAnimation.InsertKeyFrame(1, 1);

scalarKeyFrameAnimation.Duration = TimeSpan.FromSeconds(3);

borderVisual.StartAnimation("Opacity", scalarKeyFrameAnimation);

[C#/WINUI3/.NET8] Compositor 클래스 : CreateScalarKeyFrameAnimation 메소드를 사용해 ScalarKeyFrameAnimation 객체 만들기

■ Compositor 클래스의 CreateScalarKeyFrameAnimation 메소드를 사용해 ScalarKeyFrameAnimation 객체를 만드는 방법을 보여준다. ▶ 예제 코드 (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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Border Name="border"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Width="200"
        Height="200"
        Background="{ThemeResource AccentAAFillColorDefaultBrush}" />
</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"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Border Name="border"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="200"

Height="200"

Background="{ThemeResource AccentAAFillColorDefaultBrush}" />

</Page>

▶ 예제 코드 (C#)


using System;

using Microsoft.UI.Composition;
using Microsoft.UI.Xaml.Hosting;

Visual borderVisual = ElementCompositionPreview.GetElementVisual(this.border);

Compositor compositor = borderVisual.Compositor;

ScalarKeyFrameAnimation scalarKeyFrameAnimation = compositor.CreateScalarKeyFrameAnimation();

scalarKeyFrameAnimation.InsertKeyFrame(0, 0);
scalarKeyFrameAnimation.InsertKeyFrame(1, 1);

scalarKeyFrameAnimation.Duration = TimeSpan.FromSeconds(3);

using System;

using Microsoft.UI.Composition;

using Microsoft.UI.Xaml.Hosting;

Visual borderVisual = ElementCompositionPreview.GetElementVisual(this.border);

Compositor compositor = borderVisual.Compositor;

ScalarKeyFrameAnimation scalarKeyFrameAnimation = compositor.CreateScalarKeyFrameAnimation();

scalarKeyFrameAnimation.InsertKeyFrame(0, 0);

scalarKeyFrameAnimation.InsertKeyFrame(1, 1);

scalarKeyFrameAnimation.Duration = TimeSpan.FromSeconds(3);

[C#/WINUI3] Border 클래스 : Opacity 속성에서 FADE IN 애니메이션 만들기

■ Border 클래스의 Opacity 속성에서 FADE IN 애니메이션을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] TranslationAnimation 엘리먼트 : KeyFrames 속성에서 Vector3KeyFrame 엘리먼트 사용하기

■ TranslationAnimation 엘리먼트의 KeyFrames 속성에서 Vector3KeyFrame 엘리먼트를 사용하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] OpacityAnimation 엘리먼트 : Delay/EasingMode/EasingType 속성 사용하기

■ OpacityAnimation 엘리먼트의 Delay/EasingMode/EasingType 속성을 사용하는 방법을 보여준다. ▶ 예제 코드 (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"

<Button
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Width="150"
    Height="100">
    <ctwa:Explicit.Animations>
        <ctwa:AnimationSet x:Name="moveAnimationSet"
            IsSequential="True">
            <ctwa:StartAnimationActivity Animation="{Binding ElementName=fadeOutAnimationSet}" />
            <ctwa:InvokeActionsActivity>
                <mxic:ChangePropertyAction
                    TargetObject="{Binding ElementName=textBlock}"
                    PropertyName="Foreground"
                    Value="Purple" />
            </ctwa:InvokeActionsActivity>
            <ctwa:StartAnimationActivity
                Animation="{Binding ElementName=fadeInAnimationSet}"
                Delay="00:00:02" />
        </ctwa:AnimationSet>
    </ctwa:Explicit.Animations>
    <TextBlock Name="textBlock"
        FontSize="20"
        Text="🦙 Text">
        <ctwa:Explicit.Animations>
            <ctwa:AnimationSet x:Name="fadeOutAnimationSet">
                <ctwa:OpacityAnimation
                    Delay="0"
                    EasingMode="EaseOut"
                    EasingType="Linear"
                    Duration="00:00:01"
                    From="1"
                    To="0" />
            </ctwa:AnimationSet>
            <ctwa:AnimationSet x:Name="fadeInAnimationSet">
                <ctwa:OpacityAnimation
                    Delay="0"
                    EasingMode="EaseOut"
                    EasingType="Linear"
                    Duration="00:00:01"
                    From="0"
                    To="1" />
            </ctwa:AnimationSet>
        </ctwa:Explicit.Animations>
    </TextBlock>
    <mxi:Interaction.Behaviors>
        <mxic:EventTriggerBehavior EventName="Click">
            <mxic:ChangePropertyAction
                TargetObject="{Binding ElementName=textBlock}"
                PropertyName="Foreground"
                Value="White" />
            <ctwb:StartAnimationAction Animation="{Binding ElementName=moveAnimationSet}" />
        </mxic:EventTriggerBehavior>
    </mxi:Interaction.Behaviors>
</Button>
</Page>

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"

<Button

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="150"

Height="100">

<ctwa:Explicit.Animations>

<ctwa:AnimationSet x:Name="moveAnimationSet"

IsSequential="True">

<ctwa:StartAnimationActivity Animation="{Binding ElementName=fadeOutAnimationSet}" />

<ctwa:InvokeActionsActivity>

<mxic:ChangePropertyAction

TargetObject="{Binding ElementName=textBlock}"

PropertyName="Foreground"

Value="Purple" />

</ctwa:InvokeActionsActivity>

<ctwa:StartAnimationActivity

Animation="{Binding ElementName=fadeInAnimationSet}"

Delay="00:00:02" />

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

<TextBlock Name="textBlock"

FontSize="20"

Text="🦙 Text">

<ctwa:Explicit.Animations>

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

<ctwa:OpacityAnimation

Delay="0"

EasingMode="EaseOut"

EasingType="Linear"

Duration="00:00:01"

From="1"

To="0" />

</ctwa:AnimationSet>

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

<ctwa:OpacityAnimation

Delay="0"

EasingMode="EaseOut"

EasingType="Linear"

Duration="00:00:01"

From="0"

To="1" />

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

</TextBlock>

<mxi:Interaction.Behaviors>

<mxic:EventTriggerBehavior EventName="Click">

<mxic:ChangePropertyAction

TargetObject="{Binding ElementName=textBlock}"

PropertyName="Foreground"

Value="White" />

<ctwb:StartAnimationAction Animation="{Binding ElementName=moveAnimationSet}" />

</mxic:EventTriggerBehavior>

</mxi:Interaction.Behaviors>

</Button>

</Page>

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] StartAnimationAction 엘리먼트 : Animation 속성을 사용해 AnimationSet 객체 설정하기

■ StartAnimationAction 엘리먼트의 Animation 속성을 사용해 AnimationSet 객체를 설정하는 방법을 보여준다. ▶ 예제 코드 (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:SepiaEffect x:Name="sepiaEffect"
                IsAnimatable="True" />
        </ctwm:PipelineVisualFactory>
    </ctwm:UIElementExtensions.VisualFactory>
    <ctwa:Explicit.Animations>
        <ctwa:AnimationSet x:Name="animationSet"
            IsSequential="True">
            <ctwa:SepiaEffectAnimation
                Target="{x:Bind sepiaEffect}"
                EasingMode="EaseOut"
                EasingType="Linear"
                Duration="00:00:03"
                From="0"
                To="1" />
            <ctwa:SepiaEffectAnimation
                Target="{x:Bind sepiaEffect}"
                EasingMode="EaseOut"
                EasingType="Linear"
                Duration="00:00:03"
                From="1"
                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:SepiaEffect x:Name="sepiaEffect"

IsAnimatable="True" />

</ctwm:PipelineVisualFactory>

</ctwm:UIElementExtensions.VisualFactory>

<ctwa:Explicit.Animations>

<ctwa:AnimationSet x:Name="animationSet"

IsSequential="True">

<ctwa:SepiaEffectAnimation

Target="{x:Bind sepiaEffect}"

EasingMode="EaseOut"

EasingType="Linear"

Duration="00:00:03"

From="0"

To="1" />

<ctwa:SepiaEffectAnimation

Target="{x:Bind sepiaEffect}"

EasingMode="EaseOut"

EasingType="Linear"

Duration="00:00:03"

From="1"

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>

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] SepiaEffectAnimation 엘리먼트 : 세피아 효과 애니메이션 만들기

■ SepiaEffectAnimation 엘리먼트를 사용해 세피아 효과 애니메이션을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를

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

■ SaturationEffectAnimation 엘리먼트를 사용해 채도 효과 애니메이션을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] HueRotationEffectAnimation 엘리먼트 : HUE 회전 효과 애니메이션 만들기

■ HueRotationEffectAnimation 엘리먼트를 사용해 HUE 회전 효과 애니메이션을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType

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

■ ExposureEffectAnimation 엘리먼트를 사용해 노출 효과 애니메이션을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] CrossFadeEffectAnimation 엘리먼트 : 크로스 페이드 효과 애니메이션 만들기

■ CrossFadeEffectAnimation 엘리먼트를 사용해 크로스 페이드 효과 애니메이션을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType

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

■ ColorEffectAnimation 엘리먼트를 사용해 색상 효과 애니메이션을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를

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

■ BlurEffectAnimation 엘리먼트를 사용해 BLUR 효과 애니메이션을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를

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

■ 화면 로드시 효과 애니메이션을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] ExposureEffectAnimation 엘리먼트 : Target/From/To 속성을 사용해 노출 효과 애니메이션 만들기

■ ExposureEffectAnimation 엘리먼트의 Target/From/To 속성을 사용해 노출 효과 애니메이션을 만드는 방법을 보여준다. ▶ 예제 코드 (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>

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] SaturationEffectAnimation 엘리먼트 : Target/From/To 속성을 사용해 채도 효과 애니메이션 만들기

■ SaturationEffectAnimation 엘리먼트의 Target/From/To 속성을 사용해 채도 효과 애니메이션을 만드는 방법을 보여준다. ▶ 예제 코드 (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>

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] BlurEffectAnimation 엘리먼트 : Target/From/To 속성을 사용해 BLUR 효과 애니메이션 만들기

■ BlurEffectAnimation 엘리먼트의 Target/From/To 속성을 사용해 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>

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] PipelineVisualFactory 엘리먼트 : Source 속성을 사용해 효과 애니메이션 만들기

■ PipelineVisualFactory 엘리먼트의 Source 속성을 사용해 효과 애니메이션을 만드는 방법을 보여준다. ▶ 예제 코드 (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>

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] UIElementExtensions 엘리먼트 : VisualFactory 첨부 속성을 사용해 PipelineVisualFactory 객체 설정하기

■ UIElementExtensions 엘리먼트의 VisualFactory 첨부 속성을 사용해 PipelineVisualFactory 객체를 설정하는 방법을 보여준다. ※ 이 예제 코드에서 사용된 UIElementExtensions 엘리먼트는 CommunityToolkit.WinUI.Media 누겟(버전 :

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] ChangePropertyAction 엘리먼트 : TargetObject/PropertyName/Value 속성을 사용해 특정 객체 속성값 설정하기

■ ChangePropertyAction 엘리먼트의 TargetObject/PropertyName/Value 속성을 사용해 특정 객체 속성값을 설정하는 방법을 보여준다. ▶ 예제 코드 (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"

<Button
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Width="150"
    Height="100">
    <ctwa:Explicit.Animations>
        <ctwa:AnimationSet x:Name="moveAnimationSet"
            IsSequential="True">
            <ctwa:StartAnimationActivity Animation="{Binding ElementName=fadeOutAnimationSet}" />
            <ctwa:InvokeActionsActivity>
                <mxic:ChangePropertyAction
                    TargetObject="{Binding ElementName=textBlock}"
                    PropertyName="Foreground"
                    Value="Purple" />
            </ctwa:InvokeActionsActivity>
            <ctwa:StartAnimationActivity
                Animation="{Binding ElementName=fadeInAnimationSet}"
                Delay="00:00:02" />
        </ctwa:AnimationSet>
    </ctwa:Explicit.Animations>
    <TextBlock Name="textBlock"
        FontSize="20"
        Text="🦙 Text">
        <ctwa:Explicit.Animations>
            <ctwa:AnimationSet x:Name="fadeOutAnimationSet">
                <ctwa:OpacityAnimation
                    Delay="0"
                    EasingMode="EaseOut"
                    EasingType="Linear"
                    Duration="00:00:01"
                    From="1"
                    To="0" />
            </ctwa:AnimationSet>
            <ctwa:AnimationSet x:Name="fadeInAnimationSet">
                <ctwa:OpacityAnimation
                    Delay="0"
                    EasingMode="EaseOut"
                    EasingType="Linear"
                    Duration="00:00:01"
                    From="0"
                    To="1" />
            </ctwa:AnimationSet>
        </ctwa:Explicit.Animations>
    </TextBlock>
    <mxi:Interaction.Behaviors>
        <mxic:EventTriggerBehavior EventName="Click">
            <mxic:ChangePropertyAction
                TargetObject="{Binding ElementName=textBlock}"
                PropertyName="Foreground"
                Value="White" />
            <ctwb:StartAnimationAction Animation="{Binding ElementName=moveAnimationSet}" />
        </mxic:EventTriggerBehavior>
    </mxi:Interaction.Behaviors>
</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"

<Button

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="150"

Height="100">

<ctwa:Explicit.Animations>

<ctwa:AnimationSet x:Name="moveAnimationSet"

IsSequential="True">

<ctwa:StartAnimationActivity Animation="{Binding ElementName=fadeOutAnimationSet}" />

<ctwa:InvokeActionsActivity>

<mxic:ChangePropertyAction

TargetObject="{Binding ElementName=textBlock}"

PropertyName="Foreground"

Value="Purple" />

</ctwa:InvokeActionsActivity>

<ctwa:StartAnimationActivity

Animation="{Binding ElementName=fadeInAnimationSet}"

Delay="00:00:02" />

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

<TextBlock Name="textBlock"

FontSize="20"

Text="🦙 Text">

<ctwa:Explicit.Animations>

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

<ctwa:OpacityAnimation

Delay="0"

EasingMode="EaseOut"

EasingType="Linear"

Duration="00:00:01"

From="1"

To="0" />

</ctwa:AnimationSet>

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

<ctwa:OpacityAnimation

Delay="0"

EasingMode="EaseOut"

EasingType="Linear"

Duration="00:00:01"

From="0"

To="1" />

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

</TextBlock>

<mxi:Interaction.Behaviors>

<mxic:EventTriggerBehavior EventName="Click">

<mxic:ChangePropertyAction

TargetObject="{Binding ElementName=textBlock}"

PropertyName="Foreground"

Value="White" />

<ctwb:StartAnimationAction Animation="{Binding ElementName=moveAnimationSet}" />

</mxic:EventTriggerBehavior>

</mxi:Interaction.Behaviors>

</Button>

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] EventTriggerBehavior 엘리먼트 : EventName 속성을 사용해 특정 이벤트 호출시 처리하기

■ EventTriggerBehavior 엘리먼트의 EventName 속성을 사용해 특정 이벤트 호출시 처리하는 방법을 보여준다. ▶ 예제 코드 (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"

<Button
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Width="150"
    Height="100">
    <ctwa:Explicit.Animations>
        <ctwa:AnimationSet x:Name="moveAnimationSet"
            IsSequential="True">
            <ctwa:StartAnimationActivity Animation="{Binding ElementName=fadeOutAnimationSet}" />
            <ctwa:InvokeActionsActivity>
                <mxic:ChangePropertyAction
                    TargetObject="{Binding ElementName=textBlock}"
                    PropertyName="Foreground"
                    Value="Purple" />
            </ctwa:InvokeActionsActivity>
            <ctwa:StartAnimationActivity
                Animation="{Binding ElementName=fadeInAnimationSet}"
                Delay="00:00:02" />
        </ctwa:AnimationSet>
    </ctwa:Explicit.Animations>
    <TextBlock Name="textBlock"
        FontSize="20"
        Text="🦙 Text">
        <ctwa:Explicit.Animations>
            <ctwa:AnimationSet x:Name="fadeOutAnimationSet">
                <ctwa:OpacityAnimation
                    Delay="0"
                    EasingMode="EaseOut"
                    EasingType="Linear"
                    Duration="00:00:01"
                    From="1"
                    To="0" />
            </ctwa:AnimationSet>
            <ctwa:AnimationSet x:Name="fadeInAnimationSet">
                <ctwa:OpacityAnimation
                    Delay="0"
                    EasingMode="EaseOut"
                    EasingType="Linear"
                    Duration="00:00:01"
                    From="0"
                    To="1" />
            </ctwa:AnimationSet>
        </ctwa:Explicit.Animations>
    </TextBlock>
    <mxi:Interaction.Behaviors>
        <mxic:EventTriggerBehavior EventName="Click">
            <mxic:ChangePropertyAction
                TargetObject="{Binding ElementName=textBlock}"
                PropertyName="Foreground"
                Value="White" />
            <ctwb:StartAnimationAction Animation="{Binding ElementName=moveAnimationSet}" />
        </mxic:EventTriggerBehavior>
    </mxi:Interaction.Behaviors>
</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"

<Button

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="150"

Height="100">

<ctwa:Explicit.Animations>

<ctwa:AnimationSet x:Name="moveAnimationSet"

IsSequential="True">

<ctwa:StartAnimationActivity Animation="{Binding ElementName=fadeOutAnimationSet}" />

<ctwa:InvokeActionsActivity>

<mxic:ChangePropertyAction

TargetObject="{Binding ElementName=textBlock}"

PropertyName="Foreground"

Value="Purple" />

</ctwa:InvokeActionsActivity>

<ctwa:StartAnimationActivity

Animation="{Binding ElementName=fadeInAnimationSet}"

Delay="00:00:02" />

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

<TextBlock Name="textBlock"

FontSize="20"

Text="🦙 Text">

<ctwa:Explicit.Animations>

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

<ctwa:OpacityAnimation

Delay="0"

EasingMode="EaseOut"

EasingType="Linear"

Duration="00:00:01"

From="1"

To="0" />

</ctwa:AnimationSet>

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

<ctwa:OpacityAnimation

Delay="0"

EasingMode="EaseOut"

EasingType="Linear"

Duration="00:00:01"

From="0"

To="1" />

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

</TextBlock>

<mxi:Interaction.Behaviors>

<mxic:EventTriggerBehavior EventName="Click">

<mxic:ChangePropertyAction

TargetObject="{Binding ElementName=textBlock}"

PropertyName="Foreground"

Value="White" />

<ctwb:StartAnimationAction Animation="{Binding ElementName=moveAnimationSet}" />

</mxic:EventTriggerBehavior>

</mxi:Interaction.Behaviors>

</Button>

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] InvokeActionsActivity 엘리먼트 : Action 호출하기

■ InvokeActionsActivity 엘리먼트를 사용해 Action을 호출하는 방법을 보여준다. ▶ 예제 코드 (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"

<Button
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Width="150"
    Height="100">
    <ctwa:Explicit.Animations>
        <ctwa:AnimationSet x:Name="moveAnimationSet"
            IsSequential="True">
            <ctwa:StartAnimationActivity Animation="{Binding ElementName=fadeOutAnimationSet}" />
            <ctwa:InvokeActionsActivity>
                <mxic:ChangePropertyAction
                    TargetObject="{Binding ElementName=textBlock}"
                    PropertyName="Foreground"
                    Value="Purple" />
            </ctwa:InvokeActionsActivity>
            <ctwa:StartAnimationActivity
                Animation="{Binding ElementName=fadeInAnimationSet}"
                Delay="00:00:02" />
        </ctwa:AnimationSet>
    </ctwa:Explicit.Animations>
    <TextBlock Name="textBlock"
        FontSize="20"
        Text="🦙 Text">
        <ctwa:Explicit.Animations>
            <ctwa:AnimationSet x:Name="fadeOutAnimationSet">
                <ctwa:OpacityAnimation
                    Delay="0"
                    EasingMode="EaseOut"
                    EasingType="Linear"
                    Duration="00:00:01"
                    From="1"
                    To="0" />
            </ctwa:AnimationSet>
            <ctwa:AnimationSet x:Name="fadeInAnimationSet">
                <ctwa:OpacityAnimation
                    Delay="0"
                    EasingMode="EaseOut"
                    EasingType="Linear"
                    Duration="00:00:01"
                    From="0"
                    To="1" />
            </ctwa:AnimationSet>
        </ctwa:Explicit.Animations>
    </TextBlock>
    <mxi:Interaction.Behaviors>
        <mxic:EventTriggerBehavior EventName="Click">
            <mxic:ChangePropertyAction
                TargetObject="{Binding ElementName=textBlock}"
                PropertyName="Foreground"
                Value="White" />
            <ctwb:StartAnimationAction Animation="{Binding ElementName=moveAnimationSet}" />
        </mxic:EventTriggerBehavior>
    </mxi:Interaction.Behaviors>
</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"

<Button

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="150"

Height="100">

<ctwa:Explicit.Animations>

<ctwa:AnimationSet x:Name="moveAnimationSet"

IsSequential="True">

<ctwa:StartAnimationActivity Animation="{Binding ElementName=fadeOutAnimationSet}" />

<ctwa:InvokeActionsActivity>

<mxic:ChangePropertyAction

TargetObject="{Binding ElementName=textBlock}"

PropertyName="Foreground"

Value="Purple" />

</ctwa:InvokeActionsActivity>

<ctwa:StartAnimationActivity

Animation="{Binding ElementName=fadeInAnimationSet}"

Delay="00:00:02" />

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

<TextBlock Name="textBlock"

FontSize="20"

Text="🦙 Text">

<ctwa:Explicit.Animations>

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

<ctwa:OpacityAnimation

Delay="0"

EasingMode="EaseOut"

EasingType="Linear"

Duration="00:00:01"

From="1"

To="0" />

</ctwa:AnimationSet>

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

<ctwa:OpacityAnimation

Delay="0"

EasingMode="EaseOut"

EasingType="Linear"

Duration="00:00:01"

From="0"

To="1" />

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

</TextBlock>

<mxi:Interaction.Behaviors>

<mxic:EventTriggerBehavior EventName="Click">

<mxic:ChangePropertyAction

TargetObject="{Binding ElementName=textBlock}"

PropertyName="Foreground"

Value="White" />

<ctwb:StartAnimationAction Animation="{Binding ElementName=moveAnimationSet}" />

</mxic:EventTriggerBehavior>

</mxi:Interaction.Behaviors>

</Button>

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] Interaction 엘리먼트 : Behaviors 첨부 속성을 사용해 버튼 클릭시 애니메이션 만들기

■ Interaction 엘리먼트의 Behaviors 첨부 속성을 사용해 버튼 클릭시 애니메이션을 만드는 방법을 보여준다 ※ 이 예제 코드에서 사용된 Interaction 엘리먼트는 CommunityToolkit.WinUI.Behaviors 누겟(버전

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] StartAnimationActivity 엘리먼트 : Animation 속성을 사용해 애니메이션 시작하기

■ StartAnimationActivity 엘리먼트의 Animation 속성을 사용해 애니메이션을 시작하는 방법을 보여준다. ※ 이 예제 코드에서 사용된 StartAnimationActivity 엘리먼트는 CommunityToolkit.WinUI.Animations 누겟(버전 : 8.0.240109)을 참조한다.