Key-Frame-Animation erscheint verschwommen, wenn Frames verschoben werden?

Question

Ich benutze JazzHands, um eine Key-Frame-basierte Animation in einem UIScrollView zu erstellen. Hier ist ein example. Sehen Sie sich die Ansicht oben an. Wenn Sie von Seite zu Seite wechseln. Während die Animation läuft, bewegt sich die Ansicht oben leicht von links nach rechts. Die Animation erscheint ein wenig unscharf.

Hier ist der Code aus dem example here genommen:

:

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

Wenn die demo einen Blick auf das Teil mit roten im folgenden Screenshot markiert nehmen läuft

Edit: Hier ist der Code, der dieses Problem enthält: https://github.com/steffimueller/Intro-Guide-View-for-Talk.ai

Wie kann ich die Animation reibungslos und weniger verschwommen machen?

Answer 1

Dies ist aufgrund der Framerate in den JazzHands IFTTTAnimatedScrollViewController eingestellt wird für Nicht-Retina-Displays Sie können es so gehen Sie vor und erstellen. Sie müssen die Anzahl in timeForPage verdoppeln und auch die doppelte Nummer der contentOffset in animate verwenden, aber verwenden Sie die ursprünglichen nicht-doppelten Werte von timeForPage an Orten, an denen Sie die Positionen der Ansichten verwenden, anstatt sie zu verwenden die Animationszeit

Hier sind einige Änderungen, die Sie an Ihrem Beispiel vornehmen müssen, damit es funktioniert. Fixed Demo Gist

Sie müssen diese Methode zur Festsetzung der Animationszeiten:

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

und dieses für die Einstellung der Zentren Ihrer Ansichten auf der Grundlage der Seite Dimensionen:

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

Dann müssen Sie außer Kraft setzen Verwenden Sie die scrollViewDidScroll: Methode in IFTTTAnimatedScrollViewController, um die doppelten Zahlen zu verwenden, die sie gerade verwendet.

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

Wir arbeiten daran, die JazzHands-Demo aktualisiert zu bekommen!

Answer 2

Bevor Sie Ihre Animation Aufruf starten:

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

Sobald die Animation Anruf

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

Sie sollten immer es verwenden, wenn Sie ein Sie können

Ansicht Animieren beendet ist sehen Sie mehr Details darüber in der WWDC 2012 Polishing Your Interface Rotations Video (bezahlt Entwickler-Abonnement benötigt)

Ich hoffe das hilft dir!

[EDIT]

Jedes Mal, wenn die Methode belebtes gesetzt shouldRasterize auf YES aufrufen, bevor es, wie im Beispiel unten:

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

Answer 3

ich um ein wenig mit dem Code messed haben und es scheint, dass das Halten dieser oberen Ansichten an der richtigen Stelle, während die Scrollansicht scrollt, es nach links und rechts wackeln ließ.

Was ich getan habe, ist die Titelansicht aus der Bildlaufansicht herauszunehmen und sie der View-Controller-Ansicht hinzuzufügen.

Sie können es in Aktion sehen here

Später bearbeiten:

tatsächlich zu sehen, was ich geändert, um die Datei Unterschiede in Git überprüfen können.Grundsätzlich zog ich Ihre titleView s (titleView1, titleView2, usw.) aus dem Scroll der Ansicht des View-Controller (also im Grunde habe ich alle Linien ersetzt, die wie folgt waren:

[self.scrollView addSubView:self.titleView1] 

etwas wie folgt aus:

Danach habe ich auch die Keyframe-Animationen herausgenommen, die Ihre Titelansichten an Ort und Stelle hielten, da sie sich nicht mehr mit dem Scrollview bewegten. Praktisch habe ich alle Zeilen gelöscht, die eine Rahmenanimation hinzufügten Titelansichten von jedem configurePage X Animation.

zweite Frage Antwort:

Sagen Sie Ihre Bildschirmansicht screenshotView genannt wird.

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

und animieren es wie folgt aus:

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