WPF中的形状动画是否可行？

Question

Example Button Link

WPF可以像这个按钮点击效果那样塑造动画吗？我尝试使用宽度和cornerRadius的双动画，但效果不是很好。我使用路径动画来设置进度圈的动画，但只使用形状动画我真的不知道如何为它设置动画。任何人都可以帮助我或提出一些想法吗？

这是我的代码

<Path x:Name="path" Height="20" Width="20" Stroke="Gray" Stretch="Fill"  Opacity="0.3"
      StrokeThickness="2" Data="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z"
      StrokeDashOffset="204.243713378906">
  <Path.StrokeDashArray>
    <System:Double>204.243713378906</System:Double>
  </Path.StrokeDashArray>
</Path>
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75">
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard Storyboard.TargetName="bdrTest">
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                         Storyboard.TargetName="path"
                                         Storyboard.TargetProperty="(Shape.StrokeDashOffset)">
            <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="204.243713378906"/>
            <SplineDoubleKeyFrame KeyTime="00:00:5" Value="0"/>
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

Answer 1

您所说的动画不是动画。响应鼠标悬停事件，只需更改Button.Background和Button.Foreground颜色。要提供Button圆角，您只需为Button提供自己的ControlTemplate：

<Button Content="Submit" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border CornerRadius="30" BorderThickness="2" BorderBrush="#FF1ECD97" 
                TextElement.Foreground="#FF1ECD97" TextElement.FontSize="20" 
                TextElement.FontWeight="SemiBold" Padding="100,20">
                <ContentPresenter  />
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

现在要将鼠标悬停在效果上，我们只需要在ControlTemplate添加Trigger即可更改Button.Background和Button.Foreground的颜色UIElement.IsMouseOver 1}}属性为True：

<Button Content="Submit" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border Name="Border" CornerRadius="30" Background="Transparent" 
                BorderThickness="2" BorderBrush="#FF1ECD97" TextElement.Foreground=
                "#FF1ECD97" TextElement.FontSize="20" TextElement.FontWeight="SemiBold"
                Padding="100,20">
                <ContentPresenter  />
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Border" Property="Background" 
                        Value="#FF1ECD97" />
                    <Setter TargetName="Border" Property="TextElement.Foreground" 
                        Value="White" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

Answer 2

最困难的事情是制定循环进度。如果使用代码隐藏，那就没有问题了。但我尝试使用 纯 XAML。在代码隐藏中，我们可以从相应的角度计算某些Point的{​​{1}}，并相应地更新ArcSegment。但是在XAML中，我们必须使用一些hacky解决方法。我不得不使用4层边框来创建这种效果。首先，我尝试了只有2层，但因为在动画时更改背景只会使动画无法正常工作。

我将主要关注循环进度效果，因为这是使用纯XAML解决时最具挑战性的问题。基本上你需要一些背景边框有两半不同的颜色制作一个完整的圆。左半部分是灰色的，右半部分是活跃的（进展的）颜色。此边框已修复：

你需要另外一个边界，也有两个不同的一半。它的左半部分是透明的，右半部分是活跃/进步的颜色。在第一阶段旋转180度后，此边框将在第二阶段旋转（实际上其背景旋转）：

下一个边框将在第一阶段使用。这个边界也有两个不同的一半。左半部分是透明的，右半部分是灰色的：

所以最初，这3个边框会形成一个完整的灰色圆圈（左边的灰色部分是第一个边框，右边的灰色部分是第三个边框）：

在第一阶段，第三个边界旋转180度。它的灰色一半会逐渐打开第二个边界的活动颜色的一半，从0到180度的效果。在此之后，第一阶段已经完成。第三个边界将被隐藏，第二个边界将被旋转。现在它的活动颜色一半（右半部分）将逐渐覆盖第一个边框（左侧）的灰色部分，并使效果从180增加到360（充满活动颜色）。

还有其他边框图层用于显示tickmark的最后效果，...这是完整代码。它相当长，并且主要用于参考，您可能需要对其进行大量改进，以便可以在代码中使用它。我只是使用简单的动画（没有缓和）：

ArcSegment