Voy a explicar como podemos hacer para agregar la funcionalidad easing a nuestra aplicación.
Easing es la aceleración/desaceleración de un objeto para desplazarse de un punto a otro. Silverlight 3 nos da la posibilidad de utilizar algunas funcionalidades ya predefinidas lo que facilita la implementación.
Para empezar vamos a crear un proyecto Silverlight desde Expression Blend.
Como segundo paso, vamos a agregar una elipse de fondo rojo y un botón que va a ser el que dará comienzo a la animación.
El siguiente paso es crear una animación que lleve la elipse de un punto a otro dentro del contenedor.
Cuando generamos el nuevo Storyboard, desde el Timeline vamos a definir la posición inicial del objeto, creando un nuevo Keyframe.
Ahora lo que hacemos es mover el Timeline varios Keyframe y cuando lo posicionamos donde queremos, movemos la elipse a otra posición del contenedor.
Como vemos, la elipse se moverá de un punto a otro de manera normal, lo que haremos ahora es agregarle la funcionalidad Easing, que le dará un efecto interesante. Para hacer esto, seleccionamos el Keyframe y vemos que en las propiedades tenemos una opción Easing que nos permite ver las opciones predefinidas.
Seleccionamos la que nos guste y automáticamente queda relacionada con nuestra animación. Cada Easing tiene propiedades que podemos modificar.
Lo que nos resta por hacer es codificar el inicio de la animación. Para ello utilizamos el Click del botón que agregamos.
|
1 |
<span style="color: #0000ff">private</span> <span style="color: #0000ff">void</span> Animar_Click(<span style="color: #0000ff">object</span> sender, RoutedEventArgs e) |
|
1 |
{ |
|
1 |
EasingElipse.Begin(); |
|
1 |
} |
De esta manera, generamos un efecto interesante y sencillo.
Pueden descargar el proyecto aquí.
2 comments
Rogelio says:
Sep 23, 2009
Hola, disculpen se que este no va a ser el lugar para publicar este comentario, pero he estado buscando y me gustaria saber cual es la diferencia entre un Canvas y un Grid en Silverlight, cuando es mejor usar uno u otro y tmb saber si tienen una seccion de preguntas y respuestas pero de preferencia que no sea foro y por ultimo, no quiero decir que soy nuevo usando esta tecnologia por que la acabo de bajar e instalar me podrian mandar o comentar los link de tutoriales desde 0, para terminar hay alguna manera de hacer el ejemplo que el amigo santiago esta publicando aqui que no sea usando expresion, esque yo no tengo el expresion y la verdad no quiero crackearlo ni nada por el estilo, o si el expression esta en version expres o gratuito de donde lo descargo.
De antemano muchas gracias
Arturo Molina says:
Sep 28, 2009
Que tal Rogelio. Un canvas es basicamente, un lienzo donde tu puedes colocar tus controles a tu gusto mediante la definicion de las propiedades adjuntas como Canvas.Top y Canvas.Left. Un Grid es mas como una tabla, donde defines columnas y filas y en tus controles tu defines donde seran colocados mediante las propiedades adjuntas Grid.Column y Grid.Row
En cuanto a tutoriales desde 0, existe un tutorial hecho por Scott Gu muy bueno para iniciarse en la tecnologia. Aunque esta basado en Silverlight 2, los conceptos basicos son los mismos y te daran las bases para empezar a probar la tecnologia. Puedes encontrar el articulo original aqui: http://weblogs.asp.net/scottgu/pages/silverlight-2-end-to-end-tutorial-building-a-digg-search-client.aspx o la version en español aqui: http://thinkingindotnet.wordpress.com/2008/04/27/tutorial-de-silverlight-en-espanol/
Finalmente, respecto a tu pregunta sobre una version gratuita de Blend, te recomiendo revises el post sobre WebSite Spark: http://blogs.ligasilverlight.com/?p=559
Saludos!