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.
¿Tienes una aplicación iOS?, ¿quieres reaprovechar tus conocimientos y código Objective-C para acceder a la plataforma universal Windows?. En esta sesión conoceremos el Bridge de Windows para iOS, convertiremos algunas aplicaciones iOS a UWP e incluso veremos como añadir características específicas de la plataforma Windows como el uso de Live Tiles por ejemplo.
¿Tienes una aplicación iOS?, ¿quieres reaprovechar tus conocimientos y código Objective-C para acceder a la plataforma universal Windows?. En esta sesión conoceremos el Bridge de Windows para iOS, convertiremos algunas aplicaciones iOS a UWP e incluso veremos como añadir características específicas de la plataforma Windows como el uso de Live Tiles por ejemplo.
Xamarin.Forms es un framework que nos añade una capa de abstracción permitiendo desarrollar la interfaz de nuestras aplicaciones móviles multiplataforma una única vez, compartiendo el código de la UI. Veremos como crear aplicaciones con Xamarin.Forms además de centrarnos en cómo acceder a características propias de cada plataforma mediante la creación de servicios o Custom Renders.
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
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
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
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
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