Share
El nuevo sistema operativo para Apple Watch., watchOS 2, fue presentado hace un par de semanas en WWDC 2015. Trae muchas mejoras, principalmente para los desarrolladores que buscan crear una aplicación Apple Watch. Estas son las cosas que me parecen más importantes para los desarrolladores:
Antes de llegar a las tuercas y tornillos, me gustaría dedicar un minuto a hablar sobre el propósito de las animaciones en las aplicaciones de Apple Watch..
La razón obvia es que hacen que la interfaz de usuario sea más agradable si se usa adecuadamente. Y cuando se trata de Apple Watch, eso es un gran Si. Debido a que la mayoría de las interacciones de aplicaciones solo duran unos segundos, realmente no quieres exagerar con las animaciones.
La segunda razón, y creo que es más importante, es que permiten jerarquías de navegación personalizadas dentro de las aplicaciones de Apple Watch. Supongamos que necesita presentar una pantalla que el usuario solo puede abandonar realizando una acción específica. Normalmente, las aplicaciones de Apple Watch siempre tienen un botón de cancelación en la esquina superior izquierda cuando se presenta un controlador de interfaz modal. Con las animaciones y la manipulación inteligente del diseño, puede crear su propia rutina de "controlador de vista actual" que muestra el contenido de su aplicación en pantalla completa, descartándola por esa acción específica. Esa es una de las cosas que aprenderás en este tutorial..
Antes de profundizar en este tutorial, debe tener un conocimiento básico de cómo funciona el sistema de diseño en WatchKit. Incluso si eres un desarrollador de iOS con experiencia, el diseño basado en grupos en WatchKit es muy diferente al que estás acostumbrado en iOS. Tienes que pensar en el diseño de una manera muy diferente. Pero una vez que se haya acostumbrado a él, podrá crear la mayoría de los diseños sin mucho esfuerzo..
Si eres nuevo en el diseño de WatchKit, hay un excelente tutorial sobre Tuts + de mi amigo Patrick Balestra, Entendiendo el sistema de diseño de WatchKit. Usando una aplicación de ejemplo, explica todo lo que necesita saber para ponerse al día..
Además, hay muchas sesiones de la WWDC que tratan este tema. La sesión que recomiendo más y que cubre las animaciones de WatchKit es esta titulada Técnicas de diseño y animación para WatchKit..
El principio de animaciones en watchOS 2 es simple: establece una o más de las propiedades animables dentro de un bloque de animación. El siguiente ejemplo ilustra cómo funciona esto.
[self animateWithDuration: 0.5 animations: ^ [self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentRight]; ];
Este método hace que el grupo de círculo para ser alineado a la derecha, con una animación con una duración de 0.5 segundos. Como puedes ver, estamos llamando animateWithDuration: animaciones: en yo, que es una instancia de WKInterfaceController. Esto es diferente de iOS, donde los métodos de animación son métodos de clase en Vista.
La siguiente lista muestra qué propiedades son animables:
Tenga en cuenta que todavía no es posible en watchOS 2 crear elementos de interfaz de usuario en tiempo de ejecución. Pero como puedes ocultarlos o establecer su alfa en 0 en el guión gráfico, esto no debería ser un problema tan grande..
Eso es. Con su conocimiento sobre el sistema de diseño WatchKit, ahora está listo para comenzar a trabajar con animaciones nativas en watchOS. Comencemos creando una aplicación de ejemplo para que pueda mostrarles un par de ejemplos de cómo encaja todo esto..
Vamos a crear una aplicación simple watchOS 2 que presentará un par de estos conceptos de animación. De ninguna manera se trata de proporcionar una visión general completa de todas las cosas que son posibles. En su lugar, muestra la idea básica, que le permitirá encontrar soluciones a sus necesidades..
En el momento de escribir este artículo, Xcode 7 todavía está en beta. Para crear una aplicación watchOS 2, necesitas usar Xcode 7, así que eso es lo que voy a usar.
Abierto Interface.storyboard en el WatchApp grupo como se muestra a continuación.
Agregue un grupo a la interfaz arrastrándolo desde el Biblioteca de objetos a la derecha. En el Inspector de atributos a la derecha, cambiar su diseño a Vertical y establece su altura a Relativo al contenedor.
Agregue un segundo grupo al grupo que acabamos de agregar. En el Inspector de atributos, establecer su posición vertical a Fondo.
Agrega cuatro botones al segundo grupo. Para cada botón, establecer tamaño a Relativo al contenedor con un valor de 0.25. Establezca los títulos de los botones en ←, →, ↑ y ↓. Después de este paso, la interfaz de usuario debería verse así:
Para finalizar la primera parte de la interfaz de usuario, agregue un grupo más al grupo principal y configúrelo de la siguiente manera:
La siguiente captura de pantalla muestra cómo se debe configurar el círculo..
En el Navegador de proyectos, ampliar la Extensión WatchApp agrupar y seleccionar InterfaceController.m. Reemplazar la implementación de la Controlador de interfaz clase con lo siguiente:
#importar "InterfaceController.h" @interface InterfaceController () @property (no atómico, débil) IBOutlet WKInterfaceGroup * circleGroup; @end @implementation InterfaceController // Botones de dirección del círculo - (IBAction) leftButtonPressed [self animateWithDuration: 0.5 animations: ^ [self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentLeft]; ]; - (IBAction) rightButtonPressed [self animateWithDuration: 0.5 animations: ^ [self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentRight]; ]; - (IBAction) upButtonPressed [self animateWithDuration: 0.5 animations: ^ [self.circleGroup setVerticalAlignment: WKInterfaceObjectVerticalAlignmentTop]; ]; - (IBAction) downButtonPressed [self animateWithDuration: 0.5 animations: ^ [self.circleGroup setVerticalAlignment: WKInterfaceObjectVerticalAlignmentBottom]; ]; @final
Estas acciones moverán el círculo rojo en una dirección específica. Y como puede ver, lo logramos al configurar su alineación vertical y / o horizontal dentro de un bloque de animación.
Abierto Interface.storyboard y conecte las salidas como se muestra a continuación.
Deberias hacer eso. Ejecute el proyecto y, si ha seguido los pasos anteriores, debería poder mover el círculo rojo alrededor de la pantalla con los botones de flecha.
En la segunda parte de este tutorial, crearemos una animación de inserción. Como la mayoría de los pasos involucrados son similares, esta vez me moveré un poco más rápido.
Abierto InterfaceController.m y crear una nueva salida, FirstScreenGroup, de tipo WKInterfaceGroup en la extensión de clase de la Controlador de interfaz clase.
@interface InterfaceController () @property (no atómico, débil) IBOutlet WKInterfaceGroup * circleGroup; @ propiedad (no atómica, débil) IBOutlet WKInterfaceGroup * firstScreenGroup; @fin
A continuación, implementa las siguientes acciones en el Controlador de interfaz clase.
- (IBAction) pushButtonPressed [self animateWithDuration: 0.1 animations: ^ [self.firstScreenGroup setAlpha: 0]; ]; [self animateWithDuration: 0.3 animations: ^ [self.firstScreenGroup setWidth: 0]; ]; - (IBAction) popButtonPressed [self animateWithDuration: 0.3 animations: ^ [self.firstScreenGroup setRelativeWidth: 1 withAdjustment: 0]; ]; dispatch_after (dispatch_time (DISPATCH_TIME_NOW, (int64_t) (0.2 * NSEC_PER_SEC)), dispatch_get_main_queue (), ^ [self animateWithDuration: 0.1 animations: ^ [self.firstScreenGroup setAlpha: 1];];;
En pushButtonPressed, reducimos el primer grupo de pantallas (lo crearemos en el siguiente paso) y en popButtonPressed expandimos ese grupo de nuevo. También estamos animando el alfa del primer grupo de pantallas para que la animación sea un poco más atractiva..
Abierto Interface.storyboard y agregar un nuevo grupo a la interfaz de usuario. Pon el grupo que ya estaba allí, el que contiene. Circulo y el grupo con botones, dentro de ese nuevo grupo. Establecer su Diseño a Horizontal y renombrar el grupo contenido a Primera pantalla. Esto será útil más tarde. El resultado debería verse así:
A continuación, agregue un segundo grupo que estará en el mismo nivel que el Primera pantalla grupo. Establecer su Diseño a Vertical. Añade una imagen y un botón al grupo. Puedes agregar literalmente cualquier imagen, solo asegúrate de poner algo allí porque de lo contrario la animación se vería algo seca. Ponga el título del botón en "< Pop". Connect the button to the popButtonPressed acción que creamos anteriormente. La interfaz de usuario ahora debería verse así:
Añadir un botón a la Primera pantalla grupo. Establezca su título en "Push>" y su posición vertical en Fondo. Conecte el botón a la pushButtonPressed acción. La interfaz de usuario ahora debería verse así:
Hay una cosa que tenemos que hacer, conectando el FirstScreenGroup salida al grupo que nombramos Primera pantalla.
Al crear y ejecutar la aplicación, debería poder presentar la segunda pantalla tocando el botón con el título "Empujar>" en la parte inferior. Puedes descartar la segunda pantalla pulsando el botón con el título "< Pop". It should look like this:
En este tutorial, hemos echado un vistazo a las animaciones nativas en watchOS 2. Espero que te haya dado una idea de lo que puedes lograr con las animaciones en watchOS. Si tiene alguna pregunta, puede publicar un comentario a continuación o puede contactarme en Twitter.
Accentsconagua