TranslateTransform 和 Canvas.SetLeft 引起的 WPF 抖动
移动控件的 X、Y 坐标时,我遇到了“抖动”问题。基本上,我让动画以两种不同的方式工作:1)X 属性的 TranslateTransform,以及 2)调用 Canvas.SetLeft 的计时器。这两者都会导致图像移动,但不平滑。
XAML:
<Canvas Margin="0" Name="CanvasContainer">
<Canvas Margin="0" Name="FirstCanvas" Background="White">
<Image Name="FirstImage" Opacity="1" Margin="0,0,0,0" Canvas.Left="0" Canvas.Top="0" Source="someImage.png" />
</Canvas>
<Canvas Margin="0" Name="SecondCanvas" Background="DarkOrange">
<Image Name="SecondImage" Opacity="1" Margin="0,0,0,0" Canvas.Left="0" Canvas.Top="0" Source="anotherImage.png" />
</Canvas>
</Canvas>
TranslateTransform:
private void StartMovement(double startX, double endX, double milliseconds = 1000)
{
GuiDispatcher.Invoke(DispatcherPriority.Normal, new Action<Canvas, double, double, double>(MoveTo), Canvas, startX, endX, milliseconds);
}
private void MoveTo(Canvas canvas, double startX, double endX, double milliseconds)
{
canvas.RenderTransform = new TranslateTransform();
var animation = new DoubleAnimation(startX, endX, TimeSpan.FromMilliseconds(milliseconds));
canvas.RenderTransform.BeginAnimation(TranslateTransform.XProperty, animation);
}
是否有更好的方法来完成此任务,或者我是否设置错误?任何帮助将不胜感激。
I'm running into a problem of "jitters" when moving the X, Y coordinates of controls. Basically, I got an animation to work two different ways: 1) TranslateTransform of the X property, and 2) A Timer that calls Canvas.SetLeft. Both of which cause the image to move, but not smoothly.
XAML:
<Canvas Margin="0" Name="CanvasContainer">
<Canvas Margin="0" Name="FirstCanvas" Background="White">
<Image Name="FirstImage" Opacity="1" Margin="0,0,0,0" Canvas.Left="0" Canvas.Top="0" Source="someImage.png" />
</Canvas>
<Canvas Margin="0" Name="SecondCanvas" Background="DarkOrange">
<Image Name="SecondImage" Opacity="1" Margin="0,0,0,0" Canvas.Left="0" Canvas.Top="0" Source="anotherImage.png" />
</Canvas>
</Canvas>
TranslateTransform:
private void StartMovement(double startX, double endX, double milliseconds = 1000)
{
GuiDispatcher.Invoke(DispatcherPriority.Normal, new Action<Canvas, double, double, double>(MoveTo), Canvas, startX, endX, milliseconds);
}
private void MoveTo(Canvas canvas, double startX, double endX, double milliseconds)
{
canvas.RenderTransform = new TranslateTransform();
var animation = new DoubleAnimation(startX, endX, TimeSpan.FromMilliseconds(milliseconds));
canvas.RenderTransform.BeginAnimation(TranslateTransform.XProperty, animation);
}
Is there a better method for accomplishing this, or do I have something set up wrong? Any help would be appreciated.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
这两种方法通常都适用于 WPF 中的动画。如果图像移动不顺畅,我有几个问题。
如果由于图像移动得太远太快而导致帧速率问题,您可以通过设置
Timeline.DesiredFrameRate
属性:在 WPF 中,默认目标帧率为 60,并且没有意味着有保证。但这种附加属性的主要用途之一是减少水平撕裂,因此它可能会有所帮助。
Either of those methods are generally fine for animations in WPF. If the image isn't moving smoothly, I have a few of questions.
If it is a framerate issue because the image is moving too far too quickly, you can increase the desired framerate by setting the
Timeline.DesiredFrameRate
property:In WPF, the default target framerate is 60, and is by no means guaranteed. But one of the primary uses for this attached property is to decrease horizontal tearing, so it might help.