基于vs和C#的WPF应用之动画3

注：1、在内部和外部使用缓动函数

<Grid.Resources>
<PowerEase x:Key="powerease" Power="3" EasingMode="EaseInOut"/>
</Grid.Resources>
<DoubleAnimation EasingFunction="{StaticResource powerease}"/><DoubleAnimation.EasingFunction><PowerEase EasingMode="EaseInOut" Power="3"/></DoubleAnimation.EasingFunction>

一、画布

<Canvas x:Name="canvas3" Width="200" Height="200" Grid.Row="0" Grid.Column="1"><Canvas.Triggers><EventTrigger RoutedEvent="Loaded"><BeginStoryboard Storyboard="{StaticResource third_sb}"/></EventTrigger></Canvas.Triggers><!--背景--><Ellipse Width="100" Height="100" Fill="#f2f4f6" Margin="50"/><Label Content="Loading"FontSize="16"Margin="50"FontFamily="Times New Roman"Foreground="#6b48ff"FontWeight="Bold"Width="100" Height="100"VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/><Ellipse Name="third_e1" Style="{StaticResource thirdStyle_Ellipse}" ><Ellipse.RenderTransform><RotateTransform Angle="0"/></Ellipse.RenderTransform></Ellipse><Ellipse Name="third_e2" Style="{StaticResource thirdStyle_Ellipse}"><Ellipse.RenderTransform><RotateTransform Angle="0"/></Ellipse.RenderTransform></Ellipse><Ellipse Name="third_e3" Style="{StaticResource thirdStyle_Ellipse}"><Ellipse.RenderTransform><RotateTransform Angle="0"/></Ellipse.RenderTransform></Ellipse><Ellipse Name="third_e4" Style="{StaticResource thirdStyle_Ellipse}" ><Ellipse.RenderTransform><RotateTransform Angle="0"/></Ellipse.RenderTransform></Ellipse><Ellipse Name="third_e5" Style="{StaticResource thirdStyle_Ellipse}"><Ellipse.RenderTransform><RotateTransform Angle="0"/></Ellipse.RenderTransform></Ellipse></Canvas>

二、动画故事板

 <Storyboard x:Key="third_sb" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" RepeatBehavior="Forever"><DoubleAnimation Storyboard.TargetName="third_e1" To="360" Duration="0:0:2"  EasingFunction="{StaticResource powerease}" AccelerationRatio="0.1" DecelerationRatio="0.9"/><!--加速比 减速比--><DoubleAnimation Storyboard.TargetName="third_e2" To="360" Duration="0:0:2" EasingFunction="{StaticResource powerease}" AccelerationRatio="0.3" DecelerationRatio="0.7"/><DoubleAnimation Storyboard.TargetName="third_e3" To="360" Duration="0:0:2" EasingFunction="{StaticResource powerease}" AccelerationRatio="0.5" DecelerationRatio="0.5"/><DoubleAnimation Storyboard.TargetName="third_e4" To="360" Duration="0:0:2" EasingFunction="{StaticResource powerease}" AccelerationRatio="0.7" DecelerationRatio="0.3"/><DoubleAnimation Storyboard.TargetName="third_e5" To="360" Duration="0:0:2" EasingFunction="{StaticResource powerease}" AccelerationRatio="0.9" DecelerationRatio="0.1"/></Storyboard>

三、外部样式

 <!--第三个动画圆的样式--><Style x:Key="thirdStyle_Ellipse" TargetType="Ellipse"><Setter Property="Width" Value="25"/><Setter Property="Height" Value="25"/><Setter Property="Canvas.Left" Value="87.5"/><Setter Property="Canvas.Top" Value="50"/><Setter Property="Fill" Value="#0d3f67"/><Setter Property="RenderTransformOrigin" Value="0.5,2"/></Style>