Возможна ли анимация формы в 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

Самое сложное - это оживление кругового прогресса. Если вы используете codebehind, это не так проблематично. Но я пытался использовать чистый XAML. В codebehind мы можем вычислить Point примерно ArcSegment с соответствующим углом и соответствующим образом обновить ArcSegment. Но в XAML мы должны использовать некоторые хакеры. Для создания этого эффекта мне пришлось использовать 4 слоя границ. Во-первых, я попробовал всего 2 слоя, но поскольку изменение фона во время анимации просто заставляет анимацию работать неправильно.

Я сосредоточусь главным образом на круговом прогрессе, потому что это самая сложная проблема при решении с помощью чистого XAML. В основном вам нужна некоторая фоновая граница с двумя половинами с разными цветами, делающими полный круг. Левая половина серая, правая половина имеет активный (прогрессирующий) цвет. Эта граница фиксируется:

Вам нужен другой Border также с 2-х разных половинах. Его левая половина прозрачна, а ее правая половина имеет активный/прогрессирующий цвет. Эта граница будет повернута (на самом деле его фона вращается) во второй фазе после первой фазы на 180 градусов поворачивается:

Следующая Граница будет использоваться в первой фазе. Эта граница также имеет две разные половины.Левая половина прозрачна, а правая половина неактивна:

Так первоначально, эти три границы сделает полный затененный серый цвет круга (левая неактивна половина первой границы, право неактивна половины из третий):

В первой фазе, третья граница 180 градусов поворачивается. Его серая половина постепенно откроет нижнюю часть активной половины второй границы, что приведет к прогрессированию от 0 до 180 градусов. После этого первый этап был завершен. Третья граница будет скрыта, вторая граница будет повернута. Теперь его активная цветная половина (правая половина) будет постепенно покрывать серовую половину первой границы (слева) и сделать эффект прогрессирующим от 180 до 360 (полный активного цвета).

Есть еще другие пограничные слои для последнего эффекта отображения тикка, ... Вот полный код. Он довольно длинный и в основном используется для справки, вам, возможно, придется его значительно улучшить, чтобы его можно было использовать в вашем коде. Я просто использовал простые анимации (без ослабления):

<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 закругленные углы, вам просто нужно поставить свой собственный ControlTemplate для Button:

<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>