3

StoryboardWindows Phone アプリで使用しています。

<Canvas x:Name="myCanvas" Grid.Row="1">
  <Canvas.Resources>
    <Storyboard x:Name="sb">
      <ColorAnimationUsingKeyFrames 
             Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
             AutoReverse="True">
               <EasingColorKeyFrame KeyTime="00:00:0" Value="Black" />
               <EasingColorKeyFrame KeyTime="00:00:0.25" Value="Red" />
      </ColorAnimationUsingKeyFrames>
    </Storyboard>
  </Canvas.Resources>
</Canvas>

これをRectangle使用する予定の複数の がありますが、最初にしか機能しないようです。Storyboard

たとえば、次のコードは 4 つの異なるものを表示するために使用されますRectanglesが、最初の 1 つだけが表示されます。コードはエラーにはなりませんが、最後の 3Rectangle秒間は赤くStoryboardならず、実行さえしていないように見えます。

sb.Stop();
sb.SetValue(Storyboard.TargetNameProperty, myRect1.name);
sb.Begin();

sb.Stop();
sb.SetValue(Storyboard.TargetNameProperty, myRect2.name);
sb.Begin();

sb.Stop();
sb.SetValue(Storyboard.TargetNameProperty, myRect3.name);
sb.Begin();

sb.Stop();
sb.SetValue(Storyboard.TargetNameProperty, myRect4.name);
sb.Begin();

誰が私が間違っているのか、またはStoryboard再利用可能にする方法を知っていますか?

4

2 に答える 2

2

まず、あなたが間違っていること：

ストーリーボードの実行は非同期です。メソッドを呼び出すとStoryboard.Begin、ストーリーボードがバックグラウンドで開始され、コードが引き続き実行されます。したがって、あなたはそれStoryboard.Stopを開始した直後に呼び出しています！止めないのは最後の 1 つだけです。そのため、色が変化する唯一の長方形です。

アニメーションを連鎖させたい場合は、ストーリーボードがいつ終了するかを知るためにイベントをサブスクライブしてからCompleted、次のコントロールのために再開する必要があります。これを行う1つの方法を次に示します。

private Rectangle[] ControlsToAnimate;

private int CurrentIndex;

private void Button_Click(object sender, RoutedEventArgs e)
{
    this.ControlsToAnimate = new[] { this.Rectangle1, this.Rectangle2 };

    this.Storyboard1.Completed += StoryboardCompleted;
    this.AnimateNextControl();
}

private void AnimateNextControl()
{
    if (this.CurrentIndex >= this.ControlsToAnimate.Length)
    {
        this.CurrentIndex = 0;
        return;
    }

    var nextControl = this.ControlsToAnimate[this.CurrentIndex];

    this.CurrentIndex++;

    this.Storyboard1.Stop();
    this.Storyboard1.SetValue(Storyboard.TargetNameProperty, nextControl.Name);
    this.Storyboard1.Begin();
}

private void StoryboardCompleted(object sender, EventArgs e)
{
    this.AnimateNextControl();
}

ここで、次の 2 つの問題に直面します。

  1. ストーリーボードを新しいコントロールに割り当てると、前のコントロールの色は元の値 (ストーリーボードが開始される前) に戻ります。新しい値を保持したい場合は、保存する必要があります。

    private void AnimateNextControl()
{
    if (this.CurrentIndex > 0)
    {
        var brush = (SolidColorBrush)this.ControlsToAnimate[this.CurrentIndex - 1].Fill;
        brush.Color = brush.Color;
    }

    if (this.CurrentIndex >= this.ControlsToAnimate.Length)
    {
        this.CurrentIndex = 0;
        return;
    }

    var nextControl = this.ControlsToAnimate[this.CurrentIndex];

    this.CurrentIndex++;

    this.Storyboard1.Stop();
    this.Storyboard1.SetValue(Storyboard.TargetNameProperty, nextControl.Name);
    this.Storyboard1.Begin();
}

  2. 1 つのストーリーボードを使用して、同時に 2 つのコントロールをアニメーション化することはできません。すべての四角形を同時にアニメーション化する場合は、コントロールごとに 1 つのストーリーボードを使用する必要があります。

于 2012-11-11T09:47:15.223 に答える
1

どうやらまだコメントできないので、もう一度コメントを回答にする必要があります。

これらすべてを同時に実行しようとしていますか? XAML で定義されたストーリーボードのインスタンスは 1 つしか存在しないため、複数のコントロールで同時に再利用できない可能性があると思います。

他のすべてが失敗した場合は、再利用できるストーリーボードを含む四角形で UserControl を作成できます。以前の質問で提供したコード サンプルは、ストーリーボードを使用して反転するタイルからのものです。これはユーザー コントロールであるため、同時に反転させたいタイルをいくつでも持つことができます。

于 2012-11-11T08:13:06.593 に答える