基于vs和C#的WPF应用之动画5---变大矩形

1.添加Blend包

2.标签引入

xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"

 3.设计矩形样式

 <Style x:Key="rec" TargetType="Rectangle">
    <Setter Property="Width" Value="10"/>
    <Setter Property="Height" Value="30"/>
    <Setter Property="Fill" Value="#f1404b"/>
 </Style>

4.设置动画故事板

 <Storyboard x:Key="fifth_sb" RepeatBehavior="Forever" Storyboard.TargetProperty="Height">
                <DoubleAnimation Storyboard.TargetName="rec1" To="50" BeginTime="0:0:0.0" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/>
                <DoubleAnimation Storyboard.TargetName="rec2" To="50" BeginTime="0:0:0.2" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/>
                <DoubleAnimation Storyboard.TargetName="rec3" To="50" BeginTime="0:0:0.4" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/>
                <DoubleAnimation Storyboard.TargetName="rec4" To="50" BeginTime="0:0:0.6" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/>
                <DoubleAnimation Storyboard.TargetName="rec5" To="50" BeginTime="0:0:0.8" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/>
            </Storyboard>

5.设置缓动函数

<PowerEase x:Key="powerEase" Power="3" EasingMode="EaseInOut"/>

6.设置触发器启动动画

<Grid.Triggers>
  <EventTrigger RoutedEvent="Loaded">
  <BeginStoryboard Storyboard="{StaticResource fifth_sb}"/>
  </EventTrigger>
</Grid.Triggers>

7.整体

<Window x:Class="Animate2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Background="White" HorizontalAlignment="Center">
        <Grid.Resources>
            <Style x:Key="rec" TargetType="Rectangle">
                <Setter Property="Width" Value="10"/>
                <Setter Property="Height" Value="30"/>
                <Setter Property="Fill" Value="#f1404b"/>
            </Style>
            <PowerEase x:Key="powerEase" Power="3" EasingMode="EaseInOut"/>
            <Storyboard x:Key="fifth_sb" RepeatBehavior="Forever" Storyboard.TargetProperty="Height">
                <DoubleAnimation Storyboard.TargetName="rec1" To="50" BeginTime="0:0:0.0" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/>
                <DoubleAnimation Storyboard.TargetName="rec2" To="50" BeginTime="0:0:0.2" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/>
                <DoubleAnimation Storyboard.TargetName="rec3" To="50" BeginTime="0:0:0.4" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/>
                <DoubleAnimation Storyboard.TargetName="rec4" To="50" BeginTime="0:0:0.6" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/>
                <DoubleAnimation Storyboard.TargetName="rec5" To="50" BeginTime="0:0:0.8" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/>
            </Storyboard>
            
        </Grid.Resources>
        <Grid.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard Storyboard="{StaticResource fifth_sb}"/>
            </EventTrigger>
        </Grid.Triggers>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="15"/>
            <ColumnDefinition Width="15"/>
            <ColumnDefinition Width="15"/>
            <ColumnDefinition Width="15"/>
            <ColumnDefinition Width="15"/>
        </Grid.ColumnDefinitions>
        <Label Content="Loading"
           FontSize="18"
           FontFamily="Times New Roman"
           Foreground="#252c41"
           FontWeight="Bold"
           Grid.ColumnSpan="5"
           VerticalContentAlignment="Center"
           HorizontalContentAlignment="Center"
           Margin="0,100,0,0"/>
        <Rectangle Name="rec1" Grid.Column="0" Style="{StaticResource rec}"/>
        <Rectangle Name="rec2" Grid.Column="1" Style="{StaticResource rec}"/>
        <Rectangle Name="rec3" Grid.Column="2" Style="{StaticResource rec}"/>
        <Rectangle Name="rec4" Grid.Column="3" Style="{StaticResource rec}"/>
        <Rectangle Name="rec5" Grid.Column="4" Style="{StaticResource rec}"/>
    </Grid>
 
</Window>