Tras el lanzamiento de iOS 7 (e iOS 8 también), los efectos de animación y movimiento se convirtieron en el centro del diseño de aplicaciones de Apple y desarrolladores de terceros. iOS 7 introdujo un diseño plano y minimalista en las aplicaciones, lo que inevitablemente dio lugar a que algunas aplicaciones tuvieran una interfaz de usuario similar. Para distinguir sus aplicaciones de otras aplicaciones, los desarrolladores emplearon características como animaciones y efectos de movimiento para que sus aplicaciones destaquen.

Las animaciones no solo se utilizan para diferenciar tu aplicación, sino que también pueden mejorar la experiencia general del usuario de tu aplicación. Para obtener excelentes ejemplos de cómo se utilizan las animaciones para mejorar la experiencia de usuario, debes ver cómo Apple usa las animaciones en sus aplicaciones. Por ejemplo, en la aplicación Fotos, cuando selecciona una foto de una colección, la foto se expande a partir de la seleccionada y, al cerrarla, vuelve a reducirse a la foto seleccionada. Esto se suma a la navegación de la aplicación, ya que te permite saber exactamente dónde estabas, si navegas por muchas imágenes.

El papel de Facebook también emplea animaciones bellamente para agregar a la experiencia general del usuario de la aplicación. Selecciona un artículo para leerlo volteándolo hacia arriba. Esta acción, el hecho de que el artículo se expanda desde su versión en miniatura, sugiere que al hacer lo contrario, es decir, voltear el artículo hacia abajo, lo reduciría a su miniatura. Aquí, la animación se utiliza para transmitir cómo funciona la aplicación e incluso un usuario por primera vez de la aplicación pronto podría hacer suposiciones sobre su uso y descubrir su navegación sin necesidad de un tutorial.

Las animaciones no solo se suman a la experiencia del usuario de la aplicación, sino que podrían ser lo que deleita e impresiona a sus usuarios, garantizando el uso repetido en lugar de desinstalar la aplicación para una mejor desde la tienda de aplicaciones.

Hay numerosas formas de incluir animaciones en sus aplicaciones, algunas de ellas mediante el uso de dinámicas de UIKit, animaciones de capas, transiciones de controladores de vista o mediante el uso de una biblioteca de terceros como la biblioteca Pop de Facebook o el marco JNWSpringAnimation.

En este tutorial vamos a ver animaciones de vista simples. Puede descargar el proyecto de inicio, que es una aplicación de vista única con una vista de tabla que enumera los ejemplos presentados en el tutorial tutorial. Usaré esto cuando lleguemos a la parte de ejemplos del tutorial, en lugar de comenzar desde cero.

El tutorial comienza con un resumen de las API utilizadas para animar vistas y termina con algunos ejemplos que muestran el uso de algunas de las API en una aplicación.

Animaciones de vista básicas

Crear animaciones en tus vistas es cuestión de cambiar las propiedades de ellas y dejar que UIKit las anime automáticamente. Las propiedades que cambiamos son las marcadas Animables.

La siguiente lista muestra las propiedades animables.

  • centro
  • alpha
  • marco
  • límites
  • transformar
  • fondo
  • contentStretch

Usted encontrará que todas las animaciones implican un cambio de una o más de las propiedades antes mencionadas.

Para animaciones de vistas simples, UIKit proporciona las siguientes API que se pueden usar para animar vistas en la pantalla.

El primero toma dos parámetros: un valor para la duración en segundos de la animación y un cierre donde se especifican las propiedades que desea cambiar. UIKit tomará el estado original de la vista y creará una transición suave de ese estado al estado final de acuerdo con lo que especificó en el cierre de animaciones.

Las otras dos API son similares a la primera, pero toman parámetros adicionales que agregan más configuración a la animación. La segunda toma un cierre de finalización que puede usar para especificar otra animación que desee que se haga después de la primera o puede hacer una limpieza de la interfaz de usuario, por ejemplo, eliminar una vista de la jerarquía de vistas una vez que se anima otra vista en la escena.

La tercera API toma dos parámetros adicionales: el retardo, que es el tiempo de espera antes de que comience la animación y las opciones, una constante UIViewAnimationOptions, que indica cómo desea realizar las animaciones. A continuación se muestran las opciones disponibles.

Animaciones de primavera

Las animaciones de primavera intentan modelar el comportamiento de un resorte de la vida real, en el sentido de que, cuando una vista se mueve de un punto a otro, rebotará/oscilará hacia el final antes de establecerse en posición.

A continuación se muestra el bloque de métodos que usamos para animaciones de primavera.

  • UIView.animateWithDuration ( _ :, delay:, usingSpringWithDamping:, initialSpringVelocity:, opciones:, animaciones:, finalización:)

Lo anterior es similar a los métodos que vimos anteriormente, excepto por dos nuevos parámetros: usingSpringWithDamping y initialSpringVelocity. La amortiguación es un valor de 0 a 1 que determina cuánto rebota la vista hacia el final de la animación. Cuanto más cerca de 1 esté el valor, menos hinchable será. La velocidad de arranque inicial, como su nombre indica, determina la velocidad inicial de la animación. Esto determina la intensidad con la que comienza la animación. Si desea que comience vigorosamente, establezca un valor más grande, si desea una animación suave, puede establecer el valor en 0.

Animaciones de fotogramas clave

Las animaciones de fotogramas clave le permiten configurar diferentes etapas de una animación. Puede agrupar diferentes animaciones que comparten algunas propiedades comunes, pero aún así puede controlarlas por separado.

En lugar de una animación que solo se mueve a lo largo de un camino, UIKit ejecutará las diferentes etapas de la animación.

Las API de animación de fotogramas clave son las siguientes.

Los dos métodos anteriores se usan juntos, el segundo se anida en el cierre de animaciones del primero.

El primer método establece la configuración general de la animación, como el tiempo que tarda, el retardo y sus opciones. A continuación, defina uno o más del segundo método(los fotogramas) dentro del cierre de animaciones para establecer las diferentes etapas de la animación.

La hora de inicio relativa y la duración relativa de cada fotograma es un valor entre 0 y 1 que expresa el porcentaje de tiempo dentro de la duración total de la animación.

Transiciones de vista

Las transiciones de vista se utilizan cuando desea agregar una nueva vista a su jerarquía de vistas o eliminar una vista de la jerarquía de vistas.

Las API que se utilizan para crear transiciones de vista son

Se utiliza la primera para introducir una vista en la jerarquía de vistas. El método toma parámetros similares a los que hemos visto en los otros métodos de animación.

El segundo se usa para tomar una vista de la jerarquía de vistas y colocar una nueva vista en su lugar.

Ejemplos

Ahora veremos algunos ejemplos que utilizan algunas de las llamadas a la API anteriores para animar vistas en el proyecto inicial dado.

Ejemplo I

Si ejecuta el proyecto, verá una vista de tabla que enumera los ejemplos que trabajaremos. Seleccione el ejemplo I en la lista y verá una pantalla de inicio de sesión de una aplicación con los campos de nombre de usuario y contraseña y el botón de inicio de sesión.

Queremos que estos se animen en la pantalla cuando se inicie la aplicación.

Para comenzar, ocultaremos las vistas de la vista cuando aparezca por primera vez. Antes del diseño automático, esto habría sido una simple cuestión de cambiar la posición de la vista específica en el código, pero como establecemos restricciones de diseño automático en las vistas en el archivo de guion gráfico, tendremos que cambiar las restricciones en el código, lo que cambiará la posición de la vista.

Primero, necesitamos obtener una referencia de las restricciones que cambiaremos. Abra el archivo del guion gráfico. Localice las siguientes restricciones en la escena de Ejemplo I.

Abra el Editor Asistente y asegúrese de que es el controlador ExampleIViewController.swift que aparece junto al guion gráfico en la pantalla dividida. Arrastre desde la restricción Center X Alignment-View-Username a la clase ExampleIViewController. Cree un outlet llamado centerAlignUsername. Haga lo mismo con Center X Alignment – View – Password y establezca su nombre en centerAlignPassword. También cree una salida para el botón de inicio de sesión llamado Botón de inicio de sesión y una acción para el mismo botón y asígnele el nombre de inicio de sesión. Asegúrese de establecer el tipo de acción en UIButton. Debe tener lo siguiente en código.

1
2
3
4
5
6
7

@IBOutlet débil var centerAlignUsername: NSLayoutConstraint!
@IBOutlet débil var centerAlignPassword: NSLayoutConstraint!
@IBOutlet LoginButton de var débil: UIButton!
@IBAction func de inicio de sesión(sender: UIButton) {
}

En el ExampleIViewController.swift agrega el siguiente método al que se llama antes de que la vista se presente en la pantalla.

Esto quita los campos de nombre de usuario y contraseña a la vista y establece el valor alfa del botón en 0, lo que lo hace invisible.

Agregue el siguiente método al que se llama directamente cuando aparece la vista.

Aquí usamos UIView.Método animateWithDuration () que vimos anteriormente. Incluimos las opciones de Uiviewanimation.Opción CurveEaseOut que hace que la animación se inicie rápido y luego se ralentice al final. Puede experimentar con diferentes opciones aquí. Haga clic en UIViewAnimationOptions para ver todas las opciones disponibles.

La animación dura 0,5 segundos y comienza inmediatamente. Tiene libertad durante la duración, pero no debe establecer un número tan grande como para molestar a sus usuarios cuando las animaciones en su aplicación parezcan demorar demasiado. Normalmente, la duración se establece entre 0,5 y 0,7 segundos, pero como he dicho, esto no está grabado en piedra y tienes libertad para ajustarlo a lo que te parezca correcto.

La animación hace exactamente lo contrario de lo que hicimos en viewWillAppear(). layoutIfNeeded() se usa para diseñar las vistas inmediatamente que se cambian. Si no lo incluye, no los verá animados en la pantalla, sino que solo se mostrarán en su posición final. Ejecute la aplicación, y debería ver lo siguiente.

Lo anterior parece más interesante que una presentación estática, pero las vistas que se animan al mismo tiempo, no crean un gran efecto. Modifique el método como se muestra a continuación.

Ejecute la aplicación y la animación resultante tendrá las vistas animándose en la pantalla en diferentes momentos. Mirando el código, puedes ver que después del primer bloque de animación, establecemos un retardo en los siguientes.

En las pantallas de inicio de sesión, cuando el inicio de sesión falla, generalmente hay una animación que indica al usuario que el inicio de sesión ha fallado. Esto a veces se hace como un movimiento de los campos de texto o el botón de inicio de sesión, y un mensaje que le permite al usuario saber que el inicio de sesión ha fallado. Agregaremos tal efecto en el botón de inicio de sesión usando resortes. Modifique la función login() como se muestra.

Lo anterior cambia el tamaño del botón de inicio de sesión cuando se presiona y anima la acción con una animación de resorte que hará que el ancho del botón se expanda y rebote un poco al final antes de asentarse.

Juega con el valor de amortiguación. Si lo establece en 1, el botón se expandirá, sin rebotes al final. También puede utilizar el mismo método en los campos nombre de usuario y contraseña. En lugar de tenerlos en la pantalla y simplemente detenerse en su lugar al final, haz que sean como primavera y reboten un poco antes de asentarse.

Ejemplo II

En la aplicación, es posible que deba reemplazar la imagen de fondo de una vista automáticamente cuando se realice alguna acción. Puede hacerlo de una manera en la que una imagen reemplace inmediatamente a otra en la vista, o puede atenuarla lentamente para crear una transición agradable. Crearemos este efecto aquí. Abra ExampleIIViewController.swift y añádase lo siguiente.

Aquí creamos una vista de imagen y la agregamos a la vista principal. Luego llamamos a imageFadeIn (), que crea una segunda vista con una imagen diferente. Añadimos esta vista por encima de la primera vista de imagen y establecemos su alfa en 0. En el bloque de animación, animamos su valor alfa, haciéndolo visible. A continuación, utilizamos un cierre de finalización para establecer la imagen de la vista de imagen en la segunda imagen y eliminamos la segunda vista de imagen de la jerarquía de vistas, ya que ya no es necesaria. He añadido un largo retardo para que la animación no suceda justo en el momento en que seleccionamos el ejemplo II de la vista de tabla. La duración también es un poco larga para que podamos ver lo que está pasando en la demo.

El siguiente es el efecto.

Ejemplo III

A continuación veremos las animaciones de fotogramas clave. Abra ExampleIIIViewController.swift y agregue la siguiente variable y funciones al archivo. He comentado el código para explicar cada paso.

En viewDidLoad() llama a la función CreateView (). Agregue lo siguiente a la parte inferior de viewDidLoad ().

1
CreateView()

Al ejecutar la aplicación y seleccionar el Ejemplo III de la vista de tabla, debería ver una vista roja con una vista de imagen en la parte superior y un botón en el medio.

Queremos que la vista (a la que me referiré como alertView de ahora en adelante) se reduzca de tamaño y caiga hacia abajo fuera de la vista.

Cuando creamos el botón, le agregamos un oyente. Cuando se toca el botón, se llama a dismissAlert (). Modifique la función como se muestra.

En el código anterior, creamos marcos que representan lo que queremos para las dos etapas de animación de la vista. El fotograma pequeño se reduce a la mitad del tamaño de alertView, manteniendo el punto central y el fotograma final tiene una posición en la parte inferior de la pantalla, fuera de la vista.

Utilizamos una animación de fotogramas clave con dos fotogramas clave. El primero establece el marco de alertView en smallFrame y el segundo en finalFrame. El resultado será que alertView se reducirá a la mitad de su tamaño y luego se perderá de vista. Observe que he puesto un número tan grande para la duración: 4 segundos. Puedes cambiar esto, solo quería que la animación se ejecutara en cámara lenta para la demo. Ejecute la aplicación y seleccione Ejemplo III.

La animación no es lo que esperábamos. Puede ver la animación alertView roja como se esperaba, pero la escala de sus hijos no cambia. Cambiar el marco del padre, no cambia automáticamente los marcos de sus hijos.

Usaremos una función introducida en iOS 7 llamada instantáneas UIView para corregir la animación. Esto le permite tomar una instantánea de una UIView junto con su jerarquía y renderizarla en una nueva UIView.

En dismissAlert() agregue lo siguiente justo antes del código de animación de fotogramas clave.

1
2
3
4

vamos instantánea = alertView.Snapshotviewafterscreen actualiza (falso)
instantánea.frame = alertView.vista de marco
.addSubview (instantánea)
alertView.Quitar de la vista superior()

Aquí, creamos una vista instantánea y la agregamos a la vista principal. A continuación, eliminamos la alertView de la vista, ya que la instantánea la reemplazará.

Reemplace la animación de fotogramas clave con lo siguiente.

Ejecute la aplicación y, al pulsar Descartar, la vista (instantánea, en realidad) debería animarse como se esperaba.

Ejemplo IV

Hemos visto cómo puede animar vistas simples. En este ejemplo veremos cómo puede animar una vista de tabla.

Si selecciona el ejemplo IV de la vista de tabla, encontrará otra vista de tabla con una lista de elementos en ella. Cuando se presenta la vista de tabla, los elementos de la lista ya se colocan en la tabla. Queremos animarlos en la vista para crear un efecto más interesante.

Abra ExampleIVViewController.swift y agregue los siguientes métodos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

reemplazar func viewWillAppear(animado: Bool) {
animateTable()
}
func animateTable() {
formato tableview.reloadData()
let cells = Vista de tabla.visibleCells ()
let tableHeight: CGFloat = tableView.obligado.Tamaño.altura
para i en celdas {
let cell: UITableViewCell = i como celda UITableViewCell
.transform = CGAffineTransformMakeTranslation(0, altura de la tabla)
}
índice var= 0
para a en celdas {
let cell: UITableViewCell = a como UITableViewCell
UIView.animateWithDuration(1.5, delay: 0.05 * Double(índice), usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: nil, animaciones: {
cell.transformar = CGAffineTransformMakeTranslation(0, 0);
}, finalización: nil)
índice += 1
}
}

Aquí, cuando la vista aparece, la animateTable() se llama a la función. Recargamos los datos de la vista de tabla y recorremos las celdas que actualmente están visibles en la pantalla y movemos cada una de ellas a la parte inferior de la pantalla. Luego repasamos todas las celdas que movimos a la parte inferior de la pantalla y las animamos a su posición con una animación de resorte.

Ejecute la aplicación y debería ver lo siguiente.

Conclusión

Hemos analizado varias API que puedes usar para agregar animaciones a las vistas de tu aplicación. Esta no es una guía exhaustiva sobre animación en iOS, pero mediante el uso de las sencillas API que hemos analizado, puede crear varias animaciones en sus aplicaciones. Para profundizar en las animaciones de iOS, puedes ver dinámicas de Uikits, animaciones de capas, transiciones de controladores de vista e incluso efectos de movimiento. También puedes mirar bibliotecas de terceros como Facebook Pop y JNWSpringAnimation framework, que podrían ayudarte a crear animaciones intrincadas con mayor facilidad.

Puede descargar el proyecto completo aquí.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.