Неявная анимация размытия или другого эффекта кисти

Я пытаюсь создать неявную анимацию скрытия и отображения, содержащую размытие. У меня есть следующий код для создания анимации Gaussian Blur, но я не знаю, как добавить его в 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);
}

c# uwp windows-community-toolkit
person Sean O'Neil    schedule 09.04.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В вашем сценарии, хотя вы можете добавить анимацию размытия к 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 интегрировать анимацию затухания и размытия.

await MyRec.Blur(value: 10, duration: 1000, delay: 0).Fade(value: 0.0f, duration: 1000, delay: 0).StartAsync();
person Nico Zhu - MSFT    schedule 10.04.2018
comment
Спасибо, я много использую Toolkit и его синтаксис абстрактной анимации, и это замечательно, но он не позволяет мне прикреплять неявные анимации отображения и скрытия к UIElement. - person Sean O'Neil; 10.04.2018
comment
Проверяли ли вы этот официальный документ? - person Nico Zhu - MSFT; 11.04.2018
comment
У меня есть. Вы можете добавить анимацию Scalar или Vector3 и настроить прозрачность, масштаб и перевод. Но как вы можете настроить кисть эффектов, например, размытие или насыщенность? - person Sean O'Neil; 11.04.2018