XAML
<Window.Resources>
<!-- 小点点的动画,准备用来做模板 -->
<Storyboard x:Key="EllipseSizeStoryboard">
<DoubleAnimation
AutoReverse="True" RepeatBehavior="Forever"
Storyboard.TargetProperty="Width" From="8" To="28" Duration="0:0:1.5" />
</Storyboard>
</Window.Resources>
<Grid>
<UniformGrid
Width="250"
Loaded="FrameworkElement_OnLoaded" Rows="1">
<UniformGrid.Resources>
<!-- 画一些小点点 -->
<Style TargetType="Ellipse">
<Setter Property="Width" Value="8" />
<Setter Property="Height" Value="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth}" />
<Setter Property="Fill" Value="DarkSlateBlue" />
<Setter Property="Opacity" Value=".8" />
</Style>
</UniformGrid.Resources>
<Ellipse />
<Ellipse />
<Ellipse />
<Ellipse />
<Ellipse />
<Ellipse />
<Ellipse />
<Ellipse />
</UniformGrid>
</Grid>
代码
if (this.FindResource("EllipseSizeStoryboard") is not Storyboard storyboard)
{
return;
}
if (sender is not UniformGrid grid)
{
return;
}
// 找出动画的模板,找出小点点,给每个点设置动画, 并设置不同的 BeginTime
var duration = storyboard.Children.First().Duration.TimeSpan;
var span = TimeSpan.FromSeconds(duration.TotalSeconds / grid.Children.Count);
var delay = TimeSpan.Zero;
foreach (FrameworkElement element in grid.Children)
{
var copy = storyboard.Clone();
copy.Children.First().BeginTime = delay;
element.BeginStoryboard(copy);
delay += span;
}