Question

我尝试创建隐式隐藏并显示包含模糊的动画。我有以下代码来进行高斯模糊动画，但我不知道如何将它添加到CompositionAnimationGroup并将其用作隐式动画。我只知道如何使用SpriteVisual启动动画。

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

    var effect = new GaussianBlurEffect()
    {
        Name = "Blur",
        Source = new CompositionEffectSourceParameter("EffectSource"),
        BlurAmount = 0f,
        BorderMode = EffectBorderMode.Hard,
    };

    var blurEffectFactory = compositor.CreateEffectFactory(effect, new[] { effect.Name + "." + nameof(effect.BlurAmount) });
    var brush = blurEffectFactory.CreateBrush();
    var destinationBrush = compositor.CreateBackdropBrush();
    brush.SetSourceParameter("EffectSource", destinationBrush);

    var sprite = compositor.CreateSpriteVisual();
    sprite.Size = new Vector2((float)(element.RenderSize.Width), (float)(element.RenderSize.Height));
    sprite.Brush = brush;

    var anim = compositor.CreateScalarKeyFrameAnimation();
    anim.InsertKeyFrame(0.0f, 0f);
    anim.InsertKeyFrame(1.0f, 50f);
    anim.Duration = TimeSpan.FromMilliseconds(durationMilliseconds);
    ElementCompositionPreview.SetElementChildVisual(element, sprite);
    sprite.Brush.Properties.StartAnimation("Blur.BlurAmount", anim);
}

Answer 1

对于您的场景，虽然您可以像{@ 1}}一样向CompositionAnimationGroup添加模糊动画，但您无法在视觉元素中正确启动 AnimationGroup 。因为模糊动画适用于精灵画笔，而淡入淡出动画适用于视觉元素。

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

    var effect = new GaussianBlurEffect()
    {
        Name = "Blur",
        Source = new CompositionEffectSourceParameter("EffectSource"),
        BlurAmount = 0f,
        BorderMode = EffectBorderMode.Hard,
    };

    var blurEffectFactory = compositor.CreateEffectFactory(effect, new[] { effect.Name + "." + nameof(effect.BlurAmount) });
    var brush = blurEffectFactory.CreateBrush();
    var destinationBrush = compositor.CreateBackdropBrush();
    brush.SetSourceParameter("EffectSource", destinationBrush);

    var sprite = compositor.CreateSpriteVisual();
    sprite.Size = new Vector2((float)(element.RenderSize.Width), (float)(element.RenderSize.Height));
    sprite.Brush = brush;

    var anim = compositor.CreateScalarKeyFrameAnimation();
    anim.InsertKeyFrame(0.0f, 0f);
    anim.InsertKeyFrame(1.0f, 50f);
    anim.Target = "Blur.BlurAmount";
    anim.Duration = TimeSpan.FromMilliseconds(durationMilliseconds);
    ElementCompositionPreview.SetElementChildVisual(element, sprite);
    AnimationGroup.Add(anim);

    sprite.Brush.Properties.StartAnimationGroup(AnimationGroup);
}

我建议你可以使用UWP Community Toolkit来整合淡化和模糊动画。

await MyRec.Blur(value: 10, duration: 1000, delay: 0).Fade(value: 0.0f, duration: 1000, delay: 0).StartAsync();

模糊或其他画笔效果的隐式动画

1 个答案: