c# - 如何让 Storyboard淡入、暂停然后淡出(通过代码)？

Question

我写了下面的代码。它尝试创建一个执行以下操作的 Storyboard:

1. 淡入 500 毫秒
2. 暂停 1000 毫秒
3. 淡出 500 毫秒

但是在运行时会得到一个 System.InvalidOperationException，然后是以下输出:

Additional information: Multiple animations in 
  the same containing Storyboard cannot target the
  same property on a single element.

这似乎表明它试图一次而不是按顺序执行所有动画。

private Storyboard createStoryboard()
{
  Storyboard board = new Storyboard();

  addFadeToStoryboard(board, 0, 1, 500);
  addFadeToStoryboard(board, 1, 1, 1000);

  DoubleAnimation fadeOut = addFadeToStoryboard(board, 1, 0, 500);

  fadeOut.Completed += new EventHandler(onFadeCompleted);

  Storyboard.SetTarget(board, this);

  return board;
}

private DoubleAnimation addFadeToStoryboard(Storyboard board, 
  double fadeFrom, double fadeTo, double milliseconds)
{
  DoubleAnimation fade = new DoubleAnimation()
  {
    Duration = new Duration(TimeSpan.FromMilliseconds(milliseconds)),
    From = fadeFrom,
    To = fadeTo,
    RepeatBehavior = new RepeatBehavior(1)
  };

  Storyboard.SetTargetProperty(fade,
    new PropertyPath(UIElement.OpacityProperty));

  board.Children.Add(fade);

  return fade;
}

如何让它按顺序排列？我是否误解了 Storyboard的一些基本知识？

谢谢

Answer 1

如果 Storyboard包含多个动画，它们都会同时开始并同时运行。您可以将 DoubleAnimations 的 BeginTime 属性设置为 TimeSpan 以指示它们何时开始...因此通过传入所有先前动画的累积时间，您应该能够获得顺序效果。

编辑:抱歉 - 我刚刚注意到 Silverlight 标签。我的答案适用于 WPF...我不知道 Silverlight 和 WPF 动画之间的区别。

This可能有帮助。看起来这是 WPF 和 Silverlight 之间的区别。 WPF 可以处理同一 Storyboard中不同动画的同一属性的动画，而 Silverlight 则不能。他们建议使用单个 DoubleAnimationUsingKeyFrames 而不是单独的 DoubleAnimations ...然后每个单独的动画都成为其中的关键帧，并且应该在它们之间线性动画。