如何爲WPF中的TranslateTransform和ScaleTransform生成動畫

Question

我試圖在代碼隱藏的同時使用StoryBoard同時動畫TranslateTransform和ScaleTransform的Rectangle。我研究了一些類似的問題，但我仍然堅持第一步。

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 
    <Rectangle x:Name="MyRectangle" Width="100" Height="100" Fill="Aqua"></Rectangle> 
    <Button Grid.Row="1" Content="Animate" Click="ButtonBase_OnClick"/> 
</Grid> 

    private void ButtonBase_OnClick(object sender, RoutedEventArgs e) 
    { 
     var translate_x = new DoubleAnimation() 
     { 
      From = 0, 
      To = 100, 
      Duration = TimeSpan.FromSeconds(5), 
     }; 
     var translate_y = new DoubleAnimation() 
     { 
      From = 0, 
      To = 100, 
      Duration = TimeSpan.FromSeconds(5), 
     }; 

     var scale_x = new DoubleAnimation() 
     { 
      From = 1, 
      To = 2, 
      Duration = TimeSpan.FromSeconds(5), 
     }; 

     var scale_y = new DoubleAnimation() 
     { 
      From = 1, 
      To = 2, 
      Duration = TimeSpan.FromSeconds(5), 
     }; 
    } 

Answer 1

在XAML中，給你一個長方形的TransformGroup：

<Rectangle x:Name="MyRectangle" Width="100" Height="100" Fill="Chartreuse"> 
    <Rectangle.RenderTransform> 
     <TransformGroup> 
      <ScaleTransform x:Name="rectScale"/> 
      <TranslateTransform x:Name="rectTrans"/> 
     </TransformGroup> 
    </Rectangle.RenderTransform> 
</Rectangle> 

在後臺代碼，請使用變換的BeginAnimation方法：

rectScale.BeginAnimation(ScaleTransform.ScaleXProperty, scale_x); 
rectScale.BeginAnimation(ScaleTransform.ScaleYProperty, scale_y); 
rectTrans.BeginAnimation(TranslateTransform.XProperty, translate_x); 
rectTrans.BeginAnimation(TranslateTransform.YProperty, translate_y);