卡顿的故事板动画 Windows Phone 8.1

Question

我正在使用故事板动画来开发我的Windows Phone 8.1应用程序，但有时会出现严重的卡顿问题。（Lumia 930） 噢，还有，我想我可以补充一下，这是一个通用应用程序模板。

首先是动画代码：

 <Page.Resources>
    <local:SimpleMathConverter x:Key="SimpleMathConverter"/>
    <Storyboard x:Name="ImageViewShowAnimation">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="GameImageView">
            <EasingDoubleKeyFrame KeyTime="0" Value="90"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="ImageViewHideAnimation">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="GameImageView">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="ResultViewShowAnimation">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="GameResutView">
            <EasingDoubleKeyFrame KeyTime="0" Value="-90"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="ResultViewHideAnimation">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="GameResutView">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-90"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

接下来是代码后端事件处理

 public GamePage()
 {
    ImageViewHideAnimation.Completed += (sender, o) => ResultViewShowAnimation.Begin();
    ResultViewHideAnimation.Completed += (sender, o) => ImageViewShowAnimation.Begin();
 }

以及触发动画的按钮

 private async void ChangeState()
 {
    CoreDispatcher dispatcher = CoreWindow.GetForCurrentThread().Dispatcher;
    switch (state)
    {
        case GameState.ImageView:

            await dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => ImageViewHideAnimation.Begin());
            state = GameState.ResultView;
            break;
        case GameState.ResultView:
            await dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => ResultViewHideAnimation.Begin());
            state = GameState.ImageView;
            break;
        default:
            throw new ArgumentOutOfRangeException();
    }
 }

这个动画的作用是模拟翻转一张卡片并显示其背面内容，当您再次点击旋转按钮时，它会再次翻转卡片并显示初始内容。问题在于有时候（我会说4/10的情况下），当动画应该开始并且实际上已经开始时，它会出现卡顿，并且只显示了动画的一半。就像动画已经开始但屏幕还没有跟上来一样。我尝试使用和不使用dispatcher运行动画，希望能产生其他效果，但都没有成功。您有什么建议可以解决这个问题吗？

- Shuffler

---

如果你去掉1秒到90度的设定，改为输入10个分别为10度的关键帧，会发生什么呢？我只是想看看这1秒是否对手机反应来说太快了。 - Chubosaurus Software

当我将动画改为每个0.1秒10个关键帧，每次旋转10度时，一切正常工作。感谢帮助。你知道是什么原因导致了问题吗？ - Shuffler

是的，我会在解决方案中陈述我的推理。 - Chubosaurus Software

Answer 1

如果取消1秒到90度的设置，改为输入10个每个10度的关键帧，会发生什么？我只是想看看这1秒是否对手机反应来说太快了。

---

我认为它没有预先计算/预渲染你的转换。因此，每次进行如此巨大的90度转弯时，它都需要一段时间来计算。将其限制在几个关键帧而不是一个关键帧上，可以缩短它需要计算的时间，从而快速显示您的动画。

- Chubosaurus Software