0
10 - ANIMACIÓN Y             QUARTZCORECurso de desarrollo de aplicaciones móviles para iPhone y iPad                 endi...
CONTENIDO• Introducción• Animaciones• QuartzCore
CONTENIDO   • Introducción• Animaciones• QuartzCore
INTRODUCCIÓN• iOSes una de ls plataformas móviles más fluidas en cuanto a animaciones y transiciones se refiere• Todas      ...
CONTENIDO• Introducción   • Animaciones• QuartzCore
ANIMACIONES• Uno de los puntos fundamentales de QuartzCore son precisamente la animación de vistas• UIKitprovee de un inte...
ANIMACIONES 2• Así   UIView permite la animación de los siguientes campos:  •   frame  •   bounds  •   center  •   tranfor...
ANIMACIONES 3• Paraanimar cambios en estos campos la clase UIView provee de varios métodos de clase• La   manera más senci...
ANIMACIONES 4• Existen métodos más complejos que permiten, por ejemplo elegir el tipo de animación    [UIView animateWithD...
ANIMACIONES 5• Podemos   definir también la animación sin el uso de bloques   [UIView beginAnimations:@"Nombre de la Animac...
ANIMACIONES 6• Podemos aplicar estas animaciones a cualquier tipo de vista y podemos combinar animaciones de manera que co...
CONTENIDO• Introducción• Animaciones   • QuartzCore
QUARTZCORE• QuartzCore   es el framework que soporta todas las animaciones• Alcontrario del resto de los frameworks posee ...
QUARTZCORE 2• Es   un framework heredado de las primeras versiones de Mac OS X• Emplea   OpenGL para realizar todas las an...
QUARTZCORE 3• Posee una gran flexibilidad por lo que permite tanto dibujar sobre la pantalla así como sobre imágenes o fiche...
QUARTZCORE 4• Para   usarlo debemos incluir el framework desde el Xcode
QUARTZCORE 5• Veamos  el código para el dibujado de este gradiente sobre una elipse:
// Obtiene el contexto en pantalla sobre el cual dibujaráCGContextRef context = UIGraphicsGetCurrentContext();// Coloca el...
QUARTZCORE 7• Como   vemos es algo complejo de manejar • Sin     embargo es un framework muy bien documentado y  con ejemp...
FIN
Upcoming SlideShare
Loading in...5
×

Ios.s10

360

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
360
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Ios.s10"

    1. 1. 10 - ANIMACIÓN Y QUARTZCORECurso de desarrollo de aplicaciones móviles para iPhone y iPad endika.gutierrez@urbegi.com alex.rayon@urbegi.com Urbegi Learning Contents
    2. 2. CONTENIDO• Introducción• Animaciones• QuartzCore
    3. 3. CONTENIDO • Introducción• Animaciones• QuartzCore
    4. 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. 5. CONTENIDO• Introducción • Animaciones• QuartzCore
    6. 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. 7. ANIMACIONES 2• Así UIView permite la animación de los siguientes campos: • frame • bounds • center • tranform • alpha • backgroundColor • contentStretch
    8. 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. 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. 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. 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. 12. CONTENIDO• Introducción• Animaciones • QuartzCore
    13. 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. 14. QUARTZCORE 2• Es un framework heredado de las primeras versiones de Mac OS X• Emplea OpenGL para realizar todas las animaciones
    15. 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. 16. QUARTZCORE 4• Para usarlo debemos incluir el framework desde el Xcode
    17. 17. QUARTZCORE 5• Veamos el código para el dibujado de este gradiente sobre una elipse:
    18. 18. // Obtiene el contexto en pantalla sobre el cual dibujaráCGContextRef context = UIGraphicsGetCurrentContext();// Coloca el contexto en la posición de dibujadoUIGraphicsPushContext(context);// Almacena los colores para el gradienteCGFloat colors[] = { 1.0, 1.0, 1.0, 1.0, 0.0, 0.5, 1.0, 0.8};// Emplearemos RGB como espacio de coloresCGColorSpaceRef baseSpace = CGColorSpaceCreateDeviceRGB();// Creamos el gradienteCGGradientRef gradient = CGGradientCreateWithColorComponents(baseSpace, colors, NULL, 2);// Liberamos el espacio de coloresCGColorSpaceRelease(baseSpace), baseSpace = NULL;CGRect rect = CGRectMake(50, 60, 100, 60);// Almacena el estado de dibujado, para preparar el dibujadoCGContextSaveGState(context);// Añade una elipse al contextoCGContextAddEllipseInRect(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 elipseCGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);// Liberamos el gradienteCGGradientRelease(gradient), gradient = NULL;// restaura el estado de dibujadoCGContextRestoreGState(context);// Dibuja el borde de la elipseCGContextAddEllipseInRect(context, rect);CGContextDrawPath(context, kCGPathStroke);// Retorna al contexto de dibujado anteriorUIGraphicsPopContext();
    19. 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. 20. FIN
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×