1. 程式人生 > >使用path制作各類型動畫路徑

使用path制作各類型動畫路徑

release 設置 private med har edev lease transform href

原文:使用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);
        }
    }
}

技術分享圖片

源代碼下載:繞固定的軌道旋轉


使用path制作各類型動畫路徑