c# - 如何逐像素移动图像？

Question

所以我有 2 个 Image 我希望第一个 Image 移动到另一个 Image 我有两个 X,Y 坐标，如果我希望它逐个像素地向目标 Image 移动，应该如何完成？

切记，我正在使用 Windows-Universal 我已经尝试过 DoubleAnimation 但我在这方面的知识真的很糟糕，我不知道该去哪里开始。 Image 有时必须沿对角线移动(横向)，而不是向右移动然后向上移动。

我应该怎么做？

这是我目前所拥有的:

    private void MoveToTarget_Start()
    {
        moveToTimer = new DispatcherTimer();
        moveToTimer.Tick += MoveToTarget_Tick;
        moveToTimer.Interval = new TimeSpan(0, 0, 0, 0, 1);
        moveToTimer.Start();
    }

    void MoveToTarget_Tick(object sender, object e)
    {


    }

Answer 1

首先，您需要知道需要移动多少像素。为此，我们可以尝试检索每个元素的绝对位置并比较它们(可能有更直接的方法，我只是不知道如何):

private Point GetAbsolutePosition(UIElement element)
{
   var ttv = element.TransformToVisual(Window.Current.Content);
   return ttv.TransformPoint(new Point(0, 0));
}

(取自this answer)

从那里，我们检索每个元素的点并计算差异:

var position1 = GetAbsolutePosition(Image1);
var position2 = GetAbsolutePosition(Image2);

var offsetX = position2.X - position1.X;
var offsetY = position2.Y - position1.Y;

现在，我们现在需要在每个轴上移动多少像素。我们为元素添加 TranslateTransform(事先直接从 XAML 执行此操作可能更好):

var translateTransform = new TranslateTransform();
image1.RenderTransform = translateTransform;

最后，我们创建动画，并以 TranslateTransform 为目标。然后我们将它们分组到 Storyboard 中，然后启动它:

var animationX = new DoubleAnimation()
{
    From = 0,
    To = offsetX,
    Duration = TimeSpan.FromSeconds(2)
};

var animationY = new DoubleAnimation()
{
    From = 0,
    To = offsetY,
    Duration = TimeSpan.FromSeconds(2)
};

Storyboard.SetTarget(animationX, translateTransform);
Storyboard.SetTargetProperty(animationX, "X");

Storyboard.SetTarget(animationY, translateTransform);
Storyboard.SetTargetProperty(animationY, "Y");

var storyboard = new Storyboard();

storyboard.Children.Add(animationX);
storyboard.Children.Add(animationY);

storyboard.Begin();