Expression Blend: creando un «Motion Path»

Vamos a ver como podemos crear un «Motion Path» para un elemento de WPF con la herramienta de diseño Expression Blend.

Lo primero de todo arrancamos nuestro Expressión Blend, en mi caso es la versión 2, la preview de septiembre que podéis encontrar aquí.

image

Creamos un nuevo proyecto (Ctrl+Shift+N) y elegimos crear una aplicación para WPF, le damos un nombre y pulsamos sobre «OK».

Ahora lo que haremos será arrastrar un rectángulo sobre la ventana que estamos diseñando, con el rectángulo seleccionado pulsamos sobre propiedades y en la sección de brochas (brushes) reseteamos la propiedad Fill para que el relleno de la figura sea transparente.

image

image

Luego lo que tenemos que hacer es ir al menú Object, luego a Path y pulsamos en la opción Convert to Motion Path.

image 

Aparece una ventana donde debemos indicar el elemento que va a recorrer ese camino:

image

Elegimos el botón que teníamos agregado y automáticamente se coloca en el camino que hemos definido. Se crea una nueva línea de tiempo automáticamente, podemos pulsar sobre el play para ver el nuevo efecto.

Además por defecto el tiempo que tarda en recorrer el camino son 2 segundos, pero podemos editar esto a nuestro gusto buscando el elemento Motion Path del botón y alargamos o acortamos el tiempo que dura el recorrido.

image

También se pueden hacer Motion Path con otras figuras predefinidas o con líneas que dibujemos con el lápiz o la pluma.

La verdad es que es una forma fácil de animar un logo o crear un pequeño efecto en nuestra aplicación.

 

Saludetes