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>