如何逐個像素地移動圖像？

所以我有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) 
    { 


    }

來源

2015-10-21 KTOV

首先，你需要知道你需要移動多少個像素。對於這一點，我們可以嘗試檢索每個元素的絕對位置並加以比較（有可能是一個更簡單的方法，我只是不知道如何）：

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

來源

2015-10-21 10:02:15

這確實啓動了一個動畫，我想要移動的'Image'只是向上移動一個像素並向下移動一個像素，但是它不會移動到目標Image處。事情是，我的主要'Grid'分成3個'Columns'，我想移動的'Image'在'Column 1'中，我想讓它移動到'Column 3'的'Image'，這是這是因爲什麼？ – KTOV

@KTOV這不應該是一個問題，因爲我們正在使用絕對位置。你能否檢查'GetAbsolutePoint'返回的位置是否正確？這部分只是我從另一個問題採取的一些代碼，我沒有測試它 –

是的，它完美的工作！只是爲了讓你知道，在你的回答中，你需要在'GetAbsolutePosition（）'中更改'var offsetY = position2.Y - position2.Y;'到'var offsetY = position2.Y - position1.Y;'一個固定的'button'而不是使用傳入的'元素' – KTOV

說實話的最好的辦法是使用DoubleAnimation是和故事板類。我會將背景設置爲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 sb = new Storyboard(); 
sb.Children.Add(da); 
sb.Start();

希望它可以幫助故事板類！

來源

2015-10-21 09:48:50 miechooy

當你說「我將背景設置爲畫布」時，你是什麼意思？ – KTOV

動畫畫布位置是一個壞主意，因爲它每次都會重新計算佈局，因此不會受益於硬件加速。最好使用'TranslateTransform'來移動元素 –

@KooKiz你能舉個例子嗎？ – KTOV

如何逐個像素地移動圖像？

回答

相關問題