地球繞着太陽轉 月球繞着地球轉(入門)


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

 

新手,歡迎指教!

下面貼出自己的源代碼。

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM