[C#/WPF] Animatable 클래스 : BeginAnimation 메소드를 사용해 공 움직이기

■ Animatable 클래스의 BeginAnimation 메소드를 사용해 공을 움직이는 방법을 보여준다.

▶ 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="Animatable 클래스 : BeginAnimation 메소드를 사용해 공 움직이기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="10">
        <Border Name="border"
            BorderBrush="Black"
            BorderThickness="2"
            Background="White">
            <Ellipse Name="ellipse"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Width="25"
                Height="25"
                Stroke="Black"
                StrokeThickness="2"
                Fill="Lime">
                <Ellipse.RenderTransform>
                    <TranslateTransform x:Name="translateTransform" />
                </Ellipse.RenderTransform>
            </Ellipse>
        </Border>
    </Grid>
</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="Animatable 클래스 : BeginAnimation 메소드를 사용해 공 움직이기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Border Name="border"

BorderBrush="Black"

BorderThickness="2"

Background="White">

<Ellipse Name="ellipse"

HorizontalAlignment="Left"

VerticalAlignment="Top"

Width="25"

Height="25"

Stroke="Black"

StrokeThickness="2"

Fill="Lime">

<Ellipse.RenderTransform>

</Ellipse.RenderTransform>

</Ellipse>

</Border>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();

            this.border.MouseLeftButtonDown  += border_mouseLeftButtonDown;
            this.border.MouseRightButtonDown += border_mouseRightButtonDown;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 테두리 마우스 왼쪽 버튼 DOWN 처리하기 - border_mouseLeftButtonDown(sender, e)

        /// <summary>
        /// 테두리 마우스 왼쪽 버튼 DOWN 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void border_mouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Point mousePoint = Mouse.GetPosition(this.border);

            Point targetPoint = new Point();

            targetPoint.X = mousePoint.X - ellipse.Width  / 2;
            targetPoint.Y = mousePoint.Y - ellipse.Height / 2;

            DoubleAnimation doubleAnimationX = new DoubleAnimation
            (
                targetPoint.X,
                new Duration(TimeSpan.FromSeconds(4))
            );

            this.translateTransform.BeginAnimation
            (
                TranslateTransform.XProperty,
                doubleAnimationX,
                HandoffBehavior.SnapshotAndReplace
            );

            DoubleAnimation doubleAnimationY = new DoubleAnimation
            (
                targetPoint.Y,
                new Duration(TimeSpan.FromSeconds(4))
            );

            this.translateTransform.BeginAnimation
            (
                TranslateTransform.YProperty,
                doubleAnimationY,
                HandoffBehavior.SnapshotAndReplace
            );

            this.ellipse.Fill = Brushes.Lime;
        }

        #endregion
        #region 테두리 마우스 오른쪽 버튼 DOWN 처리하기 - border_mouseRightButtonDown(sender, e)

        /// <summary>
        /// 테두리 마우스 오른쪽 버튼 DOWN 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void border_mouseRightButtonDown(object sender, MouseButtonEventArgs e)
        {
            Point mousePoint = Mouse.GetPosition(this.border);

            Point targetPoint = new Point();

            targetPoint.X = mousePoint.X - ellipse.Width  / 2;
            targetPoint.Y = mousePoint.Y - ellipse.Height / 2;

            DoubleAnimation doubleAnimationX = new DoubleAnimation
            (
                targetPoint.X,
                new Duration(TimeSpan.FromSeconds(4))
            );

            this.translateTransform.BeginAnimation
            (
                TranslateTransform.XProperty,
                doubleAnimationX,
                HandoffBehavior.Compose
            );

            DoubleAnimation doubleAnimationY = new DoubleAnimation
            (
                targetPoint.Y,
                new Duration(TimeSpan.FromSeconds(4))
            );

            this.translateTransform.BeginAnimation
            (
                TranslateTransform.YProperty,
                doubleAnimationY,
                HandoffBehavior.Compose
            );

            this.ellipse.Fill = Brushes.Orange;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

using System;

using System.Windows;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.border.MouseLeftButtonDown += border_mouseLeftButtonDown;

this.border.MouseRightButtonDown += border_mouseRightButtonDown;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 테두리 마우스 왼쪽 버튼 DOWN 처리하기 - border_mouseLeftButtonDown(sender, e)

/// <summary>

/// 테두리 마우스 왼쪽 버튼 DOWN 처리하기

/// </summary>

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

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

private void border_mouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

Point mousePoint = Mouse.GetPosition(this.border);

Point targetPoint = new Point();

targetPoint.X = mousePoint.X - ellipse.Width / 2;

targetPoint.Y = mousePoint.Y - ellipse.Height / 2;

DoubleAnimation doubleAnimationX = new DoubleAnimation

(

targetPoint.X,

new Duration(TimeSpan.FromSeconds(4))

);

this.translateTransform.BeginAnimation

(

TranslateTransform.XProperty,

doubleAnimationX,

HandoffBehavior.SnapshotAndReplace

);

DoubleAnimation doubleAnimationY = new DoubleAnimation

(

targetPoint.Y,

new Duration(TimeSpan.FromSeconds(4))

);

this.translateTransform.BeginAnimation

(

TranslateTransform.YProperty,

doubleAnimationY,

HandoffBehavior.SnapshotAndReplace

);

this.ellipse.Fill = Brushes.Lime;

}

#endregion

#region 테두리 마우스 오른쪽 버튼 DOWN 처리하기 - border_mouseRightButtonDown(sender, e)

/// <summary>

/// 테두리 마우스 오른쪽 버튼 DOWN 처리하기

/// </summary>

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

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

private void border_mouseRightButtonDown(object sender, MouseButtonEventArgs e)

{

Point mousePoint = Mouse.GetPosition(this.border);

Point targetPoint = new Point();

targetPoint.X = mousePoint.X - ellipse.Width / 2;

targetPoint.Y = mousePoint.Y - ellipse.Height / 2;

DoubleAnimation doubleAnimationX = new DoubleAnimation

(

targetPoint.X,

new Duration(TimeSpan.FromSeconds(4))

);

this.translateTransform.BeginAnimation

(

TranslateTransform.XProperty,

doubleAnimationX,

HandoffBehavior.Compose

);

DoubleAnimation doubleAnimationY = new DoubleAnimation

(

targetPoint.Y,

new Duration(TimeSpan.FromSeconds(4))

);

this.translateTransform.BeginAnimation

(

TranslateTransform.YProperty,

doubleAnimationY,

HandoffBehavior.Compose

);

this.ellipse.Fill = Brushes.Orange;

}

#endregion

}

TestProject.zip