动画/将形状移动到特定坐标？

Question

我随机生成两个矩形，第一个矩形保留在它的位置，但我想移动/动画第二个矩形，使其右下角等于第一个顶部左上角占据的位置，atm我基本上已经是;

if(count != 300) 
{ 
    rect2.X = count + (rect1.X - 100); 
    rect2.Y = count + (rect1.Y - 100); 
    count +=2 
} 

这是一个计时器事件里面，但显然我想不太什么，我已经试过以上，但没有的多种变化似乎做的工作。

我敢肯定，会有一个令人讨厌的简单答案。

在此先感谢。

Answer 1

假设屏幕的左上角是{0,0}和右下是{screenWidth, screenHeight} 我也假设浮点这里坐标（即Rect.X是double或float）。如果不是，则需要在下面的第2步中执行一些操作，以确保在每一步中移动的像素数量均匀。

这里是基本的算法，在伪代码：

1. 计算的最终位置的动画矩形左上角：finalPos = {r1.x + r1.width, r1.y+r1.width}
2. 决定要多少步，并计算矩形应该移动多远每一步。 我们以100步为例。 dx = r2.x - finalPos.x/100，dy = r2.y - finalPos.y/100
3. 在每个计时器事件，你只需要添加dx和dy到您的动画矩形的位置：

像这样：

if (currentStep < 300) 
{ 
    r2.x += dx; 
    r2.y += dy; 
    currentStep++; 
} 
else 
{ 
    // We're done 
    timer.Stop(); 
} 

当然，如果你使用的是图形化的框架绘制东西，你可能已经可以访问一个动画框架，可以为你做上述事情。

Answer 2

如果你能够使用WPF它是非常简单的：

在窗口XAML：

<Window x:Class="WpfApplication6.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="600" Width="600"> 
    <Window.Triggers> 
     <EventTrigger RoutedEvent="Window.Loaded"> 
      <BeginStoryboard> 
       <Storyboard> 
        <DoubleAnimation 
         Storyboard.TargetName="AnimatedRect" 
         Storyboard.TargetProperty="(Canvas.Left)" 
         To="{Binding ElementName=FixedRect, Path=(Canvas.Left)}" Duration="0:0:1"/> 
        <DoubleAnimation 
         Storyboard.TargetName="AnimatedRect" 
         Storyboard.TargetProperty="(Canvas.Top)" 
         To="{Binding ElementName=FixedRect, Path=(Canvas.Top)}" Duration="0:0:1"/> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
    </Window.Triggers> 

    <Canvas> 
     <Rectangle Name="FixedRect" 
        StrokeThickness="2" 
        Stroke="Black" 
        Width="{Binding R1.Width}" 
        Height="{Binding R1.Height}" 
        Canvas.Left="{Binding R1.X}" 
        Canvas.Top="{Binding R1.Y}"/> 
     <Rectangle Name="AnimatedRect" 
        StrokeThickness="2" 
        Stroke="Black" 
        Width="{Binding R2.Width}" 
        Height="{Binding R2.Height}" 
        Canvas.Left="{Binding R2.X}" 
        Canvas.Top="{Binding R2.Y}"/> 
    </Canvas> 
</Window> 

代码隐藏：

public partial class MainWindow : Window 
{ 
    public MainWindow() 
    { 
     InitializeComponent(); 

     Random rnd = new Random(); 

     Rect r1 = new Rect(); 
     r1.X = rnd.Next(500); 
     r1.Y = rnd.Next(500); 
     r1.Width = rnd.Next(50,100); 
     r1.Height = rnd.Next(50, 100); 
     R1 = r1; 

     Rect r2 = new Rect(); 
     r2.X = rnd.Next(500); 
     r2.Y = rnd.Next(500); 
     r2.Width = rnd.Next(50, 100); 
     r2.Height = rnd.Next(50, 100); 
     R2 = r2; 


     DataContext = this; 
    } 

    public Rect R1 { get; set; } 
    public Rect R2 { get; set; } 

}