WrapPanel中按钮Opacity动画报错及延迟实现求助

先拆解你遇到的几个核心问题：

1. Opacity属性值范围错误：WPF中Opacity的有效值是0（完全透明）到1（完全不透明），你设置To = 100不仅不符合属性规范，还会导致动画逻辑异常，后续判断Opacity == 100永远不会成立。
2. 重复复用同一个动画实例：你多次把同一个DoubleAnimation对象添加到Storyboard的Children里，一个动画实例只能绑定到一个目标，重复添加会导致目标混乱，触发No target was specified错误。
3. 异步动画的判断逻辑错误：Storyboard.Begin()是异步执行的，你的if语句会在动画开始瞬间就全部执行完毕，根本不会等待前一个动画完成，自然无法实现依次显示的效果。

接下来提供两种可行的修复方案：

方案一：利用动画的Completed事件链式触发 #

这种方式会在前一个动画完成后自动启动下一个，逻辑清晰：

private void ShowButtonsAnime()
{
    // 定义创建透明度动画的辅助方法
    DoubleAnimation CreateOpacityAnimation()
    {
        return new DoubleAnimation
        {
            From = 0,
            To = 1, // 修正为正确的Opacity范围
            Duration = TimeSpan.FromMilliseconds(2000) // 这里把时长改成2秒，你可以根据需求调整
        };
    }

    // 第一个按钮的动画
    var accountAnim = CreateOpacityAnimation();
    Storyboard.SetTarget(accountAnim, AccountBtn);
    Storyboard.SetTargetProperty(accountAnim, new PropertyPath(UIElement.OpacityProperty));
    var sbAccount = new Storyboard();
    sbAccount.Children.Add(accountAnim);

    // 绑定Completed事件，触发下一个按钮的动画
    accountAnim.Completed += (s, e) =>
    {
        var observeAnim = CreateOpacityAnimation();
        Storyboard.SetTarget(observeAnim, ObserveDatabtn);
        Storyboard.SetTargetProperty(observeAnim, new PropertyPath(UIElement.OpacityProperty));
        var sbObserve = new Storyboard();
        sbObserve.Children.Add(observeAnim);

        observeAnim.Completed += (s2, e2) =>
        {
            var formsAnim = CreateOpacityAnimation();
            Storyboard.SetTarget(formsAnim, Formsbtn);
            Storyboard.SetTargetProperty(formsAnim, new PropertyPath(UIElement.OpacityProperty));
            var sbForms = new Storyboard();
            sbForms.Children.Add(formsAnim);

            formsAnim.Completed += (s3, e3) =>
            {
                // 继续为Resource、BalanceDatabtn等按钮添加同样的逻辑
                var resourceAnim = CreateOpacityAnimation();
                Storyboard.SetTarget(resourceAnim, Resource);
                Storyboard.SetTargetProperty(resourceAnim, new PropertyPath(UIElement.OpacityProperty));
                var sbResource = new Storyboard();
                sbResource.Children.Add(resourceAnim);
                sbResource.Begin();

                resourceAnim.Completed += (s4, e4) =>
                {
                    // 后续按钮依次类推...
                    var balanceAnim = CreateOpacityAnimation();
                    Storyboard.SetTarget(balanceAnim, BalanceDatabtn);
                    Storyboard.SetTargetProperty(balanceAnim, new PropertyPath(UIElement.OpacityProperty));
                    var sbBalance = new Storyboard();
                    sbBalance.Children.Add(balanceAnim);
                    sbBalance.Begin();

                    balanceAnim.Completed += (s5, e5) =>
                    {
                        var reportsAnim = CreateOpacityAnimation();
                        Storyboard.SetTarget(reportsAnim, ReportsSettingsbtn);
                        Storyboard.SetTargetProperty(reportsAnim, new PropertyPath(UIElement.OpacityProperty));
                        var sbReports = new Storyboard();
                        sbReports.Children.Add(reportsAnim);
                        sbReports.Begin();

                        reportsAnim.Completed += (s6, e6) =>
                        {
                            var settingAnim = CreateOpacityAnimation();
                            Storyboard.SetTarget(settingAnim, Settingbtn);
                            Storyboard.SetTargetProperty(settingAnim, new PropertyPath(UIElement.OpacityProperty));
                            var sbSetting = new Storyboard();
                            sbSetting.Children.Add(settingAnim);
                            sbSetting.Begin();
                        };
                    };
                };
            };
            sbForms.Begin();
        };
        sbObserve.Begin();
    };

    // 启动第一个动画
    sbAccount.Begin();
}

方案二：一次性创建所有动画，用BeginTime设置延迟 #

这种方式更简洁，通过给每个动画设置延迟时间，让它们按顺序启动：

private void ShowButtonsAnime()
{
    var storyboard = new Storyboard();
    double animationDuration = 2000; // 单个动画时长（毫秒）
    UIElement[] buttons = new UIElement[] 
    { 
        AccountBtn, ObserveDatabtn, Formsbtn, Resource, BalanceDatabtn, ReportsSettingsbtn, Settingbtn 
    };

    for (int i = 0; i < buttons.Length; i++)
    {
        var btn = buttons[i];
        // 确保初始透明度为0
        btn.Opacity = 0;

        var opacityAnim = new DoubleAnimation
        {
            From = 0,
            To = 1,
            Duration = TimeSpan.FromMilliseconds(animationDuration),
            // 设置延迟：第i个按钮延迟i*animationDuration毫秒启动
            BeginTime = TimeSpan.FromMilliseconds(i * animationDuration)
        };

        Storyboard.SetTarget(opacityAnim, btn);
        Storyboard.SetTargetProperty(opacityAnim, new PropertyPath(UIElement.OpacityProperty));
        storyboard.Children.Add(opacityAnim);
    }

    // 启动所有动画
    storyboard.Begin();
}

额外注意点 #

• 确保所有按钮的初始Opacity设置为0，这样动画从透明开始才有效果。
• 如果你遇到的No target was specified错误，除了复用动画实例的问题，还要确认AccountBtn等控件已经在XAML中正确定义并初始化，没有为null。

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