Bella transizione di dissolvenza zoom tra i controller come nelle nuove app di Facebook, Gmail

Question

Di recente, sempre più app utilizzano il nuovo tipo di transizione tra le visualizzazioni. È difficile definirlo, ma la transizione sembra che la vista di anteprima si stia spegnendo, andando più in basso (traduzione verso il basso) e diminuisca un po '- tutto simultaneamente. È davvero sottile ed elegante.

È possibile osservare questa transizione al rallentatore nell'app Facebook: trovare l'immagine di qualcuno sul muro, toccare per visualizzarla e quindi trascinare lentamente l'immagine a schermo intero lentamente e si noterà che il muro si sta sollevando dalla parte posteriore - dissolvenza e ridimensionamento un po '. Questa è la transizione. La transizione comporta anche lo sbiadimento della barra di stato.

Questa transizione è presente in Gmail 2.0 anche quando si aprono le impostazioni dal pannello di sinistra.

Penso che ci sia un certo framework o metodo preparato per questo perché sempre più app lo hanno implementato. Ma forse ho sbagliato anche perché vedo alcune piccole differenze in alcune app nella traiettoria della transizione - ad es. Gmail utilizza un piccolo effetto di carosello, ma Facebook si riduce a metà.

In ogni caso sembra essere una nuova tendenza.

Sto cercando qualche riferimento o framework o know-how sull'implementazione di quel tipo di transizioni.

Grazie per qualsiasi informazione utile.

Answer 1

Prova questa link.I che questa sia la cosa che stai cercando esattamente https://github.com/kentnguyen/KNSemiModalViewController

Answer 2

L'ho visto per la prima volta nelle app del National Geographic ... provate con questi due metodi, il primo 'rilascia indietro' il secondo 'riporta indietro'. Ha funzionato bene per me in passato, basta apportare alcune modifiche in base alle proprie esigenze.

- (void)dropItBack:(id)sender 
{ 
    // Position 
    CABasicAnimation *posAnimation = [CABasicAnimation animationWithKeyPath:@"position"]; 
    posAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(160, 284)];//center point 

    // Opacity 
    CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"]; 
    opacityAnimation.toValue = [NSNumber numberWithFloat:0.5f]; 

    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; 
    scaleAnimation.toValue = [NSNumber numberWithDouble:0.8]; 

    // Dramaticism of the Z rotation 
    // A lower number is more dramatic 
    float distance = 1000; 
    CATransform3D trans = CATransform3DIdentity; 
    trans.m34 = 1.f/-distance; 

    // Rotate Back 
    CABasicAnimation *rockBack = [CABasicAnimation animationWithKeyPath:@"transform"]; 
    rockBack.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(trans, M_PI_4, 1.f, 0.f, 0.f)]; 
    rockBack.beginTime = 0.f; 

    // Rotate forward 
    trans.m34 = 0.f; 
    CABasicAnimation *rockForward = [CABasicAnimation animationWithKeyPath:@"transform"]; 
    rockForward.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(trans, M_PI_4, -1.f, 0.f, 0.f)]; 
    rockForward.beginTime = 0.25f; 

    CAAnimationGroup *animationGroup = [CAAnimationGroup animation]; 
    animationGroup.duration = 0.5f; 
    animationGroup.repeatCount = 0.f; 
    animationGroup.removedOnCompletion = NO; 
    animationGroup.autoreverses = NO; 
    animationGroup.fillMode = kCAFillModeForwards; 
    animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 
    [animationGroup setAnimations:[NSArray arrayWithObjects:rockBack, rockForward, scaleAnimation, posAnimation, opacityAnimation, nil]]; 

    [self.navigationController.view.layer addAnimation:animationGroup forKey:nil]; 

    popsheet = [UIButton buttonWithType:UIButtonTypeCustom]; 
    [popsheet setBackgroundColor:[UIColor blueColor]]; 
    [popsheet setFrame:CGRectMake(0, 580, 320, 400)]; 
    [popsheet addTarget:self action:@selector(bringItForward:) forControlEvents:UIControlEventTouchUpInside]; 
    [self.tabBarController.view addSubview:popsheet]; 

    [UIView animateWithDuration:0.3 animations:^{ 
     [popsheet setFrame: CGRectMake(0, 180, 320, 400)]; 
    }]; 
} 

- (void)bringItForward:(id)sender 
{ 
    // Position 
    CABasicAnimation *posAnimation = [CABasicAnimation animationWithKeyPath:@"position"]; 
    posAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(160, 284)]; 

    // Opacity 
    CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"]; 
    opacityAnimation.toValue = [NSNumber numberWithFloat:1.f]; 

    // Scale 
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; 
    scaleAnimation.toValue = [NSNumber numberWithDouble:1.f]; 

    // Dramaticism of the Z rotation 
    // A lower number is more dramatic 
    float distance = 1000; 
    CATransform3D trans = CATransform3DIdentity; 
    trans.m34 = 1.f/distance; 

    // Rotate back 
    CABasicAnimation *rockBack = [CABasicAnimation animationWithKeyPath:@"transform"]; 
    rockBack.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(trans, M_PI_4, 1.f, 0.f, 0.f)]; 
    rockBack.beginTime = 0.f; 

    // Rotate forward 
    trans.m34 = 0.f; 
    CABasicAnimation *rockForward = [CABasicAnimation animationWithKeyPath:@"transform"]; 
    rockForward.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(trans, M_PI_4, -1.f, 0.f, 0.f)]; 
    rockForward.beginTime = 0.25f; 

    CAAnimationGroup *animationGroup = [CAAnimationGroup animation]; 
    animationGroup.duration = 0.5f; 
    animationGroup.repeatCount = 0.f; 
    animationGroup.removedOnCompletion = NO; 
    animationGroup.autoreverses = NO; 
    animationGroup.fillMode = kCAFillModeForwards; 
    animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 
    [animationGroup setAnimations:[NSArray arrayWithObjects:posAnimation, rockBack, rockForward, opacityAnimation, nil]]; 

    [self.navigationController.view.layer addAnimation:animationGroup forKey:nil]; 
    [UIView animateWithDuration:0.3 animations:^{ 
     [popsheet setFrame: CGRectMake(0, 580, 320, 400)]; 
    }]; 

} 

Answer 3

Credo che si dovrebbe provare questa libreria:

https://github.com/michaelhenry/MHFacebookImageViewer