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步中完成一些工作，以确保在每一步中移动偶数像素。

以下是基本算法，伪代码：

计算动画矩形左上角的最终位置：finalPos = {r1.x + r1.width, r1.y+r1.width}
确定您想要的步数，并计算矩形每步应移动的距离。我们以100步为例。 dx = r2.x - finalPos.x / 100，dy = r2.y - finalPos.y / 100
在每个计时器事件中，您只需将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; }

}

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

2 个答案: