[C#/WPF] MatrixAnimationUsingPath 클래스 : 경로를 따라 객체에 애니메이션 효과 주기

■ MatrixAnimationUsingPath 클래스를 사용해 경로를 따라 객체에 애니메이션 효과를 주는 방법을 보여준다.

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

</Window>

▶ MainWindow.xaml.cs


using System;
using System.Windows;
using System.Windows.Controls;
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();

            NameScope.SetNameScope(this, new NameScope());

            #region 매트릭스 변환을 생성한다.

            MatrixTransform matrixTransform = new MatrixTransform();

            RegisterName("matrixTransform", matrixTransform);

            #endregion
            #region 버튼을 생성한다.

            Button button = new Button();

            button.Width           = 100;
            button.Height          = 30;
            button.RenderTransform = matrixTransform;
            button.Content         = "테스트";

            #endregion
            #region 캔버스를 생성한다.

            Canvas canvas = new Canvas();

            canvas.Width      = 400;
            canvas.Height     = 400;
            canvas.Background = Brushes.LightGray;

            canvas.Children.Add(button);

            #endregion

            #region 폴리 베지어 세그먼트를 생성한다.

            PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

            polyBezierSegment.Points.Add(new Point(35 , 0  ));
            polyBezierSegment.Points.Add(new Point(135, 0  ));
            polyBezierSegment.Points.Add(new Point(160, 100));
            polyBezierSegment.Points.Add(new Point(180, 190));
            polyBezierSegment.Points.Add(new Point(285, 200));
            polyBezierSegment.Points.Add(new Point(310, 100));

            #endregion
            #region 패스 피겨를 생성한다.

            PathFigure pathFigure = new PathFigure();

            pathFigure.StartPoint = new Point(10, 100);

            pathFigure.Segments.Add(polyBezierSegment);

            #endregion
            #region 패스 지오메트리를 생성한다.

            PathGeometry pathGeometry = new PathGeometry();

            pathGeometry.Figures.Add(pathFigure);

            pathGeometry.Freeze();

            #endregion
            #region 매트릭스 애니메이션을 생성한다.

            MatrixAnimationUsingPath matrixAnimation = new MatrixAnimationUsingPath();

            matrixAnimation.PathGeometry   = pathGeometry;
            matrixAnimation.Duration       = TimeSpan.FromSeconds(5);
            matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;
            matrixAnimation.AutoReverse    = true;

            Storyboard.SetTargetName(matrixAnimation, "matrixTransform");
            Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath(MatrixTransform.MatrixProperty));

            #endregion
            #region 스토리보드를 생성한다.

            Storyboard pathAnimationStoryboard = new Storyboard();

            pathAnimationStoryboard.Children.Add(matrixAnimation);

            #endregion

            Content = canvas;

            button.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                pathAnimationStoryboard.Begin(this);
            };
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

using System;

using System.Windows;

using System.Windows.Controls;

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();

NameScope.SetNameScope(this, new NameScope());

#region 매트릭스 변환을 생성한다.

MatrixTransform matrixTransform = new MatrixTransform();

RegisterName("matrixTransform", matrixTransform);

#endregion

#region 버튼을 생성한다.

Button button = new Button();

button.Width = 100;

button.Height = 30;

button.RenderTransform = matrixTransform;

button.Content = "테스트";

#endregion

#region 캔버스를 생성한다.

Canvas canvas = new Canvas();

canvas.Width = 400;

canvas.Height = 400;

canvas.Background = Brushes.LightGray;

canvas.Children.Add(button);

#endregion

#region 폴리 베지어 세그먼트를 생성한다.

PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

polyBezierSegment.Points.Add(new Point(35 , 0 ));

polyBezierSegment.Points.Add(new Point(135, 0 ));

polyBezierSegment.Points.Add(new Point(160, 100));

polyBezierSegment.Points.Add(new Point(180, 190));

polyBezierSegment.Points.Add(new Point(285, 200));

polyBezierSegment.Points.Add(new Point(310, 100));

#endregion

#region 패스 피겨를 생성한다.

PathFigure pathFigure = new PathFigure();

pathFigure.StartPoint = new Point(10, 100);

pathFigure.Segments.Add(polyBezierSegment);

#endregion

#region 패스 지오메트리를 생성한다.

PathGeometry pathGeometry = new PathGeometry();

pathGeometry.Figures.Add(pathFigure);

pathGeometry.Freeze();

#endregion

#region 매트릭스 애니메이션을 생성한다.

MatrixAnimationUsingPath matrixAnimation = new MatrixAnimationUsingPath();

matrixAnimation.PathGeometry = pathGeometry;

matrixAnimation.Duration = TimeSpan.FromSeconds(5);

matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;

matrixAnimation.AutoReverse = true;

Storyboard.SetTargetName(matrixAnimation, "matrixTransform");

Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath(MatrixTransform.MatrixProperty));

#endregion

#region 스토리보드를 생성한다.

Storyboard pathAnimationStoryboard = new Storyboard();

pathAnimationStoryboard.Children.Add(matrixAnimation);

#endregion

Content = canvas;

button.Loaded += delegate(object sender, RoutedEventArgs e)

{

pathAnimationStoryboard.Begin(this);

};

}

#endregion

}

TestProject.zip