[C#/WPF] BounceEase 엘리먼트 : 사각형 높이 늘리기

■ BounceEase 엘리먼트를 사용해 사각형의 높이를 늘리는 애니메이션을 만드는 방법을 보여준다.

▶ 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
        Width="400"
        Height="400"
        Background="LightGray">
        <Rectangle Name="rectangle"
            Width="200"
            Height="30"
            Fill="Blue">
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Rectangle.MouseDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="rectangle"
                                    Storyboard.TargetProperty="Height"
                                    Duration="00:00:03"
                                    From="30"
                                    To="200">
                                    <DoubleAnimation.EasingFunction>
                                        <BounceEase
                                            EasingMode="EaseOut"
                                            Bounces="2"
                                            Bounciness="2" />
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>
    </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

Width="400"

Height="400"

Background="LightGray">

<Rectangle Name="rectangle"

Width="200"

Height="30"

Fill="Blue">

<Rectangle.Triggers>

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="Height"

Duration="00:00:03"

From="30"

To="200">

<DoubleAnimation.EasingFunction>

<BounceEase

EasingMode="EaseOut"

Bounces="2"

Bounciness="2" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

</Border>

</Window>

TestProject.zip