移动帧时,关键帧动画会显得模糊吗？

Question

我使用JazzHands在UIScrollView中创建基于关键帧的动画.这是一个例子.看看顶部的视图.当您从一个页面移动到另一个页面.动画运行时,顶部的视图从左向右略微移动.动画看起来有点模糊.

以下是此处示例中的代码:

IFTTTFrameAnimation *titleView1FrameAnimation = [IFTTTFrameAnimation new];
    titleView1FrameAnimation.view = self.titleView1;
    [self.animator addAnimation:titleView1FrameAnimation];

    [titleView1FrameAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:timeForPage(1)
                                                                                    andFrame:self.titleView1.frame]];
    [titleView1FrameAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:timeForPage(2)
                                                                           andFrame:CGRectOffset(self.titleView1.frame, timeForPage(2), 0)]];
    [titleView1FrameAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:timeForPage(3)
                                                                           andFrame:CGRectOffset(self.titleView1.frame, timeForPage(3), 0)]];
    [titleView1FrameAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:timeForPage(4)
                                                                           andFrame:CGRectOffset(self.titleView1.frame, timeForPage(4), 0)]];

运行演示时,请查看以下屏幕截图中标有红色的部分:

编辑:以下是包含此问题的代码:https://github.com/steffimueller/Intro-Guide-View-for-Talk.ai

如何让动画运行流畅,模糊不清？

Answer 1

这是由于 JazzHands 中的帧速率IFTTTAnimatedScrollViewController被设置为非视网膜显示器。您需要将 in 的数字加倍timeForPage，并使用contentOffsetin的数字加倍，但在使用它来布局视图位置的地方使用animate原始的非加倍值，而不是在动画时间中使用它。timeForPage

以下是您必须对示例进行更改才能使其正常工作的要点。固定演示要点

您需要此方法来设置动画时间：

#define timeForPage(page) (NSInteger)(self.view.frame.size.width * (page - 1) * 2.0)

这个用于根据页面尺寸设置视图的中心：

#define centerForPage(page) (NSInteger)(self.view.frame.size.width * (page - 1))

然后您需要重写该scrollViewDidScroll:方法IFTTTAnimatedScrollViewController以使用当前使用的数字的两倍。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    [self.animator animate:(NSInteger)(scrollView.contentOffset.x * 2)];
}

我们将努力更新 JazzHands 演示！