Creando animaciones de Silverlight usando Expression Blend
October 2nd, 2007
Les quiero mostrar cómo lograr una animación que se repite indefinidamente en Silverlight, usando la herramienta de Expression Blend.
Como primer paso voy a crear un proyecto en la herramienta de tipo Silverlight Application (javascript). Para ello, dentro de Expression Blend tenemos que seleccionar File / New Proyect… (o el acceso directo Ctrl+Shift+N) y elegir la opción correspondiente. Hay que elegir un nombre para el proyecto, por ejemplo Prueba Animacion.
El Expression Blend se encarga de generar todos los archivos necesarios para una aplicación Silverlight. Ahora vamos a agregar un objeto Ellipse (que va a ser nuestro objeto a animar). Para eso vamos a la ToolBox y seleccionamos la opción de insertar un objeto. Con botón derecho se muestran los objetos disponibles, y elegimos la opción Ellipse.
Insertamos un Ellipse en el canvas. En el Property Inspector, primero seteamos el nombre de nuestro elemento (por ejemplo ObjetoAnimado). Este nombre se utiliza para referenciar el objeto en la aplicación. En la solapa Brush seteamos la propiedad Fill con un Solid Color Brush y elegimos un tono rojo. En la solapa Layout seteamos las propiedades Width = 20, Heigth = 19, Left = 0 y Heigth = 210. Para ver la pantalla completa, hay que setear el zoom al 50%.
Ahora añadimos la animación. Para ello vamos a la sección Objects and Timeline y creamos un nuevo timeline. También acá se ingresa un nombre al Timeline para que se pueda referenciar durante la aplicación (por ejemplo ObjetoTimeline). Antes de aceptar, verificar que está checkada la opción “Create as a Resource”. Una vez creado el Timeline, se muestran una pantalla a la derecha de los objetos que muestra una línea de tiempo de la animación y aparece el recuadro en rojo en la pantalla de diseño del canvas que indica que se está grabando la animación.
Vamos a hacer una animación en la que la pelotita rebota en 4 puntos y vuelve al sitio original. Para eso hacemos una marca en el Timeline en el tiempo 0 (verificar antes que esté seleccionado el objeto ObjetoAnimado en el Objects and Timeline). Luego movemos el objeto a la posición Top 0, Left 310 y volvemos a hacer una marca en el Timeline a los 3 segundos. Repetimos los movimientos y las marcas en las posiciones Top 210, Left 620, Top 460, Left 310 y nuevamente en Left 0, Top 210, siempre cada 3 segundos. Luego dejar de grabar la animación. Al final debería quedar la imagen que se muestra abajo. Verificar que el objeto Canvas que contiene a todos los elementos tenga seteados los valores de Width = 640 y Height = 480.
Para iniciar la animación, agregamos un texto Presione Aquí al que le seteamos las propiedades de Subrayado y el Foreground de color verde. Luego vamos a la solapa XAML y seteamos en el TextBlock que contienen el texto generado el manejador del Evento MouseLeftButtonDown = “manejarAnimacion”. Además seteamos en todos los tags de DoubleAnimation la propiedad RepeatBehavior="Forever".
Por último, abrimos el archivo Page.xaml.js y agregamos la función manejarAnimacion con el siguiente código:
var comenzo = false
function manejarAnimacion(sender, args)
{
if (comenzo == false)
{
sender.findName("ObjetoTimeline").begin();
comezo = true;
}
}
Presionar F5 para ver ejecutar la aplicación y luego presionar sobre el texto "Presione Aquí" para ver la animación.
Nota: Se puede luego modificar la velocidad de la animación haciendo drag&drop de los Record KeyFrames en el Timeline. Una buena velocidad resulta en un KeyFrame por segundo.
Jorge Garcia\’s Blog