UWP - 背景图像上的淡入效果

Posted 2023-02-22

【中文标题】UWP - 背景图像上的淡入效果

【英文标题】：UWP - FadeIn effect on background image

【发布时间】：2016-06-09 08:17:07

【问题描述】：

我需要对我的背景图像进行淡入淡出。在运行时可以更改图像源，这可以按预期与设置的绑定一起使用。反正对应的动画不带任何视觉效果。目前我的 xaml 如下所示：

xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" 
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
xmlns:Media="using:Microsoft.Xaml.Interactions.Media"

<Page.Content>
    <Grid>
        <Grid.Background>
            <ImageBrush x:Name="image" ImageSource="Binding Path=ImageSource,UpdateSourceTrigger=PropertyChanged" Stretch="UniformToFill" >
                <Interactivity:Interaction.Behaviors>
                    <Core:EventTriggerBehavior EventName="ImageOpened" >
                        <Media:ControlStoryboardAction ControlStoryboardOption="Play">
                            <Media:ControlStoryboardAction.Storyboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:1" Storyboard.TargetName="image"/>
                                </Storyboard>
                            </Media:ControlStoryboardAction.Storyboard>
                        </Media:ControlStoryboardAction>
                    </Core:EventTriggerBehavior>
                </Interactivity:Interaction.Behaviors>
            </ImageBrush>
        </Grid.Background>

当我改用时：

             [...]
             <Media:ControlStoryboardAction.Storyboard>
                                <Storyboard>
                                    <FadeInThemeAnimation Storyboard.TargetName="Image" />
                                </Storyboard>
                            </Media:ControlStoryboardAction.Storyboard>

我明白了

System.Runtime.InteropServices.COMException：未检测到已安装的组件。

无法解析 TargetName 图像。 在 Windows.UI.Xaml.Media.Animation.Storyboard.Begin() 在 Microsoft.Xaml.Interactions.Media.ControlStoryboardAction.Execute（对象发送者，对象参数） 在 Microsoft.Xaml.Interactivity.Interaction.ExecuteActions（对象发送者，ActionCollection 操作，对象参数） 在 Microsoft.Xaml.Interactions.Core.EventTriggerBehavior.OnEvent（对象发件人，对象 eventArgs）

有什么想法吗？

[编辑] 感谢@SWilko 的回答，我确定动画仅适用于图像。如果我将 ImageBrush 更改为 Image 并将其放入网格（而不是 Grid.Background）中，我上面的代码就可以工作。

【参考方案1】：

使用Image 控件并根据需要在顶部添加更多控件不是更容易吗，例如

 <Grid x:Name="LayoutGrid">
    <Image x:Name="image" Stretch="UniformToFill" 
           Source="Binding Path=ImageSource,UpdateSourceTrigger=PropertyChanged" 
           Opacity="0" Visibility="Collapsed">
        <interactivity:Interaction.Behaviors>
            <core:EventTriggerBehavior EventName="ImageOpened">
                <media:ControlStoryboardAction x:Name="sbAction" ControlStoryboardOption="Play">
                    <media:ControlStoryboardAction.Storyboard>
                        <Storyboard x:Name="sb">
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                           Storyboard.TargetName="image">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                               Storyboard.TargetName="image">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0.5"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:5" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </media:ControlStoryboardAction.Storyboard>
                </media:ControlStoryboardAction>
            </core:EventTriggerBehavior>
        </interactivity:Interaction.Behaviors>
    </Image>        
</Grid>

编辑

更新图像并从头开始动画。 我已将 Visibility 切换动画添加到 Storyboard 并命名为 Storyboard sb

现在在后面的代码中，我使用 Storyboard Completed 事件来更改图像并重新启动动画。您可以在适合您的应用程序的地方执行此操作，这只是为了展示一个示例。 例如

sb.Completed += (sender, e) =>

       //this is a local image for me you would probably update your ImageSource property here
       var newimg = new BitmapImage(new Uri("ms-appx:///Assets/rock.jpg"));
       image.Source = newimg;
       image.Opacity = 0;
       image.Visibility = Visibility.Collpased;

       sb.Begin();
;

【讨论】：

感谢@Swilko 的解决方案。我在运行时设置图像不止一次。执行动画后，不透明度为 1。我必须将每个动画的不透明度重置为 0。我怎样才能做到这一点？

成功了跨度>