移动帧时关键帧动画出现模糊？

Posted 2023-03-10

【中文标题】移动帧时关键帧动画出现模糊？

【英文标题】：Key-Frame Animation appears fuzzy when moving Frames?

【发布时间】：2015-06-05 00:31:25

【问题描述】：

我使用JazzHands 在 UIScrollView 中创建基于关键帧的动画。 这是example。看看顶部的景色。当你从一个页面移动到另一个页面时。当动画运行时，顶部的视图会从左向右轻微移动。动画看起来有点模糊。

这是取自example here的代码：

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)]];

在运行demo 时，请查看以下屏幕截图中标记为红色的部分：

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

如何使动画运行流畅且不那么模糊？

【问题讨论】：

只是为了确定。你想摆脱顶视图的左右移动吗？

是的。我不知道我的表达是否正确，但顶视图在水平晃动。

【参考方案1】：

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

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

你需要这个方法来设置动画时间：

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

还有一个用于根据页面尺寸设置视图中心的方法：

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

然后你需要重写IFTTTAnimatedScrollViewController 中的scrollViewDidScroll: 方法，以使用它当前使用的数字的两倍。

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

我们将努力更新 JazzHands 演示！

【参考方案2】：

开始动画调用之前：

view.layer.shouldRasterize = YES; (seems that you are using objective-c so I put YES here, for swift should be true)

动画一结束就调用

view.layer.shouldRasterize = NO; (seems that you are using objective-c so I put NO here, for swift should be false)

在为视图设置动画时应始终使用它

您可以在 WWDC 2012 Polishing Your Interface Rotations 视频中看到有关它的更多详细信息（需要付费开发者订阅）

希望对你有帮助！

[编辑]

每次调用方法 animate set shouldRasterize 到 YES 之前，如下例所示：

titleView1FrameAnimation.view.layer.shouldRasterize = YES;
[self. titleView1FrameAnimation animate:scrollView.contentOffset.x];

【讨论】：

我什么时候知道动画何时开始和何时结束？

更正（好像你用的是objective-c !xcode

@stephan1001 我编辑了我的答案，如果对你有帮助，请告诉我！

您能分享您的代码，以便我可以尝试在代码中实现解决方案吗？

@Icaro 这是代码：github.com/steffimueller/Intro-Guide-View-for-Talk.ai

【参考方案3】：

我对代码做了一些改动，似乎在滚动视图滚动时将这些顶部视图保持在适当位置使其左右摇晃。

我所做的是从滚动视图中取出标题视图并将其添加到视图控制器视图中。

你可以看到它在行动here

后期编辑：

要实际查看我所做的更改，您可以检查 Git 中的文件差异。基本上我将你的titleViews（titleView1、titleView2 等）从 scrollView 移到了视图控制器的视图（所以基本上我已经替换了所有像这样的行：

[self.scrollView addSubView:self.titleView1]

到这样的事情：

[self.view addSubView:self.titleView1]

在那之后，我还删除了保持标题视图就位的关键帧动画，因为它们不再随着滚动视图移动。实际上，我已经从每个 configurePageXAnimation 中删除了所有将帧动画添加到标题视图的行。

第二个问题答案：

假设您的屏幕截图视图名为screenshotView。你可以继续这样创建它：

UIImageView *screenshotView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ScreenshotImage"]];
[self.view addSubview:screenshotView];
self.screenshotView = screenshotView;
[self.screenshotView setCenter:CGPointMake(self.view.center.x + self.view.bounds.size.width, <#yourDesiredY#>)];

并像这样对其进行动画处理：

//screenshotView frame animation
IFTTTFrameAnimation *screenshotViewFrameAnimation = [IFTTTFrameAnimation new];
screenshotViewFrameAnimation.view = self.screenshotView;
[self.animator screenshotViewFrameAnimation];

[screenshotViewFrameAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:timeForPage(1) andFrame:self.screenshotView.frame]];
[screenshotViewFrameAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:timeForPage(2) andFrame:CGRectOffset(self.screenshotView.frame, -self.scrollView.bounds.size.width, 0.0)]];
[screenshotViewFrameAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:timeForPage(3) andFrame:CGRectOffset(self.screenshotView.frame, -self.scrollView.bounds.size.width, 0.0)]];
[screenshotViewFrameAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:timeForPage(4) andFrame:CGRectOffset(self.screenshotView.frame, -self.scrollView.bounds.size.width * 2, 0.0)]];

【讨论】：

效果很好。我接受你的回答。您能否更详细地描述您所做的工作？

如果这真的有帮助，请不要忘记接受我的回答！谢谢！

好的，最后一件事。当您在第 2 页和第 3 页上有应用程序的屏幕截图时。您希望它仅在您位于第 2 页和第 3 页（而不是第 1 页或第 4 页）时出现。在 page3 之后，它应该移出屏幕左侧。你会怎么做？

@MihaiFratu 如果您可以将其添加到您的答案中，那就太好了。

再次检查我更新的答案。请，下次不要要求人们在同一个线程中回答多个问题。你问一个单独的问题对这里的人来说会更有用