[C#/SILVERLIGHT] BounceEase 엘리먼트 : 타원 이동시키기

■ BounceEase 엘리먼트를 사용해 타원을 이동시키는 애니메이션을 만드는 방법을 보여준다.

▶ 예제 코드 (XAML)


<Canvas x:Name="canvas">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation
                Storyboard.TargetName="ellipse"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"
                Duration="00:00:05"
                BeginTime="00:00:00"
                To="270">
                <DoubleAnimation.EasingFunction>
                    <BounceEase
                        EasingMode="EaseOut"
                        Bounces="6" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Canvas.Resources>
    <Ellipse
        x:Name="ellipse"
        Canvas.Left="150"
        Canvas.Top="30"
        VerticalAlignment="Top"
        Width="100"
        Height="100"
        RenderTransformOrigin="0.5 0.5">
        <Ellipse.RenderTransform>
            <TransformGroup>
                <ScaleTransform     />
                <SkewTransform      />
                <RotateTransform    />
                <TranslateTransform />
            </TransformGroup>
        </Ellipse.RenderTransform>
        <Ellipse.Fill>
            <LinearGradientBrush
                StartPoint="0.5 0"
                EndPoint="0.5 1">
                <GradientStop Color="#ff0100ff" Offset="0" />
                <GradientStop Color="#ff908fff" Offset="1" />
            </LinearGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
</Canvas>

<Canvas.Resources>

<DoubleAnimation

Storyboard.TargetName="ellipse"

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"

Duration="00:00:05"

BeginTime="00:00:00"

To="270">

<DoubleAnimation.EasingFunction>

<BounceEase

EasingMode="EaseOut"

Bounces="6" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

</Canvas.Resources>

<Ellipse

x:Name="ellipse"

Canvas.Left="150"

Canvas.Top="30"

VerticalAlignment="Top"

Width="100"

Height="100"

RenderTransformOrigin="0.5 0.5">

<Ellipse.RenderTransform>

</TransformGroup>

</Ellipse.RenderTransform>

<Ellipse.Fill>

<LinearGradientBrush

StartPoint="0.5 0"

EndPoint="0.5 1">

</LinearGradientBrush>

</Ellipse.Fill>

</Ellipse>

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

this.ellipse.MouseLeftButtonDown += ellipse_MouseLeftButtonDown;

...

#region 타원 마우스 왼쪽 버튼 다운시 처리하기 - ellipse_MouseLeftButtonDown(sender, e)

/// <summary>
/// 타원 마우스 왼쪽 버튼 다운시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void ellipse_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

this.ellipse.MouseLeftButtonDown += ellipse_MouseLeftButtonDown;

...

#region 타원 마우스 왼쪽 버튼 다운시 처리하기 - ellipse_MouseLeftButtonDown(sender, e)

/// <summary>

/// 타원 마우스 왼쪽 버튼 다운시 처리하기

/// </summary>

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

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

private void ellipse_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

this.storyboard.Begin();

}

#endregion