0

私はランダムに2つの長方形を生成しています。最初の長方形はそのままですが、2番目の長方形を移動/アニメーション化して、右下隅が最初の左上隅が占める位置と等しくなるようにしたいです。基本的にはあります。

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

これはタイマーイベント内にありますが、明らかに私が望むものではありません。上記の複数のバリエーションを試しましたが、どれもうまくいかないようです。

これには、面倒なほど簡単な答えがあると確信しています。

前もって感謝します。

4

2 に答える 2

2

画面の左上が で、右下が であると仮定すると、{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. 各タイマー イベントで、アニメーションの四角形の位置にdxandを追加するだけです。dy

そのようです：

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

もちろん、グラフィカル フレームワークを使用して何かを描画している場合は、上記の処理を実行できるアニメーション フレームワークに既にアクセスしている可能性があります。

于 2012-05-31T15:13:59.443 に答える
0

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; }

}
于 2012-05-31T15:33:11.807 に答える