WPF：在故事板开始时使 UIElement 可见的正确方法是什么答案

【问题标题】：WPF: What's the right way to make a UIElement visible right at the moment when a storyboard beginsWPF：在故事板开始时使 UIElement 可见的正确方法是什么
【发布时间】：2013-01-19 00:40:16
【问题描述】：

我正在尝试一个简单的图片滑入动画，问题是，我不知道何时设置滑入的新图片的可见性。我不想显示图片在顶部，直到动画开始。顺序是这样的，屏幕上一张拉伸的图片，然后另一张相同尺寸的图片滑入前一张图片的顶部。与旧图片相比，新图片将具有更高的 Z-index。我已经设置了一个故事板，并将新图片的可见性隐藏起来。那么什么时候让新图片可见呢？在拨打StoryBoard.Begin(MyNewPicture) 之前是否正确？于是就变成了

    //create picture object 
    //...
    MyNewPicture.Visibility = Visiblity.Hidden;
    //do some intialisation, and create StoryBoard
    //...
    MyNewPicture.Visibility = Visibility.Visible;
    MyStoryBoard.Begin(MyNewPicture);`

这适用于我的快速计算机，但我想知道，如果我在慢速计算机上运行它，并且如果有某种性能减慢/屏幕延迟等，它是否会使新图片看起来覆盖下面的图片当它变得可见时，就在动画开始之前？这将在屏幕上产生不可取的闪烁。

或者我应该将可见性作为动画的一部分？请看一下这个answer 到其他人之前提出的稍微类似的问题。我应该在 Xaml 中改用 ObjectAnimationUsingKeyFrames 吗？请注意，一旦动画开始，新图片应该（永远）可见，在我的情况下不需要切换可见性。我只希望新图片在动画开始时而不是在动画之前可见（否则它将阻止前一张图片）。

【问题讨论】：

您还可以为图像的 Opacity 属性（从 0 到 100）设置动画，因此您不必使用 ObjectAnimationUsingKeyFrames。我建议更改情节提要中的可见性/不透明度，这应该可以防止闪烁。
我正在尝试将图片滑入，所以它在移动 :) 但是是的，这是一个很好的建议
使用 BeginTime (TimeLine-property)，您可以先将 Opacity 设置为 100，然后再移动图片。
在情节提要对象中设置 Xaml 可见性的简单方法是什么？是否必须在 ObjectAnimationUsingKeyFrames 中完成？我只设置了可见性一次，所以我希望有一种更简单的方法在 xaml 中完成它
如何使用 BeginTime 来完成？您可以发布答案吗，我无法在 cmets 部分中将您的建议表示为已接受的答案

标签： wpf animation wpf-controls storyboard uielement

【解决方案1】：

如果你想通过动画改变Visibility，你必须使用ObjectAnimationUsingKeyFrames：

    <Storyboard x:Key="StartPicture">
        <ObjectAnimationUsingKeyFrames Duration="0:0:0.1" Storyboard.TargetProperty="Visibility">
            <ObjectKeyFrameCollection>
                <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" KeyTime="0:0:0"></DiscreteObjectKeyFrame>
            </ObjectKeyFrameCollection>
        </ObjectAnimationUsingKeyFrames>
        <DoubleAnimation BeginTime="00:00:00.1" Storyboard.TargetProperty="Property" To="Value" />
    </Storyboard>

您还可以将不透明度从 0 设置为 100 以使图片可见：

    <Storyboard 
        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="100" Duration="0:0:0.1"  />
        <DoubleAnimation BeginTime="0:0:0.1" Storyboard.TargetProperty="PropertyToAnimate" To="Value"  />
    </Storyboard>

这样，您首先将 Opacity-property 设置为 100（在 100 毫秒内），然后（使用 BeginTime="0:0:0.1"）进行其余的设置。

【讨论】：

希望有更简单的方法