Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2011-2012 Depto. Ciencia de la Computación e IA
Gráficos y multimedia
Sesión 2: Gráficos y animación en iOS
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Puntos a tratar• APIs para gráficos• Quartz 2D• Propiedades del contexto• Primitivas geométricas• Imágenes• Texto• Tipos de contexto
• CoreAnimation• Propiedades de las capas• Animación de capas• Animación de vistas
2
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
APIs para gráficos
• OpenGL ES• API multiplataforma• Gráficos 2D y 3D• Alto rendimiento (videojuegos)
• APIs de Apple• Quartz 2D / CoreGraphics• CoreAnimation• Interfaz personalizada
3
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Quartz 2D / CoreGraphics
• API de las plataformas de Apple para crear composiciones 2D• Por ejemplo gráficas
• Todos sus elementos tienen el prefijo CG
• No contiene objetos Objective-C, sino estructuras y funciones
• Muchos objetos de UIKit pueden transformarse a CoreGraphics
4
CGColorRef color = [UIColor redColor].CGColor
CGImageRef imagen = [UIImage imageNamed: @"imagen.png"].CGImage;
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Contexto
• Se dibuja en un contexto gráfico CGContextRef
• Hace referencia a• Lienzo en el que se va a dibujar (por ejemplo la pantalla)• Atributos sobre la forma de dibujar en el lienzo (color, trazo, etc)
• Podemos crear contextos para diferentes lienzos• Vista en pantalla• Imagen en memoria• Documento PDF
5
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Contexto de las vistas• Podemos obtener el contexto actualmente activo con:
• Sobrescribir método drawRect: de las vistas• Dentro de él el contexto activo representa el área de la vista
• Solicitar repintado de la vista cuando actualicemos gráficos
6
CGContextRef context = UIGraphicsGetCurrentContext();
-‐ (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); // Dibujar en el contexto ...}
[self setNeedsDisplay];
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Sistema de coordenadas• Opuesto al sistema de UIKit en la coordenada y
• Excepto cuando se crear en el contexto de una vista (UIView)• Podemos cambiar esto aplicando una transformación
7
CGContextTranslateCTM(context, 0.0, rect.size.height);CGContextScaleCTM(context, 1.0, -‐1.0);
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Puntos vs Pixels• El sistema de coordenadas de CoreGraphics está en puntos• Un iPhone siempre tiene 480 x 320 puntos• Un iPad siempre tiene 1024 x 768 puntos
• Factor de escala• Indica la conversión entre puntos y pixels• Factor de escala de la pantalla
• Es 1.0 en iPhone 3GS y anteriores y iPad 2 y anterioresResolución en puntos y en pixeles coinciden
• Es 2.0 en dispositivos con pantalla retina (iPhone 4, ¿iPad 3?)480 x 320 puntos equivalen a 960 x 640 pixels
8
[UIScreen mainScreen].scale
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Atributos del pincel
• Color de trazo y de relleno
• Grosor del trazo
9
UIColor *colorRojo = [UIColor redColor];UIColor *colorAzul = [UIColor blueColor]; CGContextSetStrokeColorWithColor(context, colorAzul.CGColor);CGContextSetFillColorWithColor(context, colorRojo.CGColor);
CGContextSetLineWidth(context, 0.1f);
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Primitivas geométricas
• Rectángulos
• Trayectorias
10
CGRect rectangulo = CGRectMake(60, 40, 200, 400); CGContextStrokeRect(context, rectangulo);CGContextFillRect(context, rectangulo);
CGContextMoveToPoint(context, 10, 10);CGContextAddLineToPoint(context, 20, 30);CGContextAddLineToPoint(context, 30, 35); CGContextStrokePath(context); (10,10)
(20,30)(30,30)
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Imágenes
• Podemos dibujarlas directamente con CoreGraphics
• O utilizar la propia clase UIImage• Dibuja la imagen en el contexto actualmente activo
11
CGRect area = CGRectMake(0, 0, 320, 480);CGImageRef imagen = [UIImage imageNamed: @"imagen.png"].CGImage; CGContextDrawImage (contexto, area, imagen);
CGRect area = CGRectMake(0, 0, 320, 480);UIImage *imagen = [UIImage imageNamed: @"imagen.png"]; [imagen drawInRect:area];
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Texto• Establecer fuente y modo de dibujado
• Dentro de una vista las coordenadas y están invertidas• El texto aparece al revés• Debemos corregir esto con
• Dibujar una cadena con
12
CGContextSelectFont(context, "Helvetica-‐Bold", 12, kCGEncodingMacRoman);CGContextSetTextDrawingMode(context, kCGTextFill);
CGAffineTransform transform = CGAffineTransformMakeScale(1, -‐1);CGContextSetTextMatrix(context, transform);
NSString *cadena = @"Texto de prueba"; CGContextShowTextAtPoint(context, x, y, [cadena cStringUsingEncoding: NSMacOSRomanStringEncoding], [cadena length]);
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Métricas del texto• En ocasiones necesitamos saber el tamaño en pixels de una
cadena de texto• Por ejemplo para dibujar un recuadro a su alrededor
• Podemos saber dónde se ha terminado de dibujar el texto con:
• Podemos también dibujar el texto en modo invisible
13
CGContextSetTextDrawingMode(context, kCGTextInvisible);CGContextShowTextAtPoint(context, 0, 0, [cadena cStringUsingEncoding: NSMacOSRomanStringEncoding], [cadena length]);CGPoint ancho = CGContextGetTextPosition(context);
CGPoint position = CGContextGetTextPosition(context);
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Alternativas para dibujar texto• El método anterior sólo soporta codificación MacOS Roman• Problemas con el símbolo € por ejemplo
• No ofrece apenas facilidades para alinear el texto
• Es más sencillo dibujar texto directamente con UIString• El método drawInRect: pertenece a la categoría UIStringDrawing
• Para tener un mayor control podemos utilizar CoreText
14
NSString *cadena = @"Texto de prueba";UIFont *font = [UIFont boldSystemFontOfSize: 12];CGRect area = CGRectMake(10, 10, 100, 20); [cadena drawInRect: area withFont:font lineBreakMode:UILineBreakModeClip alignment:UITextAlignmentRight];
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Gradientes• La escala de colores del gradiente se mueve de 0 a 1• Podemos definir los colores en determinadas localizaciones
intermedias de dicho rango• El resto de colores se obtendrán por interpolación
15
size_t size = 2;CGFloat locations[2] = { 0.0, 1.0 };CGFloat components[8] = { 0.2, 0.2, 0.2, 1.0, // Color inicial (RGBA) 0.8, 0.8, 0.8, 1.0 }; // Color final (RGBA) CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();CGGradientRef gradient = CGGradientCreateWithColorComponents(space, components, locations, size);
0.0 1.0
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Dibujado del gradiente• Debemos especificar el punto de inicial y final en la pantalla• Todo el contexto se llenará con el degradado especificado en la
dirección desde el punto origen al destino• El punto origen tendrá el color de la localización 0.0, y el destino
tendrá el de la localización 1.0
16
CGPoint startPoint = CGPointMake(0.0, 0.0);CGPoint endPoint = CGPointMake(0.0, 480.0); CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Capas• Nos permiten crear una composición y repetirla en diferentes
lugares de la pantalla
• La composición se guarda sólo una vez en la memoria de vídeo
• Creamos un capa y obtenemos un contexto para dibujar en ella
• Una vez dibujada la capa, volcamos al contexto principal
17
CGLayerRef layer = CGLayerCreateWithContext (context, CGRectMake(0, 0, 50, 50), NULL);CGContextRef layerContext = CGLayerGetContext (layer);
CGContextDrawLayerAtPoint(context, CGPointZero, layer);
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Contexto de imagen• Nos permite crear imágenes con CoreGraphics• Establecemos contexto de imagen con
• Obtenemos contexto actual y dibujamos
• Obtenemos la imagen resultante
18
UIGraphicsBeginImageContextWithOptions(CGSizeMake(320,240), NO, 1.0);
// Dibujar en el contexto CGContextRef context = UIGraphicsGetCurrentContext();...
UIImage *imagen = UIGraphicsGetImageFromCurrentImageContext();UIGraphicsEndImageContext();
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Contexto de PDF• Podemos generar un documento PDF con CoreGraphics• Abrimos contexto para generar un fichero PDF
• Comenzamos página y obtenemos su contexto
• Podemos repetir esto para cada página del documento• Cerramos el contexto, y el PDF se habrá generado
19
UIGraphicsBeginPDFContextToFile(@"fichero.pdf", CGRectZero, nil);
UIGraphicsBeginPDFPage(); // Dibujar en el contexto CGContextRef context = UIGraphicsGetCurrentContext();...
UIGraphicsEndPDFContext();
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
CoreAnimation• Nos permite animar los elementos de la interfaz eficientemente
• Su elemento principal es CALayer• No confundir con CGLayer• CGLayer sirve para crear una composición 2D, una vez creada las
capas no se pueden manipular de forma independiente• CALayer define elementos que componen la interfaz y que
podemos mover de forma independiente
• Toda vista (UIView) contiene un CALayer
20
CALayer *layer = self.view.layer;
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Propiedades de las capas• Podemos decorarlas con distintos atributos
21
otras. Cuanto mayor sea la coordenada z, más cerca estará la capa del usuario, y tapará alas capas con valores de z inferiores.
Es especialmente interesante en este caso la propiedad transform, ya que nos permiteincluso aplicar transformaciones 3D a las capas. En el caso de las vistas, la propiedadtransform tomaba un dato de tipo CGAffineTransform, con el que se podía especificaruna transformación afín 2D (traslación, rotación, escalado o desencaje), mediante unamatriz de transformación 3x3. En el caso de las capas, la transformación es de tipoCATransform3D, que se especifica mediante una matriz de transformación 4x4 que nospermite realizar transformaciones en 3D. Tendremos una serie de funciones para creardistintas transformaciones de forma sencilla, como CATransform3DMakeTranslation,CATransform3DMakeRotation, y CATransform3DMakeScale. También podemos aplicartransformaciones sobre una transformación ya creada, pudiendo así combinarlas y creartransformaciones complejas, con CATransform3DTranslate, CATransform3DRotate, yCATransform3DScale.
Además de las propiedades anteriores, la capa ofrece una gran cantidad de propiedadesadicionales que nos van a permitir decorarla y tener un gran control sobre la forma en laque aparece en pantalla. A continuación destacamos algunas de estas propiedades:
Propiedad Descripción
backgroundColor Color de fondo de la capa.
cornerRadius Podemos hacer que las esquinas aparezcan redondeadas conesta propiedad.
shadowOffset,shadowColor,shadowRadius,shadowOpacity
Permiten añadir una sombra a la capa, y controlar laspropiedades de dicha sombra
borderWidth, borderColor Establecen el color y el grosor del borde de la capa.
doubleSided Las capas pueden animarse para que den la vuelta. Estapropiedad nos indica si al darle la vuelta la capa debe mostrarsetambién por la cara de atrás.
contents,contentsGravity
Nos permite especificar el contenido de la capa como unaimagen de tipo CGImageRef. Especificando la gravedadpodemos indicar si queremos que la imagen se escale al tamañode la capa, o que se mantenga su tamaño inicial y se alinee conalguno de los bordes.
Como hemos comentado anteriormente, las capas se organizan de forma jerárquica, aligual que ocurría con las vistas. Podemos añadir una subcapa con el método addLayer:
CALayer *nuevaCapa = [CALayer layer;][self.view.layer addSublayer: nuevaCapa];
En la sección anterior vimos cómo dibujar en una vista utilizando Core Graphics. Si
Gráficos y animaciones en iOS
13Copyright © 2011-12 Dept. Ciencia de la Computación e IA All rights reserved.
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Posicionamiento de capas• En vistas (UIView) tenemos la propiedad
center• Posición del centro de las vistas
• En capas (CALayer) tenemos propiedades position y anchorPoint• anchorPoint indica el punto de la capa
que se utilizará como referencia para posicionarla. Se mueve en coordenas relativas a la capa (de 0 a 1). El anchor point (0.5, 0.5) equivale al centro de la capa, con este punto se comportaría como las vistas.
• position indica la posición en pantalla del anchor point de la capa
22
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Definir nuevas capas• Siempre deben estar contenidas en un UIView• Podemos agregar subcapas a la capa principal
• Podemos dibujar en el contexto de dichas capas• Definir delegado para dibujar en la capa
• Implementar método que dibuje en ella con CoreGraphics
23
CALayer *nuevaCapa = [CALayer layer;][self.view.layer addSublayer: nuevaCapa];
nuevaCapa.delegate = self;
-‐ (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)context { // Codigo Core Graphics ... }
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Animación implícita de capas
• Podemos animar una capa simplemente cambiando cualquiera de sus propiedades
• La propiedad cambiará gradualmente al nuevo valor
• Esto sólo funciona con capas instanciadas por nosotros, no por las que crea UIView
• Para controlar las propiedades de la animación, o animar capas de vistas, deberemos utilizar animación explícita
24
layer.position=CGPointMake(100.0,100.0);
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Animación explícita de capas• Podemos definir animaciones básicas con CABasicAnimation• Indicamos la propiedad a animar como cadena KVC
• Indicamos el valor inicial y final de la propiedad
• Indicamos duración y otras propiedades de la animación
• Añadimos la animación a la capa para reproducirla
25
CABasicAnimation *theAnimation= [CABasicAnimation animationWithKeyPath:@"position.x"];
theAnimation.fromValue=[NSNumber numberWithFloat:100.0];theAnimation.toValue=[NSNumber numberWithFloat:300.0];
theAnimation.duration=5.0;theAnimation.repeatCount=2;theAnimation.autoreverses=YES;
[layer addAnimation:theAnimation forKey:@"moverCapa"];
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Transiciones• Nos permite animar la entrada y salida de capas de la pantalla
• Definimos una animación de transición
• Aplicamos la animación sobre la capa padre
• Al agregar o eliminar hijos de dicha capa padre, entrarán o saldrán de pantalla con la animación especificada
26
CATransition *transition = [CATransition animation];transition.duration = 0.5; transition.type = kCATransitionMoveIn;transition.subtype = kCATransitionFromLeft;
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Animación de vistas
• Podemos animar directamente las vistas (UIView) sin tener que bajar a CoreAnimation
• Las animaciones se definen mediante bloques, donde indicamos el valor final que queremos que tengas las propiedades• Podemos modificar propiedades de distintas vistas
27
[UIView animateWithDuration:0.5 animations:^{ vista1.frame = CGRectMake(100,100,50,50); vista2.frame = CGRectMake(200,100,50,50); }];
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
Transiciones de vistas
• Nos permite reemplazar una vista por otra mediante una animación
• Debemos especificar la vista que entra y la vista que sale
• vistaOrigen será eliminada de su supervista, y en su lugar se añadirá vistaDestino
• Podemos especificar diferente duración y tipos de animación
28
[UIView transitionFromView: vistaOrigen toView: vistaDestino duration: 0.5 options: UIViewAnimationOptionTransitionFlipFromLeft completion: nil];
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Gráficos y animación en iOS
¿Preguntas...?
29
Top Related