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

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

cs 复制代码

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

一、画布

cs 复制代码

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

二、动画故事板

cs 复制代码

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

三、外部样式

cs 复制代码

 <!--第三个动画圆的样式-->
 <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>