L'animazione del fotogramma chiave appare sfocata quando si spostano i fotogrammi?

Question

Io uso JazzHands per creare un'animazione basata su fotogramma chiave in un UIScrollView. Ecco uno example. Guarda la vista in alto. Quando ti sposti da una pagina all'altra. Mentre l'animazione è in esecuzione, la vista in alto si sposta leggermente da sinistra a destra. L'animazione appare un po 'sfocata.

ecco il codice preso dal 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)]]; 

Quando si esegue il demo prendere uno sguardo alla parte contrassegnata con il rosso nello screenshot seguente:

Modifica: ecco il codice contenente questo problema: https://github.com/steffimueller/Intro-Guide-View-for-Talk.ai

Come posso rendere l'animazione scorrevole e meno sfocata?

Answer 1

Ciò è dovuto al il frame rate nei JazzHands IFTTTAnimatedScrollViewController essere impostato per i display non-retina. È necessario raddoppiare il numero in timeForPage e utilizzare anche il doppio del numero contentOffset in animate, ma utilizzare i valori originali non duplicati di timeForPage in luoghi in cui lo si stava utilizzando per definire le posizioni delle viste anziché utilizzarlo per il tempo di animazione.

Ecco un elenco delle modifiche che dovresti apportare al tuo esempio per farlo funzionare. Fixed Demo Gist

avete bisogno di questo metodo di fissazione dei tempi di animazione:

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

E questo per impostare i centri di vostro punto di vista in base alle dimensioni della pagina:

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

quindi è necessario eseguire l'override il metodo scrollViewDidScroll: in IFTTTAnimatedScrollViewController per utilizzare il doppio dei numeri attualmente in uso.

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

Lavoreremo per ottenere la demo di JazzHands aggiornata!

Answer 2

Prima di iniziare la chiamata di animazione:

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

Non appena l'animazione è finita chiamata

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

È consigliabile utilizzare sempre quando si animare una vista

Puoi vedere maggiori dettagli a riguardo nel video WWDC 2012 Polishing Your Interface Rotations (necessario abbonamento per sviluppatore a pagamento)

Spero che questo ti aiuti!

[EDIT]

Ogni volta che si chiama il metodo animato impostato shouldRasterize YES prima di esso, come nell'esempio sotto:

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

Answer 3

ho pasticciato un po 'con il codice e sembra che mantenere quelle viste dall'alto in posizione mentre lo scrollview sta scorrendo lo abbia fatto muovere a sinistra ea destra.

Quello che ho fatto è togliere la vista del titolo dalla vista di scorrimento e aggiungerla alla vista del controller della vista.

Lo si può vedere in azione here

Successivamente modificare:

per vedere effettivamente quello che ho cambiato è possibile controllare le differenze di file in Git.Fondamentalmente mi sono trasferito tuoi titleView s (titleView1, titleView2, ecc) dal ScrollView alla visualizzazione del controller della vista (in modo sostanzialmente Ho sostituito tutte le linee che erano come questo:

[self.scrollView addSubView:self.titleView1] 

a qualcosa di simile:

Dopodiché ho estratto anche le animazioni dei fotogrammi chiave che mantenevano le viste dei titoli in atto poiché non si muovevano più con la scrollview. Praticamente ho eliminato tutte le linee che aggiungevano un'animazione di fotogramma al tuo titleviews da ogni configurePage X Animazione.

seconda domanda risposta:

Dite la vostra vista screenshot si chiama screenshotView. Si può andare avanti e creare in questo modo:

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

e animare in questo modo:

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