WPF動畫多個按鈕

Question

我有一個控制5個按鈕，我想讓他們所有人都點對點移動時對角線。

這樣做的最好方法是什麼？如果它是一個按鈕，我可以使用Storyboard和DoubleAnimate，但我相信如果我將它應用於多個按鈕，它們會逐個移動，而不是同時移動。

我該如何讓他們都在同一時間？

Answer 1

如果我已經正確理解了您的情況，一個選項可能是將按鈕放在一個容器上，如Grid併爲網格添加動畫。

下面是一個爲託管一組按鈕的網格生成動畫的簡單示例。

<Window x:Class="PanelAnimate.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525"> 
    <Grid>  
    <Grid Name="controlWithButtons" Height="25">   
     <Grid.Triggers> 
     <!-- Button.Click will trigger the animation --> 
     <EventTrigger RoutedEvent="Button.Click"> 
      <EventTrigger.Actions> 
      <!-- Animate the X,Y translation --> 
      <BeginStoryboard>    
       <Storyboard Storyboard.TargetName="translateButtons"> 
       <DoubleAnimation Storyboard.TargetProperty="X" By="20" Duration="0:0:0.1" /> 
       <DoubleAnimation Storyboard.TargetProperty="Y" By="20" Duration="0:0:0.1" /> 
       </Storyboard>    
      </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 
     </Grid.Triggers> 

     <!-- Setup a translation transform which is animated when a button is clicked --> 
     <Grid.RenderTransform> 
     <TranslateTransform x:Name="translateButtons" /> 
     </Grid.RenderTransform> 

     <!-- the buttons on the control --> 
     <StackPanel Orientation="Horizontal"> 
     <Button Content="Button1" /> 
     <Button Content="Button2" /> 
     <Button Content="Button3" /> 
     <Button Content="Button4" /> 
     <Button Content="Button5" /> 
     </StackPanel> 
    </Grid> 
    </Grid> 
</Window> 

Answer 2

如果您可以將元素包裝到StackPanel或Grid中，則可以使用Storyboard爲該面板製作動畫。

Answer 3

如果你想讓他們一個一個地動畫，你可以嘗試這樣的事情。

<Page 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Page.Resources> 
    <Storyboard x:Key="jumpStoryBoardXX"> 
     <DoubleAnimation Storyboard.TargetProperty="RenderTransform.X" 
     To="20" Duration="0:0:0.2" /> 
     <DoubleAnimation AutoReverse="True" Storyboard.TargetProperty="RenderTransform.X" 
     From="0" To="-20" Duration="0:0:0.2" /> 
    </Storyboard> 

    <Style TargetType="{x:Type Button}"> 
     <Setter Property="RenderTransformOrigin" Value="0.6, 0.2"/> 
     <Setter Property="RenderTransform"> 
     <Setter.Value> 
      <TranslateTransform /> 
     </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
     <EventTrigger RoutedEvent="Button.MouseEnter"> 
      <EventTrigger.Actions> 
      <BeginStoryboard Storyboard="{StaticResource jumpStoryBoardXX}" /> 
      </EventTrigger.Actions> 
     </EventTrigger> 
     </Style.Triggers> 
    </Style> 
    </Page.Resources> 
    <StackPanel> 
    <StackPanel Orientation="Horizontal"> 
     <Button Height="50" Width="50" Content="V" /> 
     <Button Height="50" Width="50" Content="I" /> 
     <Button Height="50" Width="50" Content="N" /> 
     <Button Height="50" Width="50" Content="O" />  
     <Button Height="50" Width="50" Content="D" /> 
     <Button Height="50" Width="50" Content="H" /> 
    </StackPanel> 
    </StackPanel> 
</Page>