模糊图像动画

Question

在应用程序启动时，我想做一个小动画：徽标应该从大而模糊转变为正常和清晰。这就是我到目前为止所做的：

<Grid>
<Border>
    <Image Height="250" Name="AnimationLogo" Source="Logo.png">
    </Image>
</Border>
<Grid.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="AnimationLogo">
                    <LinearDoubleKeyFrame Value="50" KeyTime="0:0:5.0"></LinearDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Grid.Triggers>

我知道我可以为这样的静态模糊设置动画：

        <Image.Effect>
            <BlurEffect Radius="20"/>
        </Image.Effect>

但我无法设法在图像上设置此BlurEffect动画。没有Property＆＃34; Radius＆＃34;在我可以在动画中使用的图像上。

我感谢你的暗示或良好的联系！

Answer 1

您可以尝试命名BlurEffect

<Image.Effect>
     <BlurEffect Radius="20" x:Name="blurEffect"/>
</Image.Effect>

TargetName的动画 blurEffect

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Radius" 
                               Storyboard.TargetName="blurEffect">
    <LinearDoubleKeyFrame Value="50" KeyTime="0:0:5.0"></LinearDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>

Answer 2

可以在Loaded事件上使用WPF Transitionz库中的Animate Blur。

一个简单的代码示例：

Date

这会在加载窗口时生成此动画。

还可以通过将tz：Transitions.Blur绑定到ViewModel中BlurParams类型的属性来更改属性上的模糊。