WPF+C#多步骤动画异常求助：矩形移动与颜色切换不符合预期

问题根源 #

1. 动画异步执行导致覆盖：WPF动画是异步触发的，你在构造函数中连续调用moveUp、changeColor、moveDown时，三个操作几乎同时启动，moveDown的动画直接覆盖了moveUp的动画，因此仅能看到最后一步操作。
2. 颜色修改是同步操作：changeColor方法是直接赋值，调用后立即修改边框颜色，导致矩形一开始就是绿色。
3. 下移动画参数错误：moveDown方法中DoubleAnimation.By设置为-100，这会让矩形继续向上移动，而非返回初始位置，正确值应为+100。

解决方案一：用动画Completed事件串联步骤 #

通过监听动画的Completed事件，按顺序触发后续操作，确保步骤依次执行：

using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace question
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            // 启动第一步：向上移动
            StartMoveUp();
        }

        private void StartMoveUp()
        {
            var moveUp = new DoubleAnimation
            {
                From = Canvas.GetTop(rect),
                By = -100,
                Duration = TimeSpan.FromSeconds(1)
            };
            // 移动完成后触发颜色修改
            moveUp.Completed += (s, e) => ChangeRectangleColor();
            rect.BeginAnimation(Canvas.TopProperty, moveUp);
        }

        private void ChangeRectangleColor()
        {
            rect.Stroke = Brushes.Green;
            // 颜色修改完成后启动下移动画
            StartMoveDown();
        }

        private void StartMoveDown()
        {
            var moveDown = new DoubleAnimation
            {
                From = Canvas.GetTop(rect),
                By = 100, // 修正为+100，回到初始位置
                Duration = TimeSpan.FromSeconds(1)
            };
            rect.BeginAnimation(Canvas.TopProperty, moveDown);
        }
    }
}

解决方案二：用Storyboard管理序列动画（推荐，易维护） #

通过Storyboard统一管理所有动画步骤，设置延迟时间确保顺序执行：

修改XAML文件，添加Storyboard #

<Window x:Class="question.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="450" Width="800">
    <Grid x:Name="grid" Background="Gray">
        <Canvas x:Name="myCanvas">
            <Rectangle
                x:Name="rect"
                Width="136"
                Height="149"
                Stroke="White" 
                StrokeThickness="3"
                RadiusX="20" 
                RadiusY="20" 
                Canvas.Left="332" 
                Canvas.Top="143"/>
        </Canvas>
        <!-- 定义序列动画资源 -->
        <Window.Resources>
            <Storyboard x:Key="RectangleAnimation">
                <!-- 步骤1：向上移动100单位 -->
                <DoubleAnimation 
                    Storyboard.TargetName="rect"
                    Storyboard.TargetProperty="(Canvas.Top)"
                    By="-100"
                    Duration="0:0:1"/>
                <!-- 步骤2：修改边框为绿色（延迟1秒，等移动完成） -->
                <ObjectAnimationUsingKeyFrames
                    Storyboard.TargetName="rect"
                    Storyboard.TargetProperty="Stroke"
                    BeginTime="0:0:1">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Brushes.Green}"/>
                </ObjectAnimationUsingKeyFrames>
                <!-- 步骤3：向下返回初始位置（延迟2秒，等颜色修改完成） -->
                <DoubleAnimation 
                    Storyboard.TargetName="rect"
                    Storyboard.TargetProperty="(Canvas.Top)"
                    By="100"
                    Duration="0:0:1"
                    BeginTime="0:0:2"/>
            </Storyboard>
        </Window.Resources>
    </Grid>
</Window>

后台代码启动Storyboard #

using System.Windows;
using System.Windows.Media.Animation;

namespace question
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            // 启动序列动画
            var storyboard = (Storyboard)FindResource("RectangleAnimation");
            storyboard.Begin();
        }
    }
}

内容的提问来源于stack exchange，提问作者user20370754