如何在 WPF 中为 TranslateTransform 和 ScaleTransform 设置动画

Posted 2023-03-29

【中文标题】如何在 WPF 中为 TranslateTransform 和 ScaleTransform 设置动画

【英文标题】：How to animate TranslateTransform and ScaleTransform in WPF

【发布时间】：2015-10-11 11:12:32

【问题描述】：

我正在尝试在代码隐藏中同时使用StoryBoard 为Rectangle 的TranslateTransform 和ScaleTransform 设置动画。我研究了一些类似的问题，但我知道我仍然停留在第一步。

<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),
        ;
    

【参考方案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);

【讨论】：

我不需要情节提要？

如果你想同时开始所有的动画，你不需要故事板。

【参考方案2】：

如果rectScale.BeginAnimation() 不起作用，请尝试 rectScale.RenderTransform.BeginAnimation(ScaleTransform.ScaleXProperty, scale_x);