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>