合成 - 为什么我的元素会立即在我的动画上设置模糊？

Question

我的示例应用程序有以下 Xaml 来演示该问题：

<Page x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="#F5DEB3">

    <Border x:Name="MyBorder"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
        <Image Stretch="Uniform"
            Width="165"
            Height="100"
            Source="/Assets/abstract.png" />
    </Border>
</Page>

这是我的代码隐藏：

using Windows.UI.Composition;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Hosting;

namespace App1
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            this.Loaded += MainPage_Loaded;
        }

        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            var scalar = Window.Current.Compositor.CreateScalarKeyFrameAnimation();

            scalar.InsertKeyFrame(1.0f, 24f);
            scalar.DelayTime = TimeSpan.FromMilliseconds(1500);
            scalar.Duration = TimeSpan.FromMilliseconds(3000);

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

            var effectFactory = Window.Current.Compositor.CreateEffectFactory(effect, new[] { "Blur.BlurAmount" });
            var brush = effectFactory.CreateBrush();
            var sprite = Window.Current.Compositor.CreateSpriteVisual();

            sprite.Brush = brush;
            sprite.Size = new Vector2((float)MyBorder.ActualWidth, (float)MyBorder.ActualHeight);

            ElementCompositionPreview.SetElementChildVisual(MyBorder, sprite);

            var destinationBrush = Window.Current.Compositor.CreateBackdropBrush();
            brush.SetSourceParameter("Backdrop", destinationBrush);

            brush.StartAnimation("Blur.BlurAmount", scalar);
        }
    }
}

当应用程序运行s 时，它应该等待 1.5 秒然后开始模糊图像。但是，当您运行代码时，图像已经设置了初始模糊（轻微模糊）。有人知道为什么吗？

Answer 1

稍微更改一下代码。试试这个。我不知道为什么需要将 BlurAmount 设置为零，但也许新的 GaussianBlurEffect 已经预设了其他值。

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

Answer 2

有关此问题的更多信息，它表现如此的原因以及如上述答案中所述以 BlurAmount = 0 开头的原因是因为 BlurAmount 的默认值为 3.0f:

https://microsoft.github.io/Win2D/html/P_Microsoft_Graphics_Canvas_Effects_GaussianBlurEffect_BlurAmount.htm

合成 - 为什么我的元素会立即在我的动画上设置模糊？

Composition - Why does my element immediately set a Blur on my animation?

uwp

windows-composition-api

xaml-composition