c# - wpf边框上的蛇动画

Question

我有一个WPF带边框的网格。

我想知道在屏幕的负载上我是否可以像蛇一样缓慢地绘制边框直到完成。

通过动画还是以某种方式？

Answer 1

您可以通过用单独的线条替换边框并为这些线条大小设置动画来做到这一点。这是一个 KaXaml 片段：

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid Margin="20">  
  <Line X1="0" X2="1" Y1="0" Y2="0" Stroke="Black" StrokeThickness="5" VerticalAlignment="Top" Stretch="Fill" x:Name="topLine">
    <Line.RenderTransform>
      <ScaleTransform ScaleX="0" />
    </Line.RenderTransform>
  </Line>
  <Line X1="0" X2="1" Y1="0" Y2="0" Stroke="Black" StrokeThickness="5" VerticalAlignment="Bottom" HorizontalAlignment="Right" Stretch="Fill" x:Name="bottomLine" RenderTransformOrigin="1,0">
    <Line.RenderTransform>
      <ScaleTransform ScaleX="0" />
    </Line.RenderTransform>
  </Line>
  <Line X1="0" X2="0" Y1="0" Y2="1" Stroke="Black" StrokeThickness="5" VerticalAlignment="Top" HorizontalAlignment="Right" Stretch="Fill" x:Name="rightLine">
    <Line.RenderTransform>
      <ScaleTransform ScaleY="0" />
    </Line.RenderTransform>
  </Line>
  <Line X1="0" X2="0" Y1="0" Y2="1" Stroke="Black" StrokeThickness="5" VerticalAlignment="Bottom" HorizontalAlignment="Left" Stretch="Fill" x:Name="leftLine" RenderTransformOrigin="0,1">
    <Line.RenderTransform>
      <ScaleTransform ScaleY="0" />
    </Line.RenderTransform>
  </Line>
  <Grid.Triggers>
      <EventTrigger RoutedEvent="Loaded">
        <EventTrigger.Actions>
          <BeginStoryboard>
            <Storyboard SpeedRatio="5">
              <DoubleAnimation Storyboard.TargetName="topLine" Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" />
              <DoubleAnimation Storyboard.TargetName="rightLine" Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" BeginTime="0:0:1" />
              <DoubleAnimation Storyboard.TargetName="bottomLine" Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" BeginTime="0:0:2" />
              <DoubleAnimation Storyboard.TargetName="leftLine" Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" BeginTime="0:0:3" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
  </Grid.Triggers>
  </Grid>
</Page>