基于vs和C#的WPF应用之动画4---跳跳球

一、画布和图形

cs 复制代码

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

二、故事动画板

cs 复制代码

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

三、外部图形样式

cs 复制代码

<!--第四个动画圆的样式设计-->
<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"/>