如何将高斯模糊动画加入CompositionAnimationGroup并用作隐式动画

我明白你现在的痛点——已经能实现高斯模糊的动画效果，但不知道怎么把它整合到隐式动画体系里，而不是只能手动用SpriteVisual启动。别担心，我来一步步教你搞定这个！

核心思路 #

隐式动画的关键是ImplicitAnimationCollection，它能让我们在元素的指定属性发生变化时，自动触发预定义的动画组。我们要做的就是把模糊动画放进动画组，再绑定到目标属性的变化触发上。

1. 补全高斯模糊动画的创建逻辑 #

先把你已有的模糊动画代码补全，我们需要创建一个控制模糊半径的关键帧动画：

private static ScalarKeyFrameAnimation CreateBlurAnimation(Compositor compositor, int durationMilliseconds)
{
    var blurAnimation = compositor.CreateScalarKeyFrameAnimation();
    blurAnimation.Duration = TimeSpan.FromMilliseconds(durationMilliseconds);
    // 根据显示/隐藏需求设置关键帧：隐藏时从0→20，显示时从20→0
    blurAnimation.InsertKeyFrame(0f, 0f);
    blurAnimation.InsertKeyFrame(1f, 20f);
    blurAnimation.Target = "BlurAmount";
    return blurAnimation;
}

2. 创建动画组并关联到隐式动画集合 #

接下来把模糊动画加入动画组，再绑定到隐式动画集合的触发属性上（这里用Opacity作为显示隐藏的触发属性，因为它的变化是平滑的，适合做过渡）：

public static void SetupImplicitBlurAnimation(UIElement element, int durationMilliseconds)
{
    var visual = ElementCompositionPreview.GetElementVisual(element);
    var compositor = visual.Compositor;

    // 创建高斯模糊效果与承载Brush
    var blurEffect = new GaussianBlurEffect
    {
        Name = "Blur",
        BlurAmount = 0,
        Source = new CompositionEffectSourceParameter("Backdrop")
    };
    var blurEffectFactory = compositor.CreateEffectFactory(blurEffect, new[] { "Blur.BlurAmount" });
    var blurBrush = blurEffectFactory.CreateBrush();
    blurBrush.SetSourceParameter("Backdrop", compositor.CreateBackdropBrush());

    // 创建SpriteVisual承载模糊效果，并附加到目标元素
    var blurVisual = compositor.CreateSpriteVisual();
    blurVisual.Brush = blurBrush;
    blurVisual.Size = new Vector2((float)element.ActualWidth, (float)element.ActualHeight);
    ElementCompositionPreview.SetElementChildVisual(element, blurVisual);

    // 将模糊动画加入动画组
    var blurAnimation = CreateBlurAnimation(compositor, durationMilliseconds);
    var animationGroup = compositor.CreateAnimationGroup();
    animationGroup.Add(blurAnimation);

    // 创建隐式动画集合，绑定Opacity属性变化触发动画
    var implicitAnimations = compositor.CreateImplicitAnimationCollection();
    implicitAnimations["Opacity"] = animationGroup;

    // 给模糊视觉绑定隐式动画
    blurVisual.ImplicitAnimations = implicitAnimations;
}

3. 触发隐式动画 #

现在你只需要修改目标元素的Opacity，模糊动画就会自动触发了：

// 隐藏元素：Opacity从1→0，模糊半径从0→20
element.Opacity = 0;

// 显示元素：可以修改CreateBlurAnimation的关键帧为反向（20→0），再设置Opacity为1
element.Opacity = 1;

关键注意点 #

• 如果需要配合Visibility属性，建议先通过Opacity完成动画过渡，再延迟设置Visibility，避免离散变化打断动画。
• 记得监听元素的SizeChanged事件，同步更新blurVisual.Size，保证模糊效果覆盖整个元素。
• 若要绑定其他触发属性（比如Offset），只需修改implicitAnimations的键值即可。

内容的提问来源于stack exchange，提问作者Sean O'Neil