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上将Scale的动画从1.0设置为0.0 。

现在，您可以对高度进行动画处理，因为您希望堆叠在网格下的物体向上移动以填充网格所占用的空间。 在这种情况下，您可能需要执行一些视觉技巧，例如在网格下面的对象上设置“ 平移 ”动画，以将其向上移动，然后在动画的最后，作为最后一个关键帧，您可以重置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属性设置了动画。 从本文中找到了解决问题的方法。 它添加了以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属性进行动画处理不是一个好主意，因为它将是从属动画，并且会对性能产生影响。