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

TestProject.zip

다운로드

▶ 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>

 

728x90

 

▶ 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
    }
}