WPF 图像转换

Question

我有简单的图形图像，我想在触发事件时对其进行转换。变换是指改变宽度或将其移动到另一个位置。

现在，我使用工具箱的图像元素和通过故事板的动画，例如 DoubleAnimation 或 ThicknessAnimation。

但出现了以下问题：

1. 改变宽度时图像闪烁，
2. 图像质量变化，WPF是否支持矢量图形？

关于1.我的问题是，是否应该使用其他动画。

---

所以我尝试了转换，请参阅代码：

    <Image Height="150" HorizontalAlignment="Left" Margin="12,0,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Source="images/side_view.jpg" Width="1244">
        <Image.RenderTransform>
            <ScaleTransform x:Name="Minimize"  ScaleX="1.0" ScaleY="1.0"/>
        </Image.RenderTransform>
    </Image>

    <Button Content="Next Train" Height="23" HorizontalAlignment="Left" Margin="528,233,0,0" Name="btnNext" VerticalAlignment="Top" Width="75" />
    <Grid.Triggers>
        <EventTrigger RoutedEvent="Button.Click" SourceName="btnNext">
            <BeginStoryboard>
                <Storyboard TargetName="Minimize" TargetProperty="ScaleX">
                    <DoubleAnimation To="0.65" Duration="0:0:2"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>

与我应用于宽度和边距的动画效果相同。然而，它仍然闪烁！有没有合理的解释？

Answer 1

如果您要对图像的宽度进行动画处理，则需要让 WPF 重新渲染该图像，并每次都从头开始创建它。它经历了布局过程和渲染过程，这使得它闪烁并且无法发挥最佳效果。

这里最好的选择是对 ScaleTransform 进行动画处理。 ScaleTransform 完全通过 DirectX 在硬件中完成，因此速度极快，不会闪烁，并且图像质量在整个过程中应该保持几乎相同。 （当然，除非您大幅调整其大小，在这种情况下您将失去精确度。）