原文:
WPF“天狗食月”效果
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yangyisen0713/article/details/18596419
利用Blend写的WPF天狗食月效果，先上效果图：
xaml代码如下：
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="wpf天狗食月动画.Window1"
x:Name="Window"
Title="Window1"
Width="640" Height="480">
<Window.Resources>
<Storyboard x:Key="Storyboard1" AutoReverse="True" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="192"/>
<EasingDoubleKeyFrame KeyTime="0:0:11" Value="192"/>
<EasingDoubleKeyFrame KeyTime="0:0:13" Value="406"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="-118"/>
<EasingDoubleKeyFrame KeyTime="0:0:11" Value="-118"/>
<EasingDoubleKeyFrame KeyTime="0:0:13" Value="21"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse1">
<EasingDoubleKeyFrame KeyTime="0:0:6" Value="267"/>
<EasingDoubleKeyFrame KeyTime="0:0:9" Value="481"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="ellipse1">
<EasingDoubleKeyFrame KeyTime="0:0:6" Value="28"/>
<EasingDoubleKeyFrame KeyTime="0:0:9" Value="167"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</EventTrigger>
</Window.Triggers>
<Grid x:Name="LayoutRoot" Background="Black">
<Ellipse x:Name="ellipse" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="116" Margin="75,155,0,0" Stroke="Black" VerticalAlignment="Top" Width="116" RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Ellipse x:Name="ellipse1" Fill="#FF0C0C0D" HorizontalAlignment="Left" Height="116" Margin="0,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="116" RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</Grid>
</Window>
