Este documento trata sobre animaciones y el framework QuartzCore en iOS. Explica que QuartzCore soporta todas las animaciones en iOS y permite animar propiedades como el frame y alpha de las vistas. Detalla los diferentes métodos para animar vistas, como animateWithDuration, y cómo QuartzCore permite dibujos complejos como gradientes y transformaciones 3D a bajo nivel usando OpenGL.

1. 10 - ANIMACIÓN Y
QUARTZCORE
Curso de desarrollo de aplicaciones móviles para iPhone y iPad
endika.gutierrez@urbegi.com
alex.rayon@urbegi.com
Urbegi Learning
Contents

2. CONTENIDO
• Introducción
• Animaciones
• QuartzCore

3. CONTENIDO
• Introducción
• Animaciones
• QuartzCore

4. INTRODUCCIÓN
• iOSes una de ls plataformas móviles más fluidas en cuanto a
animaciones y transiciones se refiere
• Todas
estas animaciones son gestionadas a través de un
framework llamado QuartzCore

5. CONTENIDO
• Introducción
• Animaciones
• QuartzCore

6. ANIMACIONES
• Uno de los puntos fundamentales de QuartzCore son
precisamente la animación de vistas
• UIKitprovee de un interfaz para la animación de los cambios
en ciertos campos de las vistas de manera sencilla

7. ANIMACIONES 2
• Así UIView permite la animación de los siguientes campos:
• frame
• bounds
• center
• tranform
• alpha
• backgroundColor
• contentStretch

8. ANIMACIONES 3
• Paraanimar cambios en estos campos la clase UIView provee
de varios métodos de clase
• La manera más sencilla de manejarlo es usando bloques
• Los bloques son funciones anónimas y se indican con el
caracter ^ en lugar del nombre
[UIView animateWithDuration:1 animations:^{
// Actualizamos los campos que queramos
view.frame =CGRectMake(0, 0, 320, 100);
}];

9. ANIMACIONES 4
• Existen métodos más complejos que permiten, por ejemplo
elegir el tipo de animación
[UIView animateWithDuration:1.0
delay:2.0
options:UIViewAnimationCurveEaseIn
animations:^{
// Actualizamos las propiedades a animar
}
completion:^(BOOL finished) {
// Código a ejecutar al finalizar la animación
}];

10. ANIMACIONES 5
• Podemos definir también la animación sin el uso de bloques
[UIView beginAnimations:@"Nombre de la Animación" context:nil];
// Configuramos las animaciones
[UIView setAnimationDuration:1.0];
[UIView setAnimationDelay:2.0];
// Variamos los campos que queremos animar
view.alpha = 0.4;
// Lanzamos la aminación
[UIView commitAnimations];

11. ANIMACIONES 6
• Podemos aplicar estas animaciones a cualquier tipo de vista y
podemos combinar animaciones de manera que consigamos
un aspecto atractivo para los cambios en la interfaz

12. CONTENIDO
• Introducción
• Animaciones
• QuartzCore

13. QUARTZCORE
• QuartzCore es el framework que soporta todas las
animaciones
• Alcontrario del resto de los frameworks posee gran parte de
su funcionalidad programada en C

14. QUARTZCORE 2
• Es
un framework heredado de las primeras versiones de Mac
OS X
• Emplea OpenGL para realizar todas las animaciones

15. QUARTZCORE 3
• Posee una gran flexibilidad por lo que permite tanto dibujar
sobre la pantalla así como sobre imágenes o ficheros PDF
• Permiteel dibujado de rutas, imagenes vectoriales, sombras,
patrones, aplicar transformaciones 3D, etc
• Es por tanto uno de los frameworks más complejo

16. QUARTZCORE 4
• Para usarlo debemos incluir el framework desde el Xcode

17. QUARTZCORE 5
• Veamos el código para el dibujado de este gradiente sobre
una elipse:

18. // Obtiene el contexto en pantalla sobre el cual dibujará
CGContextRef context = UIGraphicsGetCurrentContext();
// Coloca el contexto en la posición de dibujado
UIGraphicsPushContext(context);
// Almacena los colores para el gradiente
CGFloat colors[] = {
1.0, 1.0, 1.0, 1.0,
0.0, 0.5, 1.0, 0.8};
// Emplearemos RGB como espacio de colores
CGColorSpaceRef baseSpace = CGColorSpaceCreateDeviceRGB();
// Creamos el gradiente
CGGradientRef gradient = CGGradientCreateWithColorComponents(baseSpace, colors, NULL, 2);
// Liberamos el espacio de colores
CGColorSpaceRelease(baseSpace), baseSpace = NULL;
CGRect rect = CGRectMake(50, 60, 100, 60);
// Almacena el estado de dibujado, para preparar el dibujado
CGContextSaveGState(context);
// Añade una elipse al contexto
CGContextAddEllipseInRect(context, rect);
// Hace que la elipse sea un clip (recorte)
CGContextClip(context);
CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));
// Dibuja el gradiente sobre la elipse
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
// Liberamos el gradiente
CGGradientRelease(gradient), gradient = NULL;
// restaura el estado de dibujado
CGContextRestoreGState(context);
// Dibuja el borde de la elipse
CGContextAddEllipseInRect(context, rect);
CGContextDrawPath(context, kCGPathStroke);
// Retorna al contexto de dibujado anterior
UIGraphicsPopContext();

19. QUARTZCORE 7
• Como vemos es algo complejo de manejar
• Sin
embargo es un framework muy bien documentado y
con ejemplos
• Podemos acceder a la referencia online

20. FIN