Animación de imágenes en iOS

En iOS se pueden programar animaciones de imágenes de manera sencilla. Vamos a ver un ejemplo en el que dos UIImageView intercambian sus posiciones, deslizándose de una a otra, cuando el usuario toca una de ellas. Además veremos las diferencias de usar el sistema de springs y struts o Autolayout.

Primero vamos a crear los dos UIImageView en el storyboard, image1 e image2 y cablearemso hacía el código para crear las propiedades.

De esta forma en el interface tendremos algo así:


@interface AnimacionViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *image1;
@property (weak, nonatomic) IBOutlet UIImageView *image2;
@end

Desde el inspector de atributos a una la pondremos como Background amarillo y a la otra rojo para poder diferenciarlas. Hay que tener también en cuenta que se debe permitir la interacción del usuario, por lo que el check deberá estar marcado tal y como se ve en la siguiente figura.

Ahora añadiremos el reconocimiento de gestos. Como lo que queremos es que la animación se produzca al tocar las imágenes, necesitamos el UITapGestureRecognizer. Lo crearemos en el viewDidLoad y se lo añadimos a las dos imágenes.

- (void)viewDidLoad
{
    [super viewDidLoad];

    

UITapGestureRecognizer *tapGesture1 = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap)];

UITapGestureRecognizer *tapGesture2 = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap)];

    

    [self.image1 addGestureRecognizer:tapGesture1];
    [self.image2 addGestureRecognizer:tapGesture2];
}

Como veis, la acción que se va a ejecutar es tap, que todavía no hemos definido. En ella lo que vamos a hacer es ejecutar el mensaje interchangImageView:imageView1 withImageView:imageView2, que también tenemos que definir.

- (void)tap
{
    [self interchangImageView:self.image1
                withImageView:self.image2];

    

}

Y es en interchangImageView:imageView1 withImageView:imageView2 donde veremos la diferencia de usar Autolayout o no.

Sin Autolayout


- (void)interchangImageView:(UIImageView *)imageView1 withImageView:(UIImageView *)imageView2
{
    CGPoint image1CenterPoint = imageView1.center;
    CGPoint image2CenterPoint = imageView2.center;

    

    [UIView animateWithDuration:1.0 animations:^{
        imageView1.center = image2CenterPoint;
        imageView2.center = image1CenterPoint;
    }];
}

Vemos que simplemente obtenemos el centro de cada imagen y luego los intercambiamos utilizando el class method animateWithDuration:animations de UIView. La duración de la animación será un segundo y en en bloque animations es donde intercambiamos los centros de las imágenes.

Con Autolayout

El método anterior no funciona si autolayout está activado. Si se moverían las imágenes pero, debido a las constraint definidas, volverían a su posición original. Por eso la animación debe basarse en las constraints. 

Añadiremos las constraints necesarias a ambas imágenes. En este caso son Top Space, Leading Space, Width y Height.

Cablearemos las dos Vertical Space para crear las dos propiedades NSLayoutConstraint, con lo que el interface ahora deberá quedar así:

@interface AnimacionViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *image1;
@property (weak, nonatomic) IBOutlet UIImageView *image2;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *verticalConstraintImage1;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *verticalConstraintImage2;
@end

Y el interchangImageView:imageView1 withImageView:imageView2 en este caso lo crearemos así:

- (void)interchangImageView:(UIImageView *)imageView1 withImageView:(UIImageView *)imageView2
{
    CGFloat img1ConstraintConstant = self.verticalConstraintImage1.constant;
    CGFloat img2ConstraintConstant = self.verticalConstraintImage2.constant;

    

    self.verticalConstraintImage1.constant = img2ConstraintConstant;
    self.verticalConstraintImage2.constant = img1ConstraintConstant;

    

    [imageView1 setNeedsUpdateConstraints];
    [imageView2 setNeedsUpdateConstraints];

    

    [UIView animateWithDuration:1.0 animations:^{
        [imageView1 layoutIfNeeded];
        [imageView2 layoutIfNeeded];
    }];
}

Lo que conseguimos con esto es intercambiar la distancia de ambas al top layout, por eso una subirá y la otra bajará. Al haber cambiado las constraints de las imágenes, es necesario llamar al mensaje setNeedsUpdateConstraints. Y, en el animateWithDuration, llamamos a layoutIfNeeded.

@Fin

Utilización de diferentes versiones del Storyboard

Con el nuevo aspecto del interface en el iOS 7, probablemente os habréis encontrado con que vuestras aplicaciones diseñadas para versiones anteriores no quedan bien.

Para evitar tener que rediseñar toda la aplicación para que tenga la misma apariencia en todas las versiones de iOS, se pueden crear dos (o los necesarios) storyboards, uno para la versión 7 y posteriores y otro para las anteriores. De esta forma se consigue que los usuarios que migren a la nueva versión del iOS tengan un interfaz acorde con el aspecto del iOS 7 pero, los que no migren, mantengan la apariencia de las versiones anteriores con el que ya están familiarizados.

Lo primero que tenemos que hacer es asegurarnos que, dentro de la pestaña General,  el Main interface está vacío. De esta forma no asignamos ningún storyboard por defecto.

Después haremos una copia del storyboard actual a la que vamos a llamar, por ejemplo iPhoneiOS7.storyboard. A la versión actual la renombraremos a iPhoneiOS6.storyboard.

Es conveniente también que en el File inspector, se seleccionen las siguientes opciones para cada storyboard.

iPhoneiOS6.storyboard

iPhoneiOS7.storyboard

En el AppDelegate, añadiremos el siguiente código dentro del application:willFinishLaunchingWithOptions:

UIStoryboard *mainStoryboard = nil;

if ([[[UIDevice currentDevice] systemVersion] compare:@"7.0" options:NSNumericSearch] == NSOrderedAscending)

{

    // Versiones anteriores a iOS 7
    // Instaciamos un objeto storyboard usando el archivo iPhoneiOS6.storyboard

    mainStoryboard = [UIStoryboard storyboardWithName:@"iPhoneiOS6" bundle:nil];

    

}

else

{

    // Versiones iguales o posteriores a iOS 7
    // Instaciamos un objeto storyboard usando el archivo iPhoneiOS7.storyboard

    mainStoryboard = [UIStoryboard storyboardWithName:@"iPhoneiOS7" bundle:nil];

    

}

// Instanciamos un objeto UIWindow y lo inicializamos con el tamaño de pantalla del dispositivo

self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

// Hacemos que el initialViewController sea el rootviewcontroller

self.window.rootViewController = [mainStoryboard instantiateInitialViewController];

Además, en el application:didFinishLaunchingWithOptions: añadiremos la siguiente línea de código justo antes del return:

[self.window makeKeyAndVisible];

Con esto, lo que faltaría sería modificar el iPhoneiOS7.storyboard para adaptarlo al interfaz de la nueva versión del iOS. Una vez modificado se ejecutaran diferentes storyboards según la versión de iOS en la que se ejecute la App.

@Fin