如何逐个像素地移动图像？

Question

So I have 2 Image 's I want the first Image to move towards the other Image I have both X,Y coordinates, how should this be done if I want it moving pixel by pixel towards the target Image ?

Bare in mind, I'm using Windows-Universal I've tried DoubleAnimation but my knowledge in that stuff is really bad, I don't know where to start. The Image would sometimes have to move diagonally (across) rather than moving right then up.

How should I do this?

This is what I have so far:

    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

First, you need to know how many pixels you need to move. For that, we can try to retrieve the absolute position of each element and compare them (there may be a more straightforward way, I just don't know how):

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

(taken from this answer )

From there, we retrieve the point of each element and compute the difference:

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

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

Now, we now of how many pixels we'll have to move on each axis. We add the TranslateTransform for the element (it may be better to do that beforehand directly from the XAML):

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

Finally, we create the animations, and target the TranslateTransform . Then we group them in a Storyboard, and start it:

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

To be honest the best idea is to use DoubleAnimation and Storyboard classes. I would set background as Canvas then You can animate it throught Canvas.SetLeft and Canvas.SetTop properties.

First You should create 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)"));

Of course change those properties as You like and now we must create StoryBoard class which will contains our animation

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

Hope it helps!