使用path制作各類型動畫路徑
阿新 • • 發佈:2018-05-12
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制作各類型動畫路徑