[C#/WPF] ThicknessAnimationUsingKeyFrames 엘리먼트 : 키 프레임을 사용해 두께 값에 애니메이션 효과 주기

■ ThicknessAnimationUsingKeyFrames 엘리먼트에서 키 프레임을 사용해 두께 값에 애니메이션 효과를 주는 방법을 보여준다.

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Border
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Margin="10"
        BorderThickness="1"
        BorderBrush="#ccccff"
        Background="#99ffffff"
        Padding="20"  >
        <Border.Triggers>
            <EventTrigger RoutedEvent="Border.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <ThicknessAnimationUsingKeyFrames
                            Storyboard.TargetProperty="BorderThickness"
                            Duration="00:00:05"
                            RepeatBehavior="Forever"
                            FillBehavior="HoldEnd">
                            <ThicknessAnimationUsingKeyFrames.KeyFrames>
                                <LinearThicknessKeyFrame KeyTime="00:00:00.5">
                                    <LinearThicknessKeyFrame.Value>
                                        <Thickness
                                            Left="8"
                                            Top="6"
                                            Right="8"
                                            Bottom="6" />
                                    </LinearThicknessKeyFrame.Value>
                                </LinearThicknessKeyFrame>
                                <DiscreteThicknessKeyFrame KeyTime="00:00:01">
                                    <DiscreteThicknessKeyFrame.Value>
                                        <Thickness
                                            Left="28"
                                            Top="24"
                                            Right="28"
                                            Bottom="24" />
                                    </DiscreteThicknessKeyFrame.Value>
                                </DiscreteThicknessKeyFrame>
                                <SplineThicknessKeyFrame
                                    KeyTime="00:00:03"
                                    KeySpline="0.6 0.0 0.9 0.00">
                                    <SplineThicknessKeyFrame.Value>
                                        <Thickness
                                            Left="1"
                                            Right="1"
                                            Top="1"
                                            Bottom="8" />
                                    </SplineThicknessKeyFrame.Value>
                                </SplineThicknessKeyFrame>
                            </ThicknessAnimationUsingKeyFrames.KeyFrames>
                        </ThicknessAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Border.Triggers>
        <TextBlock>
            ThicknessAnimationUsingKeyFrames 엘리먼트 : 키 프레임을 사용해 두께 값에 애니메이션 효과 주기
        </TextBlock>
    </Border>
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Border

HorizontalAlignment="Center"

VerticalAlignment="Center"

Margin="10"

BorderThickness="1"

BorderBrush="#ccccff"

Background="#99ffffff"

Padding="20" >

<Border.Triggers>

<ThicknessAnimationUsingKeyFrames

Storyboard.TargetProperty="BorderThickness"

Duration="00:00:05"

RepeatBehavior="Forever"

FillBehavior="HoldEnd">

<ThicknessAnimationUsingKeyFrames.KeyFrames>

<LinearThicknessKeyFrame.Value>

<Thickness

Left="8"

Top="6"

Right="8"

Bottom="6" />

</LinearThicknessKeyFrame.Value>

</LinearThicknessKeyFrame>

<DiscreteThicknessKeyFrame.Value>

<Thickness

Left="28"

Top="24"

Right="28"

Bottom="24" />

</DiscreteThicknessKeyFrame.Value>

</DiscreteThicknessKeyFrame>

<SplineThicknessKeyFrame

KeyTime="00:00:03"

KeySpline="0.6 0.0 0.9 0.00">

<SplineThicknessKeyFrame.Value>

<Thickness

Left="1"

Right="1"

Top="1"

Bottom="8" />

</SplineThicknessKeyFrame.Value>

</SplineThicknessKeyFrame>

</ThicknessAnimationUsingKeyFrames.KeyFrames>

</ThicknessAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Border.Triggers>

ThicknessAnimationUsingKeyFrames 엘리먼트 : 키 프레임을 사용해 두께 값에 애니메이션 효과 주기

</TextBlock>

</Border>

</Window>

TestProject.zip

.NETFRAMEWORK 2D ANIMATION C# GRAPHICS MICROSOFT WPF

icodebroker

[C#/WPF] ThicknessAnimationUsingKeyFrames 엘리먼트 : 키 프레임을 사용해 두께 값에 애니메이션 효과 주기