地球绕着太阳转 月球绕着地球转(入门)
网上都是介绍些WPF的入门基础,稍微些例子,程序都非常少。
今天弄了个简易的太阳系(仅仅是地球绕着太阳转,月亮绕着地球转),有个样子而已。
以下是效果图,当你点“start”button的时候,地球和月亮将会沿着相应轨道运行。
图中涉及两个路径(轨道),三个圆(太阳,地球,月球),一个按钮。
暂时不考虑按钮触发。我们需要实现的是地球绕着太阳转,月球绕着地球转(两者实现方式差不多),所以我们考虑问题的时候可以分为两个方面:
- 月球绕着地球转
- 地球绕着太阳转(其实是【月球绕着地球转】整体绕着太阳转)
下面给出在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吗?
新手,欢迎指教!
下面贴出自己的源代码。