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

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

▶ 예제 코드 (XAML)


<Canvas x:Name="canvas"
    Background="White">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="Height"
                Duration="00:00:03"
                From="30"
                To="200">
                <DoubleAnimation.EasingFunction>
                    <BounceEase
                        EasingMode="EaseOut"
                        Bounces="3"
                        Bounciness="2" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Canvas.Resources>
    <Rectangle x:Name="rectangle"
        Canvas.Left="100"
        Canvas.Top="100"
        Width="200"
        Height="30"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
</Canvas>

<Canvas x:Name="canvas"

Background="White">

<Canvas.Resources>

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="Height"

Duration="00:00:03"

From="30"

To="200">

<DoubleAnimation.EasingFunction>

<BounceEase

EasingMode="EaseOut"

Bounces="3"

Bounciness="2" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

</Canvas.Resources>

<Rectangle x:Name="rectangle"

Canvas.Left="100"

Canvas.Top="100"

Width="200"

Height="30"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

this.storyboard.Begin();

}

#endregion