WPF路徑動畫——C#篇

     在上一篇《WPF路徑動畫——XAML篇》中，所有的元素都是在XAML中定義的，用了少量的代碼讓動畫運行起來。畢竟C#更靈活和動態，這次就重點用C#代碼來完成動畫，實現一個方塊繞橢圓路徑切線轉動。

 

pgeUsingPath2.xaml

<Page x:Class="CnblogsDemo.pgeUsingPath2"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" d:DesignHeight="400" d:DesignWidth="500"    Title="路徑動畫使用C#"
      Loaded="Page_Loaded">

  <Grid ShowGridLines="True">
    <Grid.RowDefinitions>
      <RowDefinition Height="*"></RowDefinition>
      <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="3*"></ColumnDefinition>
      <ColumnDefinition Width="7*"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <Canvas Name="mainCanvas" Grid.Row="0" Grid.Column="1" Background="LightCyan" Margin="50,30,0,0">
      <Canvas.Resources>
        <SolidColorBrush x:Key="PathStrokeBrush01" Color="#FF686964" />
      </Canvas.Resources>
      <Rectangle x:Name="rotatingLine" Width="80" Height="20" Stroke="Blue" Fill="Red" />
      <!--用來指示橢圓路徑的中心點-->
      <Ellipse Name="ese1" Fill="red" Width="7" Height="7" Stroke="black" StrokeThickness="2.5" HorizontalAlignment="Left" VerticalAlignment="Top"></Ellipse>
    </Canvas>

  </Grid>
</Page>

============================================================

pgeUsingPath2.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace CnblogsDemo
{
    /// <summary>
    /// pgeUsingPath2.xaml 的交互邏輯
    /// </summary>
    public partial class pgeUsingPath2 : Page
    {
        public pgeUsingPath2()
        {
            InitializeComponent();
        }

        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            rotatingLine.RenderTransformOrigin = new Point(0.5, 0.5);
            Canvas.SetLeft(rotatingLine, -rotatingLine.ActualWidth * rotatingLine.RenderTransformOrigin.X);
            Canvas.SetTop(rotatingLine, -rotatingLine.ActualHeight * rotatingLine.RenderTransformOrigin.Y);
            MatrixTransform MatrixTransform_01 = new MatrixTransform();

            this.RegisterName("MatrixTransform_01", MatrixTransform_01);
            rotatingLine.RenderTransform = MatrixTransform_01;

            Point centerPt = new Point(150, 150);
            ese1.Margin = new Thickness(centerPt.X, centerPt.Y, 0, 0);                    //指示中心點
            Canvas.SetLeft(ese1, -ese1.ActualWidth / 2);
            Canvas.SetTop(ese1, -ese1.ActualHeight / 2);

            PathGeometry aniPath = new PathGeometry();
            EllipseGeometry egStandard = new EllipseGeometry(centerPt, 100, 80);
            aniPath.AddGeometry(egStandard);

            //外層
            Path ph = new Path();
            SolidColorBrush StrokeBrush = (SolidColorBrush)mainCanvas.Resources["PathStrokeBrush01"];
            ph.Stroke = StrokeBrush;
            ph.StrokeThickness = 1;
            EllipseGeometry eg2 = new EllipseGeometry(centerPt, egStandard.RadiusX + rotatingLine.ActualHeight / 2, egStandard.RadiusY + rotatingLine.ActualHeight / 2);
            ph.Data = eg2;
            mainCanvas.Children.Add(ph);

            //內層
            Path ph3 = new Path();
            ph3.Stroke = StrokeBrush;
            //ph.Fill = System.Windows.Media.Brushes.MediumSlateBlue;
            ph3.StrokeThickness = 1;
            EllipseGeometry eg3 = new EllipseGeometry(centerPt, egStandard.RadiusX - rotatingLine.ActualHeight / 2, egStandard.RadiusY - rotatingLine.ActualHeight / 2);
            ph3.Data = eg3;
            mainCanvas.Children.Add(ph3);

            Path phStandard = new Path();
            phStandard.Stroke = System.Windows.Media.Brushes.Blue;
            //ph.Fill = System.Windows.Media.Brushes.MediumSlateBlue;
            phStandard.StrokeThickness = 1;
            phStandard.Data = egStandard;
            mainCanvas.Children.Add(phStandard);

            MatrixAnimationUsingPath matrixAnimation = new MatrixAnimationUsingPath();
            matrixAnimation.PathGeometry = aniPath;                                //動畫的路徑
            matrixAnimation.Duration = TimeSpan.FromSeconds(10);
            matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;
            matrixAnimation.DoesRotateWithTangent = true;                            

            Storyboard.SetTargetName(matrixAnimation, "MatrixTransform_01");                        //動畫的對象
            Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath(MatrixTransform.MatrixProperty));

            Storyboard pathAnimationStoryboard = new Storyboard();
            pathAnimationStoryboard.Children.Add(matrixAnimation);
            pathAnimationStoryboard.Begin(this);
        }
    }
}

   中間藍色的路徑是動畫的路徑，內層和外層用來體現路徑和動畫元素的相對關系，可以rotatingLine.RenderTransformOrigin改個其他值試試。