利用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>