c# - 在 Windows Phone 应用程序中重用 Storyboard

Question

我的 Windows Phone 应用程序中使用了一个 Storyboard:

<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，但它似乎只在第一次工作。。

例如，下面的代码用于显示四个不同的Rectangles，但只显示第一个。代码没有错误，但最后 3 个 Rectangle 没有变红，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 可以重复使用？

Answer 1

首先，你做错了什么:

Storyboard执行是异步的。当您调用 Storyboard.Begin 方法时， Storyboard在后台开始，您的代码继续执行。因此，您在启动后立即调用 Storyboard.Stop!您唯一不会停下来的是最后一个，这就是为什么它是唯一一个颜色会改变的矩形。

如果你想链接你的动画，你必须订阅 Completed 事件来知道 Storyboard何时结束，然后为下一个控件重新启动它。这是一种方法:

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

现在，您将面临两个问题:

1. 将 Storyboard 分配给新控件时，前一个控件的颜色将恢复到其原始值(在 Storyboard 开始之前)。如果你想让它保持新的值(value)，你必须保存它:

   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. 您不能使用单个 Storyboard同时为两个控件设置动画。如果您想同时为所有矩形设置动画，则需要为每个控件使用一个 Storyboard。