MotionLayout: CustomAttribute, KeyFrameSet y KeyPosition #AndroidMeetsKotlin

Una vez has visto qué es MotionLayout y qué puedes hacer con él, seguirás avanzando en la personalización de las animaciones. Para ello, vas a ver la última interacción de usuario que puede comenzar una animación de este tipo y terminarás conociendo tres elementos que otorgan un toque de UX (Experiencia de Usuario) que puede destacar tu app sobre el resto. Sin más, ¡a por ello!

Elemento OnClick

En el post anterior ya viste el elemento OnSwipe (dentro de Transition), en este caso, vas a ver la interacción más común e intuitiva de una vista, el click. Este elemento sólo tiene dos atributos posibles:

• target. Indica la vista que se tomará para capturar el evento de pulsado.
• mode. Indica qué hará la animación una vez se ha producido el evento. Tiene los siguientes valores: “transitionToEnd”, “toggle”, “transitionToStart”, “jumpToEnd”, “jumpToStart”. En el caso de “toggle” lo que hará será pasar a la animación de fin si se está en el estado de inicio y viceversa. Para los dos últimos, se pasará directamente a las constraints que indiquen cada uno pero sin realizar animación alguna.

La animación que harás durante el post será lanzada por un evento de pulsado en vez del desplazamiento. En cuanto al código, seguimos sin ver ni una línea en Java o Kotlin, sólo harás uso de código XML.

KeyFrameSet

Otro de los elementos que nos aporta Transition es “KeyFrameSet”, éste es capaz de añadir puntos intermedios que modifican el path (ruta) de la animación que se establece entre dos ConstraintSets. Éste tiene además los siguientes componentes:

KeyPosition.

Controla la posición del layout durante la animación. Sus atributos son:

• target. Id de la vista.
• framePosition. Define el punto a lo largo de la interpolación 0 = inicio, 100 = final.
• transitionEasing. Establece una curva de suavizado que se usará al llegar a este punto (por ejemplo, curve(1.0, 0, 0 ,1.0))
• type. Indica cómo se calculará la desviación para el trayecto lineal. Dos valores: “deltaRelative” y “pathRelative”.
• percentX. (float) Distancia porcentual del principio al fin a lo largo del eje X (deltaRelative) o a lo largo de la ruta (path) de la animación (pathRelative).
• percentY. (float) Lo mismo que el anterior pero con el eje Y.
• curveFit. La ruta de la animación será trazada.
• drawPath. Dibuja la ruta de los objetos.
• sizePercent. Si la vista cambia de tamaño, este atributo controla cómo crece el tamaño. (para objetos de tamaño fijo usa KeyAttributes scaleX / Y)
• curveFit. Selecciona una ruta basada en líneas rectas o una curva. Dos valores: “linear” ó “spline”.

KeyAttribute.

Puede cambiar los valores de un atributo del layout mientras es animado. Además de tener los atributos ya definidos (“target”, “framePosition”, “curveFit”, “transitionEasing” y “drawPath”), nos encontramos con los siguientes:

• transitionPathRotate. (float) Indica la rotación del objeto durante la animación.
• progress. Llama al método “setProgress(float)” para esta vista.
• <CustomAttribute>. Llamará al método “setNombreDelAtributo” mediante reflexión.

Tiene además todos los atributos definidos en: https://developer.android.com/reference/android/support/constraint/motion/MotionLayout

CustomAttribute

Es similar a usar el método “setMyAttr(tipo)”. Para este elemento tenemos:

• attributeName. Nombre del atributo, es importante saber que es sensible a mayúsculas y minúsculas.
• customColorValue.
• customIntegerValue.
• customFloatValue.
• customStringValue.
• customDimension.
• customBoolean.

Una vez tienes definidos todos los componentes y atributos, vas a realizar una animación haciendo uso de ellos. ¡a por ella!

Definición del nuevo MotionScene

Usarás las vistas definidas en el post anterior y sólo cambiarás la animación mediante su nuevo MotionScene. La animación que vas a realizar la puedes ver en el siguiente gif.

Define el comienzo de la animación mediante un OnClick

Simplemente tienes que usar el elemento “OnClick” y especificarle el target al que se le aplicará y el modo. En este caso será de tipo “toggle”.

Cambia el path de las vistas con KeyFrameSet y KeyPosition

Para la vista C, tienes que definir dos KeyPosition, los cuales harán:

• En el momento 20 (recuerda que es como el 20% de la animación ya que va de 0 a 100) la vista vaya al 65% del eje X de la pantalla. Nos referimos al porcentaje del eje X al definir el tipo como “parentRelative”.
• En el momento 80 (80% de la animación), la vista llegará hasta el 90% del eje X y lo hará de forma relativa tal y como se ha definido.

El código sería el siguiente:

Cambia varios atributos mientras se realiza la animación

Para la vista C también debes establecer que su atributo “backgroundColor” cambie desde la animación de inicio a la de fin. Para ello usa el elemento “CustomAttribute” con sus propiedades “attributeName”, con valor “backgroundColor” y “customColorValue” pasándole el color que quieras desde el inicio (transparente en este caso) al fin (azúl).

El siguiente código estará en el ConstraintSet de inicio:

Éste estará en el ConstraintSet de fin:

El código del MotionScene puedes verlo en el siguiente enlace.

Finalmente, sigues viendo que las animaciones con MotionLayout son realmente sencillas y no necesitamos conocer grandes cosas para realizar animaciones con una complejidad media. Te animo a seguir indagando y espero que te haya gustado.