如何逐像素移动图像？

Question

所以我有 2 个 Image's 我希望第一个 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();

Answer 2

说实话，最好的办法是使用 DoubleAnimation 和 Storyboard 类。 我会将背景设置为 Canvas 然后您可以通过 Canvas.SetLeft 和 Canvas.SetTop 属性对其进行动画处理。

首先你应该创建 DoubleAnimationC 类

DoubleAnimation da = new DoubleAnimation()
{
  SpeedRatio = 3.0,
  AutoReverse = false,
  From = 0 
  To = 100
  BeginTime = TimeSpan.FromSeconds(x),
};


Storyboard.SetTarget((Timeline)doubleAnimation, YOUR IMAGE);
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Top)"));

当然可以根据需要更改这些属性，现在我们必须创建包含动画的 StoryBoard 类

Storyboard sb = new Storyboard();
sb.Children.Add(da);
sb.Start();

希望对你有帮助！