一、画布和图形
<Canvas x:Name="canvas4" Grid.Row="1" Grid.Column="1" Width="200" Height="200"><Canvas.Triggers><EventTrigger RoutedEvent="Loaded"><BeginStoryboard Storyboard="{StaticResource fourth_sb}"/></EventTrigger></Canvas.Triggers><Label Content="Loading"FontSize="16"FontFamily="Times New Roman"Foreground="#ffb549"FontWeight="Bold"Width="200"HorizontalContentAlignment="Center"Canvas.Top="110"/><Ellipse Name="fourth_e1" Canvas.Left="30" Canvas.Top="80" Style="{StaticResource fourthStyle_Ellipse}"/><Ellipse Name="fourth_e2" Canvas.Left="60" Canvas.Top="80" Style="{StaticResource fourthStyle_Ellipse}"/><Ellipse Name="fourth_e3" Canvas.Left="90" Canvas.Top="80" Style="{StaticResource fourthStyle_Ellipse}"/><Ellipse Name="fourth_e4" Canvas.Left="120" Canvas.Top="80" Style="{StaticResource fourthStyle_Ellipse}"/><Ellipse Name="fourth_e5" Canvas.Left="150" Canvas.Top="80" Style="{StaticResource fourthStyle_Ellipse}"/></Canvas>
二、故事动画板
<Storyboard x:Key="fourth_sb" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" RepeatBehavior="Forever"><DoubleAnimation Storyboard.TargetName="fourth_e1" To="-50" BeginTime="0:0:0.0" Duration="0:0:0.2" AutoReverse="True" EasingFunction="{StaticResource fourth_PowerEase}"/><DoubleAnimation Storyboard.TargetName="fourth_e2" To="-50" BeginTime="0:0:0.1" Duration="0:0:0.2" AutoReverse="True" EasingFunction="{StaticResource fourth_PowerEase}"/><DoubleAnimation Storyboard.TargetName="fourth_e3" To="-50" BeginTime="0:0:0.2" Duration="0:0:0.2" AutoReverse="True" EasingFunction="{StaticResource fourth_PowerEase}"/><DoubleAnimation Storyboard.TargetName="fourth_e4" To="-50" BeginTime="0:0:0.3" Duration="0:0:0.2" AutoReverse="True" EasingFunction="{StaticResource fourth_PowerEase}"/><DoubleAnimation Storyboard.TargetName="fourth_e5" To="-50" BeginTime="0:0:0.4" Duration="0:0:0.2" AutoReverse="True" EasingFunction="{StaticResource fourth_PowerEase}"/></Storyboard>
三、外部图形样式
<!--第四个动画圆的样式设计-->
<Style x:Key="fourthStyle_Ellipse" TargetType="Ellipse"><Setter Property="Width" Value="20"/><Setter Property="Height" Value="20"/><Setter Property="Fill" Value="Green"/><Setter Property="RenderTransform"><Setter.Value><!--平移变换--><TranslateTransform X="0" Y="0"/></Setter.Value></Setter>
</Style>
<PowerEase x:Key="fourth_PowerEase" Power="2" EasingMode="EaseInOut"/>