Windows Phone 上的滞后动画

Question

您好，我遇到了无法解决的性能问题。使用 Blend，我创建了一个显示和隐藏网格的动画。它在切换开关按钮被选中时被调用，并且它工作。问题是，它的工作非常滞后，并在延迟几秒钟后调用。我在诺基亚 Lumia 920 上测试该应用程序。您能帮我找出问题所在吗？

这是使用 blend 创建的动画代码：

<VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="Collapsing">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.5" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Hidden">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)"
                                                       Storyboard.TargetName="CollapsingGrid">
                            <EasingDoubleKeyFrame KeyTime="0"
                                                  Value="95" />
                            <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                                  Value="0">
                                <EasingDoubleKeyFrame.EasingFunction>
                                    <CubicEase EasingMode="EaseOut" />
                                </EasingDoubleKeyFrame.EasingFunction>
                            </EasingDoubleKeyFrame>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)"
                                                       Storyboard.TargetName="anonymousOnLabel">
                            <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                                  Value="0" />
                            <EasingDoubleKeyFrame KeyTime="0:0:1"
                                                  Value="91" />
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)"
                                                       Storyboard.TargetName="SettingsSharePicTglBtn">
                            <EasingDoubleKeyFrame KeyTime="0"
                                                  Value="95" />
                            <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                                  Value="0" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Unhidden">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)"
                                                       Storyboard.TargetName="CollapsingGrid">
                            <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                                  Value="0" />
                            <EasingDoubleKeyFrame KeyTime="0:0:1"
                                                  Value="95">
                                <EasingDoubleKeyFrame.EasingFunction>
                                    <CubicEase EasingMode="EaseOut" />
                                </EasingDoubleKeyFrame.EasingFunction>
                            </EasingDoubleKeyFrame>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)"
                                                       Storyboard.TargetName="anonymousOnLabel">
                            <EasingDoubleKeyFrame KeyTime="0"
                                                  Value="91" />
                            <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                                  Value="0" />
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)"
                                                       Storyboard.TargetName="SettingsSharePicTglBtn">
                            <EasingDoubleKeyFrame KeyTime="0"
                                                  Value="0" />
                            <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                                  Value="95" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

我通过以下方式调用它：

private void TglBtn_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            if ((bool)((ToggleSwitchButton)sender).IsChecked)
            {
                VisualStateManager.GoToState(this, "Unhidden", true);
            }
            else
            {
                VisualStateManager.GoToState(this, "Hidden", true);
            }
        }

Answer 1

我建议不要为 Width 和 Height 属性设置动画。每次这些属性发生变化时，都会在可视化树上执行一次完整的测量/排列过程，这非常昂贵。相反，您应该尝试在网格的 RenderTransform 上从 1.0 到 0.0 设置 Scale 动画。

现在，您可能正在为高度设置动画，因为您希望堆叠在网格下的东西向上移动以填充网格占用的空间。在这种情况下，您可能需要执行一些视觉技巧，例如对网格下方的事物进行动画平移以将它们向上移动，然后在动画的最后，作为最后一个关键帧，您可以重置 RenderTransforms 并折叠网格。然后，您将只经历一次测量/排列，而不是每个动画帧一次。

最后，我建议阅读有关 Windows Phone 性能注意事项的内容。这是一个很好的文档：http://bit.ly/15cExFz

这两个演示文稿非常棒。我不能推荐他们。 http://channel9.msdn.com/events/PDC/PDC10/CD03 & http://channel9.msdn.com/Events/Build/2012/3-048

Answer 2

我遇到过类似的问题，但我使用 DoubleAnimation 为 PlaneProjection 的 RotationX、RotationY 属性设置了动画。从这个article 中找到了问题的解决方案。它添加了以 0.1 结尾的“神奇”数字——这告诉系统这是基于控件宽度的比率，它是属性的 hack 过载，但在某些情况下它会带来真正的性能增长。

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="anonymousOnLabel">
    <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.1" />
    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="91.1" />
</DoubleAnimationUsingKeyFrames>

当然，直接为 Width 和 Height 属性设置动画也不是什么好主意，因为这将是 Dependent Animation 并且会对性能产生影响。