WPF 图像转换
我有简单的图形图像，我想在触发事件时对其进行转换。变换是指改变宽度或将其移动到另一个位置。
现在，我使用工具箱的图像元素和通过故事板的动画，例如 DoubleAnimation 或 ThicknessAnimation。
但出现了以下问题：
- 改变宽度时图像闪烁，
- 图像质量变化，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>
与我应用于宽度和边距的动画效果相同。然而，它仍然闪烁！有没有合理的解释？
I have simple graphic images which I would like to transform on triggered events. Transform means change the width or move it to another position.
For now I use the Image element of the toolbox and Animations via Storyboard, for instance DoubleAnimation or ThicknessAnimation.
However the following issues arise:
- the images flickers when changing the width
- the image quality varies, does WPF support vector graphics?
Regarding 1. my question is, if other animations should be used.
So I tried the Transformation, see the code :
<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>
Works the same as the Animation I applied to width and margin. However, it still flickers! Are there any reasonable explanations?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果您要对图像的宽度进行动画处理，则需要让 WPF 重新渲染该图像，并每次都从头开始创建它。它经历了布局过程和渲染过程，这使得它闪烁并且无法发挥最佳效果。
这里最好的选择是对 ScaleTransform 进行动画处理。 ScaleTransform 完全通过 DirectX 在硬件中完成，因此速度极快，不会闪烁，并且图像质量在整个过程中应该保持几乎相同。 （当然，除非您大幅调整其大小，在这种情况下您将失去精确度。）
If you're animating the Width of an image, you're making WPF re render the image, and create it from scatch each time. It goes through both the Layout process and the Rendering process, which makes it flicker and not work as best as it could be.
The best option here is to animate a ScaleTransform. ScaleTransform is done completely in hardware via DirectX and therefor will be extremlely fast, it won't flicker, and the image quality should stay pretty much the same the whole way. (unless ofcourse you are resizing it substantially in which case you'll lose percision.)