UWP

Question

我的背景图片需要淡入淡出效果。在运行时，可以更改图像源，这与预期的设置绑定一起工作。无论如何，相应的动画不采取任何视觉效果。目前我的 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 更改为图像并将其放入网格（不是 Grid.Background），我上面的代码就可以工作。

Answer 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();
};

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

UWP - FadeIn effect on background image

animation

xaml

expression-blend