2017-05-28 10 views
0

forループを使用して、ある行から別の行にコントロールを移動するアニメーションを実装しようとしています。forループのアニメーションwpfコントロール

private void AnimateStoryBoard(int number) 
    { 
     Storyboard _currentStoryBoard = new Storyboard(); 

     //Row Animation 
     Int32Animation newrowanimation = new Int32Animation(); 
     newrowanimation.From = number; 
     newrowanimation.To = number+1; 
     newrowanimation.Duration = new TimeSpan(0, 0, 0, 0, 500); 

     Storyboard.SetTargetProperty(newrowanimation, new PropertyPath("(Grid.Row)")); 

     _currentStoryBoard.Children.Add(newrowanimation); 

     Storyboard.SetTarget(newrowanimation, myrectangle); 

     _currentStoryBoard.Begin(); 
    } 

と、私はこれを実行すると、私は今

 for (int i = 0; i < 10; i++) 
     { 
      AnimateStoryBoard(i); 
     } 

を使用して、それを呼び出していますが、私は、アニメーションは、1〜2、その後2〜3その後、3から4 ... 9-10に行きたいです。しかし、アニメーションは直接9と10にスキップします。

また、XAMLでこれを行うことはできますか?ここの番号10は単なる例です。コードビハインドから番号を取得する必要があります。変化し続ける。

+1

次のアニメーションを開始する前に、前のアニメーションが終了するのを待つことはありません。これにより、最後のアニメーションがそのまま残ります。ループ内でアニメーションが終了するのを待つ必要があります –

+0

これは以前に質問した質問とまったく同じです:https://stackoverflow.com/questions/44212995/repeating-storyboard-animation-using-for-loop 。質問を削除して再投稿しないでください。 **あなたが最初に投稿した質問を修正してください。** –

答えて

2

私見車輪の再発明する必要はありません:key frame animationは、この目的のためにも意図されています。

Storyboard storyBoard = new Storyboard(); 
int gridRowLimit = 5; // here you can set how many rows your grid has 

Int32AnimationUsingKeyFrames intKeyFrame = new Int32AnimationUsingKeyFrames(); 
intKeyFrame.Duration = new TimeSpan(0, 0, 0, 0, gridRowLimit * 500); 

for (int i = 1; i < gridRowLimit; i++) 
{ 
    intKeyFrame.KeyFrames.Add(new DiscreteInt32KeyFrame(i)); 
} 

Storyboard.SetTargetProperty(intKeyFrame, new PropertyPath("(Grid.Row)")); 
Storyboard.SetTarget(intKeyFrame, yourControl); 

storyBoard.Children.Add(intKeyFrame); 
storyBoard.Begin(); 

私はそれが役に立てば幸い:

だから、あなたが必要とするアニメーションを作成するために、次のようなものを使用することができます。

+0

ちょうど私が望んでいた.. – Rohit

2

アレクサンダー・クレア(Alexander Clare)がコメントで述べたように、ストーリーボードにはいくつかのアニメーションを設定する必要があります。ループを使用しているソリューションは、ループ実行中にメソッドが返ってこないため、UIスレッドはストーリーボード/アニメーションによって発生した変更をレンダリングできないため、機能しません。

1つの解決策は、その中に可変数のアニメーション(行ごとに1つのアニメーション)を含む単一のStoryboardインスタンスです。アニメーションをずらすには、BeginTimeプロパティを使用します。これらのアニメーションの間に40ms〜100msの値を使用することをお勧めします(20ms以下には進まない)。

のコードでは、これは次のようになります:

private void AnimateStoryboard(int number) 
{ 
    // Create the storyboard that will be played 
    var storyboard = new Storyboard(); 

    // Create the animation objects for each row change and add them to the storyboard 
    var currentBeginTime = TimeSpan.Zero; 
    for (var i = 0; i < number; i++) 
    { 
     var animation = new Int32Animation(); 
     // Set all the properties that you set on your animation objects before, and additionally use BeginTime 
     animation.BeginTime = currentBeginTime; 
     storyboard.Children.Add(animation); 

     // Update the currentBeginTime to achieve the staggering effect 
     currentBeginTime += TimeSpan.FromMilliseconds(50); 
    } 

    // Finally, start the Storyboard to run all animations 
    storyboard.Begin(); 

} 
関連する問題