El nuevo sistema operativo para el Apple Watch, watchOS 2, fue introducido hace un par de semanas en WWDC 2015. Trae muchas mejoras, principalmente para desarrolladores que buscan crear una aplicación para el Apple Watch. Éstas son las cosas que considero las más importantes para los desarrolladores:
Las aplicaciones WatchKit están ahora ejecutándose nativamente en el reloj. Ésto trae la muy necesaria mejora en velocidad, resultando en una mejor experiencia del usuario.
El nuevo frameworkWatch Connectivity permite toda clase de comunicación y compartición de datos entre la aplicación padre iOS y la aplicación watchOS.
Las aplicaciones watchOS 2 tienen acceso a datos del hardware, tales como datos del sensor de movimiento, grabación de audio, y aún pueden accesar a los datos de la frecuencia cardiaca.
watchOS 2 también introdujo animaciones. En watchOS 1, la única opción para ejecutar una animación era generar una serie de imágenes y luego iterar a través de ellas. watch OS2 trae animaciones verdaderas al Apple Watch. Puedes animar la interfaz de usuario al cambiar las propiedades del layout o maquetado dentro de un bloque de animación. Aquí es donde entra en escena éste tutorial.
1. ¿Por qué deben importarnos las animaciones?
Antes de entrar en materia, me gustaría pasar un minuto hablando sobre el propósito de las animaciones en las aplicaciones Apple Watch.
La razón obvia es que hacen más disfrutable la interfaz de usuario si se usan adecuadamente. Y cuando se trata de Apple Watch, se enfatiza la condición si. Ya que la mayoría de las interacciones de aplicaciones solo duran unos cuantos segundos, realmente no quisieras exagerar las animaciones.
La segunda, y creo la razón más importante, es que permiten jerarquías de navegación personalizadas dentro de las aplicaciones Apple Watch. Supongamos que necesitas presentar una pantalla que el usuario solo puede abandonar al realizar una acción específica. Normalmente, las aplicaciones Apple Watch siempre tienen un botón para cancelar en la esquina superior izquierda cuando se presenta un controlador de interfaz modal. Con las animaciones y una inteligente manipulación del maquetado, pudieras crear tu propia rutina "presentar controlador de vista" que muestre el contenido de la aplicación a pantalla completa, desechándola por esa acción específica. Esa es una de las cosas que aprenderás en éste tutorial.
2. Requisitos Previos
Antes de entrar de lleno en éste tutorial, deberías tener un conocimiento básico de cómo funciona el sistema de maquetado en Watchkit. Aún si eres un desarrollador en iOS experimentado, el maquetado basado en grupo en Watchkit es muy diferente de lo que estás acostumbrado en iOS. Necesitas pensar en el maquetado de una forma muy diferente. Pero una vez que te acostumbres a él, podrás crear la mayoría de los maquetados sin mucho esfuerzo.
Si eres nuevo en maquetar para Watchkit, hay un magnífico tutorial en Tuts+ escrito por mi amigo Patrick Balestra, Entendiendo el sistema de Maquetado de Wathckit. Usando una aplicación de ejemplo, explica todo lo que necesitas saber para aprender a trabajar rápidamente.
El principio de animaciones en watchOS 2 es sencillo, estableces una o más de las propiedades animables dentro de un bloque de animación. El siguiente ejemplo ilustra cómo funciona ésto.
Éste método causa que se alinee circleGroup a la derecha, con una animación con una duración de 0.5 segundos. Como puedes ver, estamos llamando a animateWithDuration:animations: en self, que es una instancia de WKInterfaceController. Ésto es diferente de iOS donde los métodos de animación son métodos de clase en UIView.
La lista de abajo muestra que propiedades son animables:
opacidad
alineación
anchura y altura
color de fondo
color y matiz de color
Ten en cuenta que aún no es posible en watchOS 2 crear elementos de interface de usuario en un entorno de ejecución. Pero ya que puedes ocultar o establecer su alpha en 0 en el storyboard, ésto no debería ser un gran problema.
Eso es todo. Armado con tu conocimiento sobre el sistema de maquetado de Watchkit, ahora estás preparado para comenzar a trabajar con animaciones nativas en watchOS. Comencemos por crear una aplicacion muestra para que pueda enseñarte un par de ejemplos de cómo todo ésto encaja perfectamente.
4. Animaciones Básicas
Vamos a crear una simple aplicación watchOS 2 en la que introduciremos un par de éstos conceptos de animación. No es ni mucho menos un intento de proporcionar una visión general de todas las cosas que son posibles. Más bien, muestra la idea básica, la cual espero te permita generar soluciones a lo que necesites.
Paso 1: Crear el Proyecto
En el momento de escribir éste artículo, Xcode 7 está aún en fase beta. Para crear una aplicación watchOS 2, necesitas usar Xcode 7 pues es lo que yo voy a utilizar.
Lanza Xcode y selecciona File > New > Project...
Elige iOS Application con la plantilla Single View Application y da click en Next.
Cuando se te pida por nombre del producto Product Name, ingresa WatchAnimations. Puedes desmarcar Include Unit Tests e Include UI Tests pues no los necesitaremos para éste tutorial.
Da click en Next, elige una ubicación para guardar el proyecto, y da click en Create.
Paso 2: Agrega WatchKit Target
En Xcode, selecciona File > New > Target...
De la lista de plantillas, elige WatchKit App de la sección watchOS > Application y da click en Next para continuar.
Para Product name, puedes elegir lo que gustes. He nombrado la mía WatchApp.
Desmarca Include Notification Scene, porque no la necesitaremos. Cuando des click en Finish, tu WatchKit target será creado.
Cuando se te pregunte si activar el esquema WatchApp, da click en Activate. Solo nota que puedes cambiar el esquema en cualquier momento en la parte superior izquierda de tu ventana de Xcode.
Paso 3: Crea la Interfaz de Usuario
Abre Interface.storyboard en el grupo WatchApp como se muestra abajo.
Agrega un grupo a la interfaz arrastrándolo desde Object Library a la derecha. En el Attributes Inspector a la derecha, cambia su maquetado a Vertical y establece su altura en Relative to Container.
Agrega un segundo grupo al grupo que acabas de añadir. En el Attributes Inspector, establece su posición vertical en Bottom.
Agrega cuatro botones al segundo grupo. Para cada botón, establece el Size a Relative to Container con un valor de 0.25. Establece los títulos de los botones a ←, →, ↑ y ↓. Después de éste paso, la interfaz de usuario se debería ver así:
Para finalizar la primera parte de la interfaz de usuario, agrega un grupo más al grupo principal y configúralo como sigue:
Para tenerlo más claro, establece su nombre en Circle cambiando su nombre en el Document Outline a la izquierda.
Establece su color en rojo.
Establece su radio en 20 puntos.
Establece su tamaño, anchura y altura en 40 puntos.
La siguiente captura de pantalla muestra cómo el círculo debe ser configurado.
Paso 4: Agregar Animaciones
En el Project navigator, expande el grupo WatchApp Extension y selecciona InterfaceController.m. Remplaza la implementación de la clase InterfaceController con lo siguiente:
Éstas acciones moverán el círculo rojo en una dirección específica. Y como puedes ver, logramos eso al ajustar su alineación vertical y/o horizontal dentro de un bloque de animación.
Paso 5: Conectar los Outlets
Abre Interface.storyboard y conecta los outlets como se muestra abajo.
Eso debería hacerlo. Ejecuta el proyecto, y si has seguido los pasos, deberías poder mover el círculo rojo alrededor de la pantalla usando los botones de flechas.
5. Animaciones Más Complejas
En la segunda parte de éste tutorial, crearemos una animación para empujar. Ya que la mayoría de los pasos necesarios son similares, iré un poco más rápido ésta vez.
Paso 1: Crear la Animación
Abre InterfaceController.m y crea un nuevo outlet, firstScreenGroup, de tipo WKIterfaceGroup en la extensión de clase de la clase InterfaceController.
En pushButtonPressed, achicamos el primer grupo de la pantalla (lo crearemos en el próximo paso) y en popButtonPressed expandimos de nuevo ese grupo. También vamos a animar el alpha del primer grupo de la pantalla para hacer la animación un poco más atractiva.
Paso 2: Extender la Interfaz de Usuario
Abre Interface.storyboard y agrega un nuevo grupo a la interfaz de usuario. Pon el grupo que ya estaba ahí, el que contiene Circle y el grupo con los botones, dentro del nuevo grupo. Establece su Layout en Horizontal y renombre el grupo contenido a First screen. Ésto será útil posteriormente. El resultado debería verse así:
Después, agrega un segundo grupo que estará en el mismo nivel que el grupo First screen. Establece su Layout en Vertical. Agrega una imagen y un botón al grupo. Puedes agregar literalmente cualquier imagen, solo asegúrate de poner algo ahí porque de otra manera la animación se vería un poco simple. Establece el título del botón en "< Pop". Conecta el botón a la acción popButtonPressed que creamos previamente. La interfaz de usuario ahora debería verse así:
Añade un botón al grupo First screen. Establece su título en "Push >" y su posición vertical en Bottom. Conecta el botón a la acción pushButtonPressed. La interfaz de usuario ahora debería verse así:
Necesitamos hacer una cosa más, conectar el outlet firstScreenGroup al grupo que llamamos First screen.
Paso 3: Compilar y Ejecutar
Cuando ejecutas y compilas la aplicación, deberías poder presentar la segunda pantalla al presionar el botón con el título "Push >" en la parte inferior. Puedes desestimar la segunda pantalla al presionar el botón con el título "< Pop". Debería verse así:
Conclusión
En éste tutorial, hemos dado un vistazo a las animaciones nativas en watchOS 2. Espero haberte dado una idea de lo que puedes lograr con animaciones en watchOS. Si tienes alguna pregunta, puedes publicar un comentario abajo o pueden contactarme en Twitter.
¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!
Indie iOS developer by profession and by heart. I enjoy creating simple to use apps that are reliable and delightful. Apart from development, I do cycling and blogging.
