地球绕着太阳转 月球绕着地球转(入门)

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

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

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

 

图中涉及两个路径(轨道),三个圆(太阳,地球,月球),一个按钮。

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

  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吗?

 

新手,欢迎指教!

下面贴出自己的源代码。

 https://files.cnblogs.com/tiny-wang/semDemo-2012-4-25.rar

posted @ 2012-04-25 21:39  一梦三只鸭  阅读(17945)  评论(4编辑  收藏  举报