wpf 水波纹

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;
        }
上一篇
下一篇