地球繞着太陽轉月球繞着地球轉（入門）

網上都是介紹些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嗎？

新手，歡迎指教！

下面貼出自己的源代碼。

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

轉載于:https://www.cnblogs.com/tiny-wang/archive/2012/04/25/2470556.html

地球繞着太陽轉 月球繞着地球轉（入門）

地球繞着太陽轉月球繞着地球轉（入門）