WPF中可能有形状动画吗？

Question

Example Button Link

可以WPF做形状动画喜欢这个按钮点击的效果吗？我尝试使用宽度和角度Radius的双动画，但效果不太好。我使用路径动画来为进度圈设置动画，但只有形状动画我真的不知道如何为其设置动画。任何人都可以帮助我或提出一些想法？

这是我的代码

<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

最困难的事情就是动画化循环过程。如果使用代码隐藏，它不是这样的问题。但我试图用纯 XAML。在代码隐藏方面，我们可以从相应的角度计算ArcSegment的Point，并相应地更新ArcSegment。但是在XAML中，我们必须使用一些冒险的解决方法。我不得不使用4层边界来创建这种效果。首先，我尝试了2层，但是因为改变背景的同时动画会使动画无法正常工作。

我将主要关注循环进度效应，因为这是解决纯XAML时最具挑战性的问题。基本上你需要一些背景边框，有不同颜色的两个半圈，形成一个完整的圆圈。左半部分呈灰色，右半部分呈活动（前进）颜色。这个边界是固定的：

您需要另一个边界也与2个不同的一半。它的左半边是透明的，右半边是主动/前进的颜色。该边界将被旋转（事实上其背景是旋转）在第一阶段之后的第二阶段是180度旋转：

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

所以一开始，这3个边界将一个完整的灰色圆圈（左变灰一半是第一边界的，右边变灰一半的第三）：

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

还有其他边框图层显示tickmark的最后一个效果......以下是完整的代码。它相当长，主要用于参考，您可能需要进一步改进才能在代码中使用它。我只是使用简单的动画（没有缓动）：

<Button Background="Transparent" Content="Submit" FontSize="30" Foreground="#FF1ECD97" BorderBrush="#FF1ECD97"> 
    <Button.Style> 
     <Style TargetType="Button"> 
      <Setter Property="Height" Value="80"/> 
      <Setter Property="Width" Value="280"/> 
      <Setter Property="BorderThickness" Value="2"/> 
     </Style> 
    </Button.Style> 
    <Button.Template> 
     <ControlTemplate TargetType="Button"> 
      <ControlTemplate.Resources>     
      <DrawingBrush Stretch="Fill" x:Key="circle"> 
        <DrawingBrush.Drawing> 
         <DrawingGroup> 
          <GeometryDrawing Geometry="M-25,-25 h50v50h-50v-50" Brush="Transparent"> 
          </GeometryDrawing> 
          <GeometryDrawing Geometry="M0,-25 A25,25 0 0 1 0,25"> 
          <GeometryDrawing.Pen> 
           <Pen Brush="{DynamicResource right}" Thickness="4"/> 
          </GeometryDrawing.Pen> 
          </GeometryDrawing> 
          <GeometryDrawing Geometry="M0,25 A25,25 0 0 1 0,-25"> 
          <GeometryDrawing.Pen> 
           <Pen Brush="{DynamicResource left}" Thickness="4"/> 
          </GeometryDrawing.Pen> 
          </GeometryDrawing> 
         </DrawingGroup> 
        </DrawingBrush.Drawing>       
        <DrawingBrush.RelativeTransform> 
         <RotateTransform Angle="0" CenterX="0.5" CenterY="0.5"/> 
        </DrawingBrush.RelativeTransform> 
       </DrawingBrush> 
       <DrawingBrush x:Key="ok" Stretch="None">      
        <DrawingBrush.Drawing> 
         <GeometryDrawing Geometry="M0,20 L10,30 30,5"> 
          <GeometryDrawing.Pen> 
           <Pen Brush="White" Thickness="5" EndLineCap="Round" StartLineCap="Round"/> 
          </GeometryDrawing.Pen>         
         </GeometryDrawing> 
        </DrawingBrush.Drawing> 
        <DrawingBrush.RelativeTransform> 
         <ScaleTransform CenterX="0.5" CenterY=".5" ScaleX="0" ScaleY="0"/> 
        </DrawingBrush.RelativeTransform> 
       </DrawingBrush>      
      </ControlTemplate.Resources> 
      <Grid> 
      <Grid.Effect> 
       <DropShadowEffect ShadowDepth="1"/> 
      </Grid.Effect> 
      <Border BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" 
        BorderThickness="{Binding BorderThickness, RelativeSource={RelativeSource TemplatedParent}}" CornerRadius="40" 
        Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}"> 
      </Border> 

      <Border Opacity="0" Name="b1"> 
       <Border.Resources> 
       <SolidColorBrush Color="#FF1ECD97" x:Key="right"/>      
       <SolidColorBrush Color="#ffdddddd" x:Key="left"/> 
       </Border.Resources> 
       <Border.Style> 
       <Style TargetType="Border"> 
        <Setter Property="Background" Value="{StaticResource circle}"/> 
       </Style> 
       </Border.Style>     
      </Border> 
      <Border Opacity="0" Name="b12"> 
       <Border.Resources> 
       <SolidColorBrush Color="#FF1ECD97" x:Key="right"/>      
       <SolidColorBrush Color="Transparent" x:Key="left"/> 
       </Border.Resources> 
       <Border.Style> 
       <Style TargetType="Border"> 
        <Setter Property="Background" Value="{StaticResource circle}"/> 
       </Style> 
       </Border.Style> 
      </Border> 
      <Border Opacity="0" Name="b2"> 
       <Border.Resources> 
       <SolidColorBrush Color="#ffdddddd" x:Key="right"/>      
       <SolidColorBrush Color="Transparent" x:Key="left"/> 
       </Border.Resources> 
       <Border.Style> 
       <Style TargetType="Border"> 
        <Setter Property="Background" Value="{StaticResource circle}"/> 
       </Style> 
       </Border.Style>     
      </Border>     
      <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Name="cp"/> 
      <Border Opacity="0" Name="b3_" Background="#FF1ECD97" CornerRadius="40"/> 
      <Border Opacity="0" Name="b3" Background="{StaticResource ok}"/>     
      </Grid> 
      <ControlTemplate.Triggers>     
      <EventTrigger RoutedEvent="Button.Click"> 
       <BeginStoryboard Name="bg"> 
        <Storyboard Duration="0:0:6" FillBehavior="Stop"> 
         <DoubleAnimation Storyboard.TargetProperty="Width" To="80" Duration="0:0:.2"> 
         </DoubleAnimation>       
        <DoubleAnimation Storyboard.TargetName="b1" Storyboard.TargetProperty="Opacity" BeginTime="0:0:.2" To="1" Duration="0"/> 
        <DoubleAnimation Storyboard.TargetName="b2" Storyboard.TargetProperty="Opacity" BeginTime="0:0:.2" To="1" Duration="0"/> 
        <DoubleAnimation Storyboard.TargetName="cp" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/> 

        <DoubleAnimation Storyboard.TargetName="b2" Storyboard.TargetProperty="Background.RelativeTransform.Angle" By="180" BeginTime="0:0:.2" Duration="0:0:2"/> 
        <DoubleAnimation Storyboard.TargetName="b12" Storyboard.TargetProperty="Opacity" BeginTime="0:0:2.2" To="1" Duration="0"/> 
        <DoubleAnimation Storyboard.TargetName="b2" Storyboard.TargetProperty="Opacity" BeginTime="0:0:2.2" To="0" Duration="0"/> 
        <DoubleAnimation Storyboard.TargetName="b12" Storyboard.TargetProperty="Background.RelativeTransform.Angle" By="180" Duration="0:0:2" BeginTime="0:0:2.2"/> 
        <!-- Reset --> 
        <DoubleAnimation Storyboard.TargetName="b1" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.2" To="0" Duration="0"/> 
        <DoubleAnimation Storyboard.TargetName="b2" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.2" To="0" Duration="0"/> 
        <DoubleAnimation Storyboard.TargetName="b12" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.2" To="0" Duration="0"/> 
        <DoubleAnimation Storyboard.TargetName="b2" Storyboard.TargetProperty="Background.RelativeTransform.Angle" To="0" BeginTime="0:0:4.2" Duration="0:0:0"/> 
        <DoubleAnimation Storyboard.TargetName="b12" Storyboard.TargetProperty="Background.RelativeTransform.Angle" To="0" Duration="0:0:0" BeginTime="0:0:4.2"/> 

        <DoubleAnimation Storyboard.TargetProperty="Width" To="280" BeginTime="0:0:4.2" Duration="0:0:.2"></DoubleAnimation> 
        <DoubleAnimation Storyboard.TargetName="b3" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.2" To="1" Duration="0:0:0"/> 
        <DoubleAnimation Storyboard.TargetName="b3_" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.2" To="1" Duration="0:0:.1"/> 
        <DoubleAnimation Storyboard.TargetName="b3" Storyboard.TargetProperty="Background.RelativeTransform.ScaleX" To="1" Duration="0:0:.2" BeginTime="0:0:4.2"/> 
        <DoubleAnimation Storyboard.TargetName="b3" Storyboard.TargetProperty="Background.RelativeTransform.ScaleY" To="1" Duration="0:0:.2" BeginTime="0:0:4.2"/> 
        </Storyboard> 
       </BeginStoryboard>      
      </EventTrigger>     
      <MultiTrigger> 
       <MultiTrigger.Conditions> 
        <Condition Property="IsMouseOver" Value="True"/> 
        <Condition SourceName="b1" Property="Opacity" Value="0"/> 
       </MultiTrigger.Conditions> 
       <MultiTrigger.EnterActions> 
        <BeginStoryboard> 
        <Storyboard> 
        <ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FF1ECD97" Duration="0:0:.3"> 
        </ColorAnimation> 
        <ColorAnimation Storyboard.TargetProperty="Foreground.Color" To="White" Duration="0:0:.3"> 
        </ColorAnimation> 
        <ThicknessAnimation Storyboard.TargetProperty="BorderThickness" To="0" Duration="0:0:0"> 
         </ThicknessAnimation> 
        </Storyboard> 
       </BeginStoryboard> 
       </MultiTrigger.EnterActions> 
       <MultiTrigger.ExitActions> 
        <BeginStoryboard> 
        <Storyboard> 
        <ColorAnimation Storyboard.TargetProperty="Background.Color" To="Transparent" Duration="0:0:.3"> 
        </ColorAnimation> 
        <ColorAnimation Storyboard.TargetProperty="Foreground.Color" To="#FF1ECD97" Duration="0:0:.3"> 
        </ColorAnimation> 
        <ThicknessAnimation Storyboard.TargetProperty="BorderThickness" To="2" Duration="0:0:0"> 
         </ThicknessAnimation> 
        </Storyboard> 
       </BeginStoryboard> 
       </MultiTrigger.ExitActions> 
      </MultiTrigger>         
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Button.Template> 
</Button> 

Answer 2

你所调用动画不动画。这只是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> 

我们在效果添加的鼠标，我们只需要一个Trigger添加到ControlTemplate到改变Button.Background和Button.Foreground的颜色时，UIElement.IsMouseOver属性是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>