ios - color - ionic sass

Anime el cambio del texto del título de la barra de navegación

Question

En mi aplicación, tengo un controlador de vista de página que permite al usuario deslizar entre las diferentes "secciones" de la aplicación, y en la parte superior de la barra de navegación, cambio el texto del título a la nueva sección que el usuario ha pageViewController:didFinishAnimating:previousViewControllers:transitionCompleted: a través de pageViewController:didFinishAnimating:previousViewControllers:transitionCompleted: Actualmente está cambiando al instante el texto del título cuando la animación se ha completado. Me gustaría mejorar esto con algo de animación, un sutil efecto de desvanecimiento.

Primero traté de implementar [UIView animationWithDuration:...] para animar cambiando el texto del título, pero no tiene animación y simplemente se actualiza al instante.

Luego me pregunté si sería posible actualizar el alfa del título de la barra de navegación a medida que el usuario se desplaza horizontalmente en función de lo lejos que se haya desplazado, llegando a 0 alfa cuando la siguiente sección esté a punto de aparecer en la pantalla, entonces puedo instantáneamente cambie el texto mientras está en 0 y luego desvanezca rápidamente en 1 alfa. Pero no veo un método en UIPageViewControllerDelegate que se llama cuando la posición de desplazamiento se ha actualizado.

Si es posible, en lugar de simplemente desvanecerme, podría desvanecerse y mover la posición del texto del título en la barra de navegación como la animación predeterminada que se produce cuando se navega hacia atrás desde un segmento de inserción mediante un gesto de deslizamiento. Deslizaría el título de la sección anterior mientras el usuario se desplaza y proporciona el título de la siguiente sección del otro lado, de modo que cuando la transición finalice, el título de la sección anterior esté fuera de pantalla y el nuevo esté perfectamente centrado para que se complete el reemplazo. Pero nuevamente, esto requiere saber exactamente cuánto ha desplazado el usuario el controlador de vista de página.

¿Es posible implementar alguna de las animaciones deseadas?

Answer 1

Una solución es crear un título personalizado y animar su posición utilizando el método delegado de scrollView oculto del controlador de vista de página. Como dijo Zhang, el título personalizado es simplemente self.navigationItem.titleView = customNavTitleLabel;

Answer 2

Si desea animar entre diferentes cadenas de título, use lo siguiente:

CATransition *fadeTextAnimation = [CATransition animation];
fadeTextAnimation.duration = 0.5;
fadeTextAnimation.type = kCATransitionFade;

[self.navigationController.navigationBar.layer addAnimation: fadeTextAnimation forKey: @"fadeText"];
self.navigationItem.title = "My new title";

Puede ajustar la duración y establecer una función de tiempo para adaptarse, por supuesto.

También hay otros tipos de animación que podrían funcionar en diferentes circunstancias (gracias @inorganik):

kCATransitionFade
kCATransitionMoveIn
kCATransitionPush
kCATransitionReveal

Answer 3

Encontramos que la mejor manera es esta categoría:

@implementation UIViewController (ControllerNavigationEffects)

-(void) setNavigationTitleWithAnimation:(NSString *) title {
    if ([self.navigationItem.title isEqualToString:title]) {
        return;
    }
    @weakify(self);
    float duration = 0.2;
    [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        @strongify(self);
        self.navigationItem.titleView.alpha = 0;
    } completion:^(BOOL finished) {}];

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(duration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        @strongify(self);
        self.navigationItem.titleView = nil;
        self.navigationItem.title = title;

        [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
            self.navigationItem.titleView.alpha = 1;
        } completion:nil];
    });
}

-(void) setNavigationTitleViewWithAnimation:(UIView *) titleView {
    if ([self.navigationItem.titleView isKindOfClass:[titleView class]]) {
        return;
    }
    @weakify(self);
    float duration = 0.2;

    CATransition *fadeTextAnimation = [CATransition animation];
    fadeTextAnimation.duration = duration;
    fadeTextAnimation.type = kCATransitionFade;

    [self.navigationController.navigationBar.layer addAnimation: fadeTextAnimation forKey: @"fadeText"];
    self.navigationItem.title = @"";


    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(duration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        @strongify(self);
        self.navigationItem.title = @"";
        self.navigationItem.titleView = titleView;

        [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
            self.navigationItem.titleView.alpha = 1;
        } completion:nil];

    });
}

Answer 4

Para mayor comodidad, la solución de Ashley Mills en Swift:

16/11/2016 Actualizado para Swift 3 (Gracias a n13)

let fadeTextAnimation = CATransition()
fadeTextAnimation.duration = 0.5
fadeTextAnimation.type = kCATransitionFade

navigationController?.navigationBar.layer.add(fadeTextAnimat‌​ion, forKey: "fadeText")
navigationItem.title = "test 123"

Swift 2.x

let fadeTextAnimation = CATransition()
fadeTextAnimation.duration = 0.5
fadeTextAnimation.type = kCATransitionFade

navigationController?.navigationBar.layer.addAnimation(fadeTextAnimation, forKey: "fadeText")
navigationItem.title = "test 123"

¡Le paso mi sombrero a Ashley!