Question

我正在制作Windows Phone 8应用程序，并希望首先淡出，然后 - 只有这样 - 实际上将UIElement的可见性变为“崩溃”。但是，我无法弄清楚如何让它们异步发生。

我正在使用Storyboards和Blend。这是我的故事板切换我的小“Popup”StackPanel：

<VisualStateGroup x:Name="PopupStates">
    <VisualState x:Name="PopupDisplayed">
        <Storyboard>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Popup">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>

            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Popup" d:IsOptimized="True"/>
        </Storyboard>
    </VisualState>

    <VisualState x:Name="PopupHidden">
        <Storyboard>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Popup">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>

            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Popup" d:IsOptimized="True"/>

        </Storyboard>
    </VisualState>
</VisualStateGroup>

我怎样才能让我的故事板事件一个接一个地发生？

Answer 1

您可以将第二个动画的BeginTime属性设置为第一个动画的持续时间。

来自MSDN page：

BeginTime属性对于创建按顺序播放的时间轴非常有用：通过增加共享同一父故事板的连续时间轴的BeginTime，您可以错开其播放时间。

该页面上的示例显示了您如何使用它：

        <!-- Animates the rectangle's width. No 
             BeginTime specified so by default begins 
             as soon as it's parent (the Storyboard)
             begins. -->
        <DoubleAnimation 
          Storyboard.TargetName="MyAnimatedRectangle" 
          Storyboard.TargetProperty="Width"
          To="300" Duration="0:0:1" />

        <!-- Animates the rectangle's opacity. A BeginTime
             of 3 seconds specified so begins three seconds
             after the Storyboard begins (total of 5 seconds)-->
        <DoubleAnimation BeginTime="0:0:3"
          Storyboard.TargetName="MyAnimatedRectangle" 
          Storyboard.TargetProperty="Opacity"
          To="0" Duration="0:0:1" />

故事板开始后第一个动画开始并持续1秒。第二个动画在故事板开始后3秒开始，也持续1秒。

因此，在您的示例中，您将设置将弹出窗口淡出的动画持续时间为2秒（比如说）：

<DoubleAnimation Duration="0:0:2" To="0"
                 Storyboard.TargetProperty="(UIElement.Opacity)"
                 Storyboard.TargetName="Popup" d:IsOptimized="True"/>

然后设置将可见性设置为2秒的动画的开始时间：

        <ObjectAnimationUsingKeyFrames BeginTime="0:0:2"
                         Storyboard.TargetProperty="(UIElement.Visibility)"
                         Storyboard.TargetName="Popup">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Collapsed</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>

更改可见性，然后更改Silverlight / WPF UIElement的不透明度

1 个答案: