Windows 10 - 视觉状态变化的过渡

Question

我正在尝试让我的 Windows 10 应用程序利用响应式设计，方法是使用视觉状态触发器来更改网格的宽度。当状态改变时，宽度跳到下一个宽度。

有没有办法通过某种过渡或动画来平滑这种变化？

<VisualStateManager.VisualStateGroups>
     <VisualStateGroup>
         <VisualState x:Name="DesktopWideState">
             <VisualState.StateTriggers>
                 <AdaptiveTrigger MinWindowWidth="1280" />
             </VisualState.StateTriggers>

             <VisualState.Setters>
                 <Setter Target="ContentPanel.Width"
                    Value="1000" />
             </VisualState.Setters>
         </VisualState>

        <VisualState x:Name="DefaultState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
         </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Answer 1

VisualState 确实包含属性 Storyboard，因此确实可以创建基于 StateTriggers 的 storyboard-based 动画。

引入

VisualState.Setters 是为了消除情节提要中 ObjectAnimationUsingKeyFrames 产生的噪音。

要为您的示例添加动画，请使用以下命令：

<VisualStateManager.VisualStateGroups>
  <VisualStateGroup>
    <VisualState x:Name="DesktopWideState">
      <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="1280" />
      </VisualState.StateTriggers>
      <VisualState.Storyboard>
        <Storyboard>
          <DoubleAnimation Storyboard.TargetName="ContentPanel" Storyboard.TargetProperty="Width" Duration="0:0:0.5" To="1000" EnableDependentAnimation="True" />
        </Storyboard>
      </VisualState.Storyboard>
    </VisualState>
</VisualStateManager.VisualStateGroups>

不要使用这个例子！为什么？

因为动画 Width 会影响布局。这就是为什么默认情况下禁用动画并且仅通过将 EnabledDependentAnimation 设置为 true 才起作用的原因。你会看到，这个动画会卡顿很多。

尽量避免依赖动画，并在 AdaptiveTriggers 中仅将故事板用于独立动画，例如 Transforms.

Windows 10 - 视觉状态变化的过渡

Windows 10 - Transition for Visual State changes

xaml

windows-runtime

win-universal-app

windows-10

windows-10-universal