WPF“天狗食月”效果

天狗食月”效果"/>

WPF“天狗食月”效果

利用Blend写的WPF天狗食月效果，先上效果图：

xaml代码如下：

<Windowxmlns=""xmlns:x=""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>