動畫一個WPF路徑

我有一個路徑的單個點，即基本上是一個三角形：動畫一個WPF路徑

<Path Data="M0,0 15,0 15,25" Fill="{Binding Background}"/>

我想有一個數據觸發器（綁定到一個布爾值），將啓動的動畫將崩潰這個三角形當布爾值爲真時，當它錯誤時恢復。我還沒有能夠弄清楚如何做到這一點。

具體地，沿此方向塌陷： 0,0 15,0 15,25 5,0 15,0 15,25 10,0 15,25 15,0 15,0 15 15,0， 25

感謝您的幫助！

來源

2012-11-26 JonD

那麼我做了一個叫做Expression Blend的小騙子。但是你可以看到它是如何完成的。總是有選擇。

<Window 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
x:Class="WpfApplication1.MainWindow" 
x:Name="Window" 
Title="MainWindow" 
Width="640" Height="480"> 
<Window.Resources> 
    <Storyboard x:Key="CollapseTriangel"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="path"> 
      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.748"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.496"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0.195"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-0.007"/> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="path"> 
      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="20.25"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1" Value="40.5"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="64.75"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:2" Value="81"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
    <Storyboard x:Key="ExpandTriangel"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="path"> 
      <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="0.195"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:1" Value="0.496"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="0.748"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="path"> 
      <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="64.75"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:1" Value="40.5"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="20.25"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:2" Value="0"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
</Window.Resources> 
<Window.Triggers> 
    <EventTrigger RoutedEvent="FrameworkElement.Loaded"/> 
    <EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="checkBox"> 
     <BeginStoryboard x:Name="CollapseTriangel_BeginStoryboard" Storyboard="{StaticResource CollapseTriangel}"/> 
    </EventTrigger> 
    <EventTrigger RoutedEvent="ToggleButton.Unchecked" SourceName="checkBox"> 
     <BeginStoryboard x:Name="ExpandTriangel_BeginStoryboard" Storyboard="{StaticResource ExpandTriangel}"/> 
    </EventTrigger> 
</Window.Triggers> 

<Grid x:Name="LayoutRoot"> 
    <Path x:Name="path" Data="M159.5,239.5 L399.5,239.5 279.5,79.5 z" Fill="#FF0202FF" Margin="159.5,79.5,223.5,201.5" Stretch="Fill" Stroke="Black" RenderTransformOrigin="0.5,0.5"> 
     <Path.RenderTransform> 
      <TransformGroup> 
       <ScaleTransform/> 
       <SkewTransform/> 
       <RotateTransform/> 
       <TranslateTransform/> 
      </TransformGroup> 
     </Path.RenderTransform> 
    </Path> 
    <CheckBox x:Name="checkBox" Content="CheckBox" HorizontalAlignment="Left" Margin="80,0,0,201.5" VerticalAlignment="Bottom"/> 
</Grid> 
</Window>

當您有故事板時，您可以隨時更改觸發器。

正如你想要的基於布爾值。例如像這樣：

<Window 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
x:Class="WpfApplication1.MainWindow" 
x:Name="Window" 
Title="MainWindow" 
Width="640" Height="480"> 
<Window.Resources> 
    <Storyboard x:Key="CollapseTriangel"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="path"> 
      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.748"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.496"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0.195"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-0.007"/> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="path"> 
      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="20.25"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1" Value="40.5"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="64.75"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:2" Value="81"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
    <Storyboard x:Key="ExpandTriangel"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="path"> 
      <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="0.195"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:1" Value="0.496"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="0.748"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="path"> 
      <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="64.75"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:1" Value="40.5"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="20.25"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:2" Value="0"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
</Window.Resources> 
<Control> 
<Control.Template> 
    <ControlTemplate> 
      <Grid x:Name="LayoutRoot"> 
       <Path x:Name="path" Data="M159.5,239.5 L399.5,239.5 279.5,79.5 z" Fill="#FF0202FF" Margin="159.5,79.5,223.5,201.5" Stretch="Fill" Stroke="Black" RenderTransformOrigin="0.5,0.5"> 
        <Path.RenderTransform> 
         <TransformGroup> 
          <ScaleTransform/> 
          <SkewTransform/> 
          <RotateTransform/> 
          <TranslateTransform/> 
         </TransformGroup> 
        </Path.RenderTransform> 
       </Path> 
       <CheckBox x:Name="checkBox" Content="CheckBox" HorizontalAlignment="Left" Margin="80,0,0,201.5" VerticalAlignment="Bottom"/> 
      </Grid> 
     <ControlTemplate.Triggers> 
      <Trigger SourceName="checkBox" Property="IsChecked" Value="True"> 
       <Trigger.EnterActions> 
        <BeginStoryboard x:Name="CollapseTriangel_BeginStoryboard" Storyboard="{StaticResource CollapseTriangel}"/> 
       </Trigger.EnterActions> 
       <Trigger.ExitActions> 
        <BeginStoryboard x:Name="ExpandTriangel_BeginStoryboard" Storyboard="{StaticResource ExpandTriangel}"/> 
       </Trigger.ExitActions> 
      </Trigger> 
     </ControlTemplate.Triggers> 
    </ControlTemplate> 
</Control.Template> 
</Control> 
</Window>

編輯

請保留一件事在你的心中。如果你想直接應用你的觸發器到元素，它可能只有EventTrigger。如果要使用Trigger或DataTrigger，則必須將其放入Style或ControlTemplate。這就是爲什麼我把Control加到我的第二個例子。

來源

2012-11-26 19:51:04

如果你需要一些額外的信息，請讓我知道。我總是很樂意提供幫助。 –

只需將此代碼粘貼到Visual Studio窗口中，並且它看起來完全符合我的需要。要做出我需要的調整，它應該是完美的。非常感謝您的快速響應！ – JonD

將我的調整添加到了下面的代碼中。唯一我不喜歡使用Blend生成XAML的東西是它粘在一堆不需要的東西中。當然，獲得正確的語法非常好！ – JonD

這是我上面代碼的簡化版本。我拿出了額外的不必要的關鍵幀，並拿出了未被使用的額外轉換。最後，我拿出了額外的動畫，將其滑動到一邊，而只是將RenderTransformOrigin設置爲1（最初爲.5）。所有的信貸仍然會去維克多拉克魯瓦的原始來源！

<Window x:Class="WpfApplication1.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Width="640" Height="480"> 

<Window.Resources> 
    <Storyboard x:Key="CollapseTriangel"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="path"> 
      <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
    <Storyboard x:Key="ExpandTriangel"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="path"> 
      <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
</Window.Resources> 
<Window.Triggers> 
    <EventTrigger RoutedEvent="FrameworkElement.Loaded"/> 
    <EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="checkBox"> 
     <BeginStoryboard x:Name="CollapseTriangel_BeginStoryboard" Storyboard="{StaticResource CollapseTriangel}"/> 
    </EventTrigger> 
    <EventTrigger RoutedEvent="ToggleButton.Unchecked" SourceName="checkBox"> 
     <BeginStoryboard x:Name="ExpandTriangel_BeginStoryboard" Storyboard="{StaticResource ExpandTriangel}"/> 
    </EventTrigger> 
</Window.Triggers> 

<Grid x:Name="LayoutRoot"> 
    <Path x:Name="path" Data="M0,0 15,0 15,25" Fill="#FF0202FF" HorizontalAlignment="right" Stretch="Fill" Stroke="Black" RenderTransformOrigin="1,0.5"> 
     <Path.RenderTransform> 
      <TransformGroup> 
       <ScaleTransform/> 
      </TransformGroup> 
     </Path.RenderTransform> 
    </Path> 
    <CheckBox x:Name="checkBox" Content="CheckBox" HorizontalAlignment="Left" Margin="80,0,0,201.5" VerticalAlignment="Bottom"/> 
</Grid>

來源

2012-11-26 20:47:53 JonD

動畫一個WPF路徑

回答

相關問題