使用path制作各类型动画路径

原文:使用path制作各类型动画路径

<Window x:Class="使用path制作各类型动画路径.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="350" Width="525">

    <Grid>

        <Ellipse Height="32" HorizontalAlignment="Left" Margin="63,61,0,0" Name="ellipse1" Stroke="Black" VerticalAlignment="Top" Width="43" Fill="red">

            <Ellipse.RenderTransform>

                <TransformGroup>

                <TranslateTransform X="-75" Y="-75"/><!--修改这个变换值可以使红色椭圆在固定的椭圆轨道上运转-->

                <MatrixTransform x:Name="mat1"/>

                </TransformGroup>

            </Ellipse.RenderTransform>

            <Ellipse.Triggers>

                <EventTrigger RoutedEvent="Page.Loaded">

                    <BeginStoryboard>

                        <Storyboard x:Name="sb1" RepeatBehavior="Forever">

                            <!--MatrixAnimationUsingPath.PathGeometry属性在后台设置-->

                            <MatrixAnimationUsingPath x:Name="matUsePath"

                                Storyboard.TargetName="mat1"

                                Storyboard.TargetProperty="Matrix"

                                Duration="0:0:10"

                                />

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

            </Ellipse.Triggers>

        </Ellipse>

        <Path x:Name="path1" Stroke="Blue">

            <Path.Data>

                <EllipseGeometry x:Name="elipsGeome" Center="220,150" RadiusX="200" RadiusY="100"/>

            </Path.Data>

        </Path>

        <Button Content="Start" Height="23" HorizontalAlignment="Left" Margin="416,24,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />

        <Ellipse Height="32" HorizontalAlignment="Left" Margin="61,60,0,0" Name="ellipse2" Stroke="Black" VerticalAlignment="Top" Width="43" Fill="blue">

            <Ellipse.RenderTransform>

                <TransformGroup>

                    <MatrixTransform x:Name="mat2"/>

                </TransformGroup>

            </Ellipse.RenderTransform>

            <Ellipse.Triggers>

                <EventTrigger RoutedEvent="Page.Loaded">

                    <BeginStoryboard>

                        <Storyboard x:Name="sb2" RepeatBehavior="Forever">

                            <MatrixAnimationUsingPath

                                Storyboard.TargetName="mat2"

                                Storyboard.TargetProperty="Matrix"

                                Duration="0:0:10"

                                >

                                <!--直接在前台设置MatrixAnimationUsingPath.PathGeometry属性-->

                                <MatrixAnimationUsingPath.PathGeometry>

                                    <!--Figures这个值需要自己去设置【你怎么设置就怎么转】-->

                                    <PathGeometry Figures="M 10,0  C35,-10 105,-20 140,-30 150,-20 200,-10 300,0 C300,100 200,150 150,100 100,50 50,10 10,0"/>

                                </MatrixAnimationUsingPath.PathGeometry>

                            </MatrixAnimationUsingPath>

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

            </Ellipse.Triggers>

        </Ellipse>

    </Grid>

</Window>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

namespace 使用path制作各类型动画路径

{

    /// <summary>

    /// MainWindow.xaml 的交互逻辑

    /// </summary>

    public partial class MainWindow : Window

    {

        public MainWindow()

        {

            InitializeComponent();

        }

        private void button1_Click(object sender, RoutedEventArgs e)

        {

            //设置红色椭圆的Storyboard中"MatrixAnimationUsingPath"的PathGeometry

            PathGeometry pg = new PathGeometry();

            pg.AddGeometry(elipsGeome);

            matUsePath.PathGeometry = pg;

            //ellipse1 开始绕椭圆路径旋转

            sb1.Begin(ellipse1);

        }

    }

}

源代码下载：绕固定的轨道旋转