VS 2013/Blend 动画中的视觉状态变化之间没有停顿吗？

Question

更新：我已经整理了一个显示问题的测试项目。这是下载链接：

http://robodance.com/blend/roschler-blend-animation-problem.zip

我有一个使用 Expression Blend 2013 为 Windows 应用商店应用程序 (WinRT/Metro) 创建的动画。我将默认转换时间设置为 1 秒。但是，当我运行应用程序并触发动画时，状态会一个接一个地播放，中间没有 1 秒的延迟。

我找到了这个线程，但据我所知，我正在使用的所有属性都是依赖属性。当我单击 Blend 中的每个状态时，我确实看到了所需的更改：

Animations in visual state do not animate (WinRT)

另一个奇怪的问题是过渡预览在 Blend 中不起作用。我打开它，当我点击初始状态或任何其他状态时，什么都没有发生。

为什么我的动画状态转换有问题，我可以做些什么来解决它？下面是为视觉状态生成的 XAML。如您所见，GeneratedDuration 属性都显示了 1 秒 (00:00:01) 的延迟。

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="VisualStateGroup">
        <VisualStateGroup.Transitions>
            <VisualTransition GeneratedDuration="0:0:1"/>
            <VisualTransition From="CountdownStart" GeneratedDuration="0:0:1" To="TMinus2"/>
            <VisualTransition From="TMinus2" GeneratedDuration="0:0:1" To="TMinus1"/>
            <VisualTransition From="TMinus1" GeneratedDuration="0:0:1" To="LiftOff"/>
        </VisualStateGroup.Transitions>
        <VisualState x:Name="CountdownStart">
            <Storyboard>
                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="stackListHolder" d:IsOptimized="True"/>
                <DoubleAnimation Duration="0" To="100" Storyboard.TargetProperty="(RangeBase.Value)" Storyboard.TargetName="progressBar" d:IsOptimized="True"/>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)" Storyboard.TargetName="btnCancelSearch">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                            <x:Boolean>True</x:Boolean>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="btnCancelSearch" d:IsOptimized="True"/>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="TMinus2">
            <Storyboard>
                <DoubleAnimation Duration="0" To="66" Storyboard.TargetProperty="(RangeBase.Value)" Storyboard.TargetName="progressBar" d:IsOptimized="True"/>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)" Storyboard.TargetName="btnCancelSearch">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                            <x:Boolean>True</x:Boolean>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="btnCancelSearch" d:IsOptimized="True"/>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="TMinus1">
            <Storyboard>
                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="stackListHolder" d:IsOptimized="True"/>
                <DoubleAnimation Duration="0" To="33" Storyboard.TargetProperty="(RangeBase.Value)" Storyboard.TargetName="progressBar" d:IsOptimized="True"/>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)" Storyboard.TargetName="btnCancelSearch">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                            <x:Boolean>True</x:Boolean>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="btnCancelSearch" d:IsOptimized="True"/>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="LiftOff">
            <Storyboard>
                <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(RangeBase.Value)" Storyboard.TargetName="progressBar" d:IsOptimized="True"/>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ChildrenTransitions>
    <TransitionCollection>
        <EntranceThemeTransition/>
    </TransitionCollection>
</Grid.ChildrenTransitions>

Answer 1

这让我很生气，这不起作用。目前，我为您提供了一个解决方案，只需从方程式中删除 ProgressBar。我可能需要一段时间才能弄清楚另一个。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:1"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="EmptyState">
                <Storyboard>
                    <DoubleAnimation Duration="0" To="-500" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="FullState">
            </VisualState>
            <VisualState x:Name="HalfState">
                <Storyboard>
                    <DoubleAnimation Duration="0" To="-250" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Button Content="Empty" HorizontalAlignment="Left" Height="54" Margin="20,65,0,0" VerticalAlignment="Top" Width="156">
        <Interactivity:Interaction.Behaviors>
            <Core:EventTriggerBehavior EventName="Click">
                <Core:GoToStateAction StateName="EmptyState"/>
            </Core:EventTriggerBehavior>
        </Interactivity:Interaction.Behaviors>
    </Button>
    <Button Content="Full" HorizontalAlignment="Left" Height="54" Margin="367,65,0,0" VerticalAlignment="Top" Width="156">
        <Interactivity:Interaction.Behaviors>
            <Core:EventTriggerBehavior EventName="Click">
                <Core:GoToStateAction StateName="FullState"/>
            </Core:EventTriggerBehavior>
        </Interactivity:Interaction.Behaviors>
    </Button>
    <Button Content="Half" HorizontalAlignment="Left" Height="54" Margin="194,65,0,0" VerticalAlignment="Top" Width="156">
        <Interactivity:Interaction.Behaviors>
            <Core:EventTriggerBehavior EventName="Click">
                <Core:GoToStateAction StateName="HalfState"/>
            </Core:EventTriggerBehavior>
        </Interactivity:Interaction.Behaviors>
    </Button>
    <Grid HorizontalAlignment="Left" Height="44" Margin="23,19,0,0" VerticalAlignment="Top" Width="497" Background="Red">
        <Grid.Clip>
            <RectangleGeometry Rect="0,0,500,50" />
        </Grid.Clip>            
        <Rectangle x:Name="rectangle" Fill="White" RenderTransformOrigin="0.5,0.5" >
            <Rectangle.RenderTransform>
                <CompositeTransform/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>

</Grid>

这类事情的答案是两个典型答案之一。 1）这真的很容易，只是我们的误解，或者 2）它没有按应有的方式工作。我还不知道是哪个。

祝你好运。

Answer 2

我试图看看我的有效的和你的之间的区别：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:0.5"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="VisualState0"/>
            <VisualState x:Name="VisualState1">
                <Storyboard>
                    <DoubleAnimation Duration="0" To="90" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                    <DoubleAnimation Duration="0" To="408.468" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Rectangle x:Name="rectangle" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="245" Margin="179,172,0,0" Stroke="Black" VerticalAlignment="Top" Width="256" RenderTransformOrigin="0.5,0.5">
        <Rectangle.RenderTransform>
            <CompositeTransform/>
        </Rectangle.RenderTransform>
    </Rectangle>
</Grid>

我认为您需要简化并发布更多内容。