WPF窗口控件动态模糊效果

最新推荐文章于 2025-10-08 14:06:40 发布

原创最新推荐文章于 2025-10-08 14:06:40 发布 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ui #控件 #wpf #动画 #xaml

本文介绍了如何在WPF中使用Blureffect和Animation创建动态高斯模糊效果，重点讲解了线性动画DoubleAnimation的用法，并提供了最终实现效果。

不知道各位在设计程序UI时是否碰到过动态渐变动画实现的困扰，本文将讲解如何通过WPF内置的blureffect效果和Animation动画实现动态高斯模糊效果。

最终效果：

通过Animation我们可以便捷地实现完美的动画效果，有关更多的动画请参考点击打开链接

这里我们就针对线性动画DoubleAnimation进行讲解

首先我们需要引用：

	using System.Windows.Media.Animation;
	using System.Windows.Media.Effects;

在 XAML种我们将我们要进行动画的控件(这里我选定Image)命名，

<Image HorizontalAlignment="Left" Height="319" Name="bg" VerticalAlignment="Top" Width="517" Grid.ColumnSpan="2" Source="pack://siteoforigin:,,,/Library/Los Angeles Air.png" MouseDown="Image_MouseDown" MouseUp="Image_MouseUp" >
            <Image.Effect>
                <BlurEffect Radius="10"/>
            </Image.Effect>
        </Image>

在 CS实现动画：

DoubleAnimation aero = new DoubleAnimation(); //建立线性动画对象aero
            aero.From = 0;    //动画初始的值
            aero.To = 10;      //动画结束的值
            aero.Duration = TimeSpan.FromSeconds(1);         //动画持续时间
            bg.Effect = new BlurEffect() //为Image bg的effect添加blureffect属性
            {
                Radius = 0	//模糊半径初始化
            };
            bg.Effect.BeginAnimation(BlurEffect.RadiusProperty, aero);	//这里选择bg.effect作为对象进行开始动画，BeginAnimation的第一个参数选择BlurEffect.RadiusProperty