Los Comportamientos, más
conocidos como Behaviors, fueron una de las grandes adiciones de Silverlight 3 y
solo han hecho que mejorar con Silverlight 4. Uno de las cosas con las que
acostumbro a trastear en casa desde que apareció han sido las animaciones y
proyecciones 3D, tratando de conseguir efectos e interacciones avanzados... El
punto principal es que no son sencillos de implementar y es complejo de
"ajustar" por uno mismo ya que implica recodificar cada vez que se
quiere cambiar una personalización... claro está que con los behaviors esto es
mucho más cómodo, ofreciéndonos un gran interfaz para personalizar nuestros
efectos sin mucho esfuerzo.
Con esto en mente he hecho este
comportamiento que realiza una Proyección 3D en base a la posición relativa del
ratón. Lo podéis probar aquí:
http://www.brainsiders.com/playground/Project3DToMouse/default.html
Que hace?
-
Anima una proyección del FrameworkElement
objetivo en los ejes X e Y de forma proporcional a la posición del ratón
respecto otro FrameworkElement, normalmente el panel base, LayoutRoot.
-
Calcula la proyección y la aplica con unos
grados de amplitud personalizable para los ejes X e Y. Porque no una única
amplitud? pues porque la pantalla no es proporcional y esto permite ofrecer una
experiencia más adecuada a las dimensiones de la misma, o bien ofrecer este
efecto de una forma muy concreta (vertical, horizontal).
-
También realiza una animación configurable en
tiempo y Easing, con lo que un diseñador o alguien con gusto puede hacer algún
efecto interesante, haciendo que se mueva suavemente o de una forma divertida
con un movimiento elástico, por ejemplo..
-
También he añadido un flag para decidir si la
orientación será respecto el ratón o versus el mismo.
-
y, si el ratón sale del ámbito de actuación, nos
realiza una animación a la posición de inicio.
Yendo al código, todo está
categorizado con descripciones para ayudar a un uso intuitivo, se adapta bien a
FrameworkElements de tamaño fijo o dinámico y el StoryBoard se genera en
memoria, con lo que no puede solaparse con otra animación del mismo nombre así
como este comportamiento puede aplicarse a más de un elemento de la página o
control de usuario.
Todo el "cableado" se
ha realizado en los eventos OnAttached y OnDetaching, el Invoke no hace nada,
así que podría ser eliminado... He utilizado el TargetedTriggerAction ya que
necesito recoger los eventos del ratón desde un control que ocupe la pantalla
completa y aplicar el efecto a otro control preferiblemente más pequeño para
apreciar el efecto. Sería bueno que pudiéramos desactivar el "invoke"
de ciertos Behaviors para que los diseñadores no se confundan...
Sobre cómo utilizar este
comportamiento, es fácil, copiar el archivo Project2Mouse.cs a tu proyecto y
listo.. bueno, al menos para un desarrollador... para un diseñador sería bueno
que pudiéramos añadir los comportamientos de una forma fácil, como un plug-in o
una carpeta de behaviors y blend los mostrase y permitiera utilizarlos tal cual
y, al añadirlos, agregase las referencias pertinentes.
Otra cosa que hallo algo
por ahora algo molesta es que la actual interfaz es buena para 10 o 20 comportamientos
pero a la que se supera esta cifra hallar un comportamiento ya no es algo
inmediato.. Sería muy bueno si pudiéramos categorizar los comportamientos por
nombre, autor, categoría y etiquetas..
Para obtener el
comportamiento, este está publicado en la galería de comportamientos de Microsoft
Expression, ubicada aquí:
http://gallery.expression.microsoft.com/en-us/Project3DToMouse
Obviamente con todo el
código fuente y con una aplicación de test.
Estoy pensando en
publicar otros Behaviors, pero después de limpiar toda la porquería que suele
aparecer al jugar con diferentes animaciones e ideas hasta que sale el efecto
deseado..
Si se te ocurre alguna
idea para un comportamiento (Behavior) interesante, estaré interesado escuchar
de él para tratar de implementarlo... mientras tanto agradeceré cualquier idea
de mejora sobre el ya implementado y, si os gusta, pues podéis votarlo positivamente
en la galería :).
Happy coding!