动画队列实现求助：WPF Storyboard动画无法排队问题

我完全懂你遇到的糟心问题——每次点按钮新动画直接冲掉旧的，根本没法按顺序执行对吧？这是因为WPF默认情况下，当你对同一个目标属性启动新的Storyboard时，它会自动停止当前正在运行的同属性动画，直接替换成新的。要实现队列效果，我们需要手动维护一个动画队列，等前一个动画完全跑完再启动下一个。

下面是具体的实现方案，直接就能用到你的代码里：

第一步：准备队列和状态标记 #

在你的窗口/用户控件的类里，先定义两个私有成员：一个用来存待执行的Storyboard队列，一个标记当前是否有动画在运行：

private Queue<Storyboard> _animationQueue = new Queue<Storyboard>();
private bool _isAnimating = false;

第二步：修改按钮点击逻辑 #

不要直接在点击事件里启动动画，而是把动画加入队列，然后让队列自动处理执行顺序：

private void YourButton_Click(object sender, RoutedEventArgs e)
{
    // 1. 创建你需要的动画和Storyboard（基于你的代码调整）
    DoubleAnimation animation = new DoubleAnimation
    {
        // 示例：每次让控件向下移动50单位，时长1秒
        From = Canvas.GetTop(myControl),
        To = Canvas.GetTop(myControl) + 50,
        Duration = TimeSpan.FromSeconds(1)
    };
    
    Storyboard sb = new Storyboard();
    sb.Children.Add(animation);
    Storyboard.SetTargetName(animation, myControl.Name);
    Storyboard.SetTargetProperty(animation, new PropertyPath(Canvas.TopProperty));
    
    // 2. 订阅Completed事件，动画完成后自动触发下一个
    sb.Completed += (s, args) =>
    {
        _isAnimating = false;
        ProcessNextAnimation(); // 去队列里取下一个动画执行
    };
    
    // 3. 把当前Storyboard加入队列
    _animationQueue.Enqueue(sb);
    
    // 4. 如果当前没有动画在运行，立刻启动队列里的第一个
    if (!_isAnimating)
    {
        ProcessNextAnimation();
    }
}

第三步：实现队列处理方法 #

这个方法负责从队列里取出下一个动画并启动：

private void ProcessNextAnimation()
{
    // 只有当队列不为空且当前没有动画在运行时，才执行下一个
    if (_animationQueue.Count > 0 && !_isAnimating)
    {
        _isAnimating = true;
        var nextStoryboard = _animationQueue.Dequeue();
        nextStoryboard.Begin(this);
    }
}

额外小贴士 #

• 要是需要中途清空队列，直接调用_animationQueue.Clear()就行；如果想停止当前动画，可以调用nextStoryboard.Stop(this)，记得同时把_isAnimating设为false，这样队列里的下一个会继续执行。
• 这个队列对不同属性的动画也适用，它只是按加入顺序执行所有Storyboard，不管目标控件或属性是什么。
• 想加暂停/继续功能的话，只需要在_isAnimating的逻辑上调整，再配合Storyboard的Pause()和Resume()方法即可。

内容的提问来源于stack exchange，提问作者D. Peled