WPF太阳地球月球运动轨迹模拟

Posted 2022-11-26 LisenYang

WPF模拟太阳。月球、地球三者运动轨迹的模拟，现在还没有加上太阳自传的动画，有兴趣的可以加上。

主要是利用EllipseGeometry实现路径的绘制

xaml代码如下：

<Window x:Class="MyFirstWpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="地球、月球、太阳运动模拟" Height="768" Width="1366" WindowStartupLocation="CenterScreen">     
    <Grid>
        <Grid.Background>
            <ImageBrush ImageSource="earth.jpg"/>
        </Grid.Background>           
        <Ellipse Height="150" HorizontalAlignment="Left" Margin="619,321,0,0" Name="ellipse3" VerticalAlignment="Top" Width="150" ToolTip="太阳">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                    <GradientStop Color="#FFFFCA00" Offset="0.246" />
                    <GradientStop Color="#FFFF0034" Offset="0.967" />
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <!--通过使用EllipseGeometry实现椭圆路径的绘制-->
        <Path Margin="308,136,120,81" Stroke="#FFFF7900" RenderTransformOrigin="0.415,0.498">
            <Path.Data>
                <EllipseGeometry Center="400 250" RadiusX="400" RadiusY="250" x:Name="e1"/>
            </Path.Data>
        </Path>
        <Grid Height="352" HorizontalAlignment="Left" Margin="30,-12,0,0" Name="grid1" VerticalAlignment="Top" Width="484">
            <Grid.RenderTransform>
                <MatrixTransform x:Name="grid"/>
            </Grid.RenderTransform>
            <!--Grid触发器-->
            <Grid.Triggers>
                <EventTrigger RoutedEvent="Page.Loaded">
                    <BeginStoryboard>
                        <Storyboard x:Name="sb1" RepeatBehavior="Forever">
                            <MatrixAnimationUsingPath x:Name="ma1"
                                                      Storyboard.TargetName="grid"
                                                      Storyboard.TargetProperty="Matrix"
                                                      Duration="0:1:0"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Grid.Triggers>
            <Ellipse Height="100" HorizontalAlignment="Left" Margin="227,94,0,0" Name="ellipse1" VerticalAlignment="Top" Width="100" ToolTip="地球">
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                        <GradientStop Color="#FFE0DFDD" Offset="0" />
                        <GradientStop Color="#FF0035FF" Offset="0.975" />
                    </LinearGradientBrush>
                </Ellipse.Fill>
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <MatrixTransform x:Name="earth"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Page.Loaded">
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
            <Ellipse Height="50" HorizontalAlignment="Left" Margin="228,40,0,0" Name="ellipse2" VerticalAlignment="Top" Width="50" ToolTip="月球">
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                        <GradientStop Color="White" Offset="0" />
                        <GradientStop Color="#FFDDD2BE" Offset="0.943" />
                    </LinearGradientBrush>
                </Ellipse.Fill>
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <MatrixTransform x:Name="moon"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Page.Loaded">
                        <BeginStoryboard>
                            <Storyboard x:Name="sb2" RepeatBehavior="Forever">
                                <MatrixAnimationUsingPath x:Name="ma2"
                                                      Storyboard.TargetName="moon"
                                                      Storyboard.TargetProperty="Matrix"
                                                      Duration="0:0:30">

                                </MatrixAnimationUsingPath>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
            <Path  Margin="262.522,59,0,93" HorizontalAlignment="Left" Width="122" Height="200" Stroke="#FF00FF40">
                <Path.Data>
                    <EllipseGeometry x:Name="ellipseGeometry1" Center="50 100" RadiusX="50" RadiusY="100" >
                        <EllipseGeometry.Transform>
                            <SkewTransform AngleY="-20"></SkewTransform>
                        </EllipseGeometry.Transform>
                    </EllipseGeometry>
                </Path.Data>
            </Path>
        </Grid>
        <TextBox HorizontalAlignment="Left" Height="110" Margin="891,7,0,0" TextWrapping="Wrap" Text="地球饶太阳公转，月球饶地球公转。太阳、地球、月球都在自转太阳是太阳系的主宰，是恒星。地球是太阳系的一颗行星，月球是地球的一颗天然卫星。地球绕着太阳公转，月球绕着地球公转。太阳不可能位于地球和月球之间。" VerticalAlignment="Top" Width="448" Background="x:Null" Foreground="#FF009DFF" BorderBrush="#FF0012FF"/>
    </Grid>
</Window>

最后效果如图：