Como ya he mencionado, los efectos especiales son la parte visual mas representativa de las RIA, lo que las distingue de las aplicaciones a las que muchos estamos acostumbrados, solo ve a cualquier supermercado, checa la computadora que tienen y sabrás de lo que hablo.
Bien, el uso de máscaras te va a permitir pulir un poco mas el uso de estos efectos especiales, para explicarlo de la mejor forma posible, solo basta que cheques el siguiente ejemplo, pasa el cursor sobre las dos imágenes y observa como se desempeñan las animaciones.
Ok, como puedes ver la diferencia quizá es apenas perceptible, pero si lo usas en otros escenarios es grande la diferencia, así que empecemos con los pasos.
En un nuevo proyecto coloca una imagen dentro de un Grid y este dentro de un Border para que quede de la siguiente forma.
Ya después inserta un rectángulo adentro del Grid y utiliza la propiedad de TranslateY en la imagen (el valor no importa, solo permite que se salga por completo del borde).
El XAML final, debe de quedarte de la siguiente forma.
Ya que tienes todo listo, selecciona los dos elementos que necesitas unir, la imagen y el rectángulo, da click derecho y escoge la opción Path > Make clipping path
Al hacer esto, verás como “desaparece” la imagen pero aún sigue señalada, cambia tu herramienta y utiliza la de selección directa 
, si no has dejado de seleccionar tu imagen, verás algo parecido a esto.
En donde el área de morado es tu área de visibilidad y la de azul es el área total del componente, ahora solo hace falta crear una animación común y colocar el valor de la propiedad TranslateY a 0.
El resultado queda como en la imagen, de ahí elige la herramienta de selección directa de nuevo y da doble clic sobre una de las líneas moradas que aparecen para seleccionar las cuatro, ya seleccionadas solo desliza hacia abajo tu selección (notarás como la imagen se va apareciendo conforme tu selección vaya ocupando el área de la imagen).
Ya solo falta el toque final, coloca un botón que se encargue de hacer aparecer la animación, para esto solo escribe lo siguiente en su evento “Click”.
private void btnMostrar_Click(object sender, System.Windows.RoutedEventArgs e) { entrada.Begin(); } |
Listo, el resultado es como este ejemplo.
buen ejemplo basico par utilizar las mascaras, lo que me encanto fueron las imagenes de utilizadas para realizar la demo del tema XD
A mí no me funciona ! Por más que he intentado. Y si descargo el código me dice que tengo que actualizar el SDK de Silverlight pero yo lo tengo actualizado ! Y si intento descargar la supuesta actualización me dice que «Posee una versión más actualizada». En fin tiro la toalla ! jeje Desde Venezuela !