如何在WPF中实现TranslateTransform和ScaleTransform的动画效果

4

我正在尝试使用代码后台中的StoryBoard同时对RectangleTranslateTransformScaleTransform进行动画处理。我研究了一些类似的问题,但是在第一步上仍然卡住了。

<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),
        };
    }
2个回答

7
在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>

在代码后台,使用transforms上的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);

我不需要故事板吗? - Vahid
2
如果您想同时启动所有动画,则不需要故事板。 - tsandy

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接