網上都是介紹些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嗎?
新手,歡迎指教!
下面貼出自己的源代碼。