wpf 地球绕着太阳转 月球绕着地球转

网上都是介绍些WPF的入门基础，稍微些例子，程序都非常少。

今天弄了个简易的太阳系（仅仅是地球绕着太阳转，月亮绕着地球转），有个样子而已。

以下是效果图，当你点“start”button的时候，地球和月亮将会沿着相应轨道运行。

 

java 月亮绕地球 月亮绕地球运动_Data

图中涉及两个路径（轨道），三个圆（太阳，地球，月球），一个按钮。

暂时不考虑按钮触发。我们需要实现的是地球绕着太阳转，月球绕着地球转（两者实现方式差不多），所以我们考虑问题的时候可以分为两个方面：

  1. 月球绕着地球转
  2. 地球绕着太阳转（其实是【月球绕着地球转】整体绕着太阳转）

下面给出在xaml文件中主要实现功能的代码：

1.路径（轨道）的实现

1 <!--轨道路径的实现，通过使用EllipseGeometry实现椭圆路径的绘制-->
2         <Path Stroke="#FF686964">
3             <Path.Data>
4                 <EllipseGeometry Center="400 250" RadiusX="400" RadiusY="250" x:Name="e1"/>
5             </Path.Data>
6         </Path>

2.圆（太阳，地球，月球）的实现。其中先不考虑月球绕地球转等动画效果，这只是描绘简单的形状。

<!--球体的简单实现，可以通过笔刷等方式绘制它的效果，以下是简单的通过线性笔刷绘制太阳的Ellipse-->
<Ellipse Height="150" HorizontalAlignment="Left" Name="sun" VerticalAlignment="Top" Width="150">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                    <GradientStop Color="#FFFAAC0A" Offset="0.246" />
                    <GradientStop Color="#FFF9F00B" Offset="0.967" />
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>

3.图形已经出来了，我们只需要考虑相应的动画效果就可以了。想想，既然是地球绕着太阳转，那月球也要绕着地球转，那就相当于一个小整体（其中包括地球，月球，月球绕着地球转的轨道）绕着整个太阳轨道转了，这样就有趣了，我们可以将它们放在一个控件里，如Gird。下面给出Grid绘制特效，事件的代码。

1 <!--通过设置Grid的RenderTransform来设置它的特效，我们用了是其中的<MatrixTransform-->
 2             <Grid.RenderTransform>
 3                     <MatrixTransform x:Name="grid"/>
 4             </Grid.RenderTransform>
 5             <!--Grid触发器-->
 6             <Grid.Triggers>
 7                 <!--RouteEvent是设置路由时间由Page.Loaded时候触发，使用MatrixAnimationUsingPath，并指向grid-->
 8                 <EventTrigger RoutedEvent="Page.Loaded">
 9                     <BeginStoryboard>
10                         <Storyboard x:Name="sb1" RepeatBehavior="Forever">
11                             <MatrixAnimationUsingPath x:Name="ma1"
12                                                       Storyboard.TargetName="grid"
13                                                       Storyboard.TargetProperty="Matrix"
14                                                       Duration="0:1:0"/>
15                         </Storyboard>
16                     </BeginStoryboard>
17                 </EventTrigger>
18             </Grid.Triggers>

这样整体的Gird绕着太阳的动画效果就实现了，当然，由于在<MatrixAnimationUsingPah>中并不完整，我们需要在Start按钮的点击事件中增加相应代码：

1 PathGeometry pg1 = new PathGeometry();
2             pg1.AddGeometry(e1);
3             ma1.PathGeometry = pg1;
4             sb1.Begin(grid1);

这样，我们的整个动画效果就差不多完成了，至于月球绕着地球转，不就是把Grid的动画换成Ellipse吗？

 

新手，欢迎指教！