如何制作围绕窗口的动画边框并且末尾的边框消失？ C# WPF

Question

我想要一个围绕窗口的动画边框，所以在窗口中。我希望它看起来像有东西在窗户周围移动，就像这个VIDEO。

我在网上找了一些代码，修改了一下，可以绕一个窗口，但是不透明，看视频即可；你就会知道我在说什么，代码也有点难以理解，而且很混乱。我对 C# 非常陌生，所以请帮助我，谢谢。

每条边的边框将其分为几列，Col1 为左侧，Col2 为右侧，数值为开始动画的时间。

    private void InitSbs()
    {
         topEdgeSb = CreateSb("TopEdgeCol1", "TopEdgeCol2", "TopEdge", true, 0);
         rightEdgeSb = CreateSb("RightEdgeCol1", "RightEdgeCol2", "RightEdge", false, 500);
         bottomEdgeSb = CreateSb("BottomEdgeCol1", "BottomEdgeCol2", "BottomEdge", true, 500 * 2);
         leftEdgeSb = CreateSb("LeftEdgeCol1", "LeftEdgeCol2", "LeftEdge", false, 500 * 3);
    }

        private GridLengthAnimation CreateGridLengthAnim(string name, double from, double to, bool isCol,  int beginTime, int duration)
        {
            GridLengthAnimation anim = new GridLengthAnimation();
            anim.From = new GridLength(from, GridUnitType.Star);
            anim.To = new GridLength(to, GridUnitType.Star);
            anim.Duration = new Duration(new System.TimeSpan(0, 0, 0, 0, duration));
            anim.BeginTime = new System.TimeSpan(0, 0, 0, 0, beginTime);
            Storyboard.SetTargetName(anim, name);
            if (isCol)
            {
                Storyboard.SetTargetProperty(anim, new PropertyPath(ColumnDefinition.WidthProperty));
            }
            else
            {
                Storyboard.SetTargetProperty(anim, new PropertyPath(RowDefinition.HeightProperty));
            }

            return anim;
        }

        public void Start()
        {
            topEdgeSb.Begin(this, true);
            leftEdgeSb.Begin(this, true);
            bottomEdgeSb.Begin(this, true);
            rightEdgeSb.Begin(this, true);
        }

这段代码中的一些问题是我指定了edgeDuration，它指定了边框从开始到结束所需的时间。 edgeDuration 为 500 ms，resetTime 为 500 毫秒 + 开始时间。假设我想要对最底部的边框进行动画处理，即要进行动画处理的第三个边框，然后将其持续 500 ms + 500 * 3，我们将 500 乘以 3，因为对边框进行动画处理需要多长时间在最底部边框之前进行动画处理。

然而，尽管如此，左边框（第 4 阶）的动画在完全动画化之前就停止了，大约 95% 左右。

Answer 1

这应该可以帮助您开始。路径动画也可以工作，并且可能更干净、更灵活，但这似乎是说明潜在解决方案的直接方法。

<Window x:Class="StackOverflowAnswers.Wpf.AnimatedBorder"
        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"
        xmlns:local="clr-namespace:StackOverflowAnswers.Wpf"
        mc:Ignorable="d"
        Title="AnimatedBorder"
        Height="200"
        Width="200"
        BorderThickness="0"
        WindowStyle="None"
        AllowsTransparency="True"
        Background="Transparent"
        ResizeMode="NoResize"
        BorderBrush="Transparent"
        x:Name="Window">
    
    <Border Padding="3">

        <Border Background="#333333"
                CornerRadius="5"
                MouseDown="AnimatedBorder_MouseLeftButtonDown">
            <Border Margin="-3,-3,3,3"
                    x:Name="Grid">
                <Ellipse Name="MyRectangle"
                         HorizontalAlignment="Left"
                         VerticalAlignment="Top"
                         Width="6"
                         Height="6">
                    <Ellipse.RenderTransform>
                        <TranslateTransform x:Name="Transform"
                                            X="0"
                                            Y="0" />
                    </Ellipse.RenderTransform>
                    <Ellipse.Fill>
                        <SolidColorBrush x:Name="MySolidColorBrush"
                                         Color="Gold" />
                    </Ellipse.Fill>
                    <Ellipse.Triggers>
                        <EventTrigger RoutedEvent="Window.Loaded">
                            <BeginStoryboard>
                                <Storyboard RepeatBehavior="Forever">
                                    <DoubleAnimation Storyboard.TargetName="Transform"
                                                     Storyboard.TargetProperty="X"
                                                     From="0"
                                                     To="{Binding ActualWidth, ElementName=Grid}"
                                                     Duration="0:0:0.5" />
                                    <DoubleAnimation Storyboard.TargetName="Transform"
                                                     Storyboard.TargetProperty="Y"
                                                     From="0"
                                                     To="{Binding ActualHeight, ElementName=Grid}"
                                                     BeginTime="0:0:0.5"
                                                     Duration="0:0:0.5" />
                                    <DoubleAnimation Storyboard.TargetName="Transform"
                                                     Storyboard.TargetProperty="X"
                                                     To="0"
                                                     From="{Binding ActualWidth, ElementName=Grid}"
                                                     BeginTime="0:0:1"
                                                     Duration="0:0:0.5" />
                                    <DoubleAnimation Storyboard.TargetName="Transform"
                                                     Storyboard.TargetProperty="Y"
                                                     From="{Binding ActualHeight, ElementName=Grid}"
                                                     To="0"
                                                     BeginTime="0:0:1.5"
                                                     Duration="0:0:0.5" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Ellipse.Triggers>
                </Ellipse>
            </Border>
        </Border>
    </Border>

</Window>

    public partial class AnimatedBorder : Window
    {
        public AnimatedBorder()
        {
            InitializeComponent();

        }
        private void AnimatedBorder_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (e.MouseDevice.LeftButton == MouseButtonState.Pressed)
                DragMove();
        }
    }

结果：