WPF“天狗食月”效果

原文: 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>