如何逐像素移动图像？

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

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

首先你应该创建 DoubleAnimationC class

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 class，它将包含我们的动画

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

希望对您有所帮助！

Answer 2

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

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();

如何逐像素移动图像？

How to move an image pixel by pixel?

c#

image

win-universal-app