Una excelente manera de darle vida a las aplicaciones es usando animaciones en lugares estratégicos. Blend y Silverlight hacen posibles sofisticadas animaciones con relativamente poco esfuerzo. Jeff muestra cómo duplicar una animación usada comúnmente por el teléfono a la vez que nos da los principios básicos para crear animaciones.

Este artículo fue publicado originalmente en Maromas Digitales y es una traducción aproximada del artículo 31 Days of Windows Phone | Day #29: Animations por Jeff Blankenburg publicado el 29 de octubre del 2010

 

Este artículo es el Día #29 de una serie llamada los 31 días de Windows Phone.

Ayer escribí sobre cómo hacer que nuestras aplicaciones generen ingresos adicionales usando anuncios publicitarios. Hoy voy a demostrar cómo añadir movimiento y vida a nuestras aplicaciones usando animaciones.

 

La súper animación de la puerta abriendo

Si han usado una aplicación en el emulador habrán visto la bonita animación de una puerta abriendo que ocurre justo antes de cargarla. Voy a mostrar cómo añadir ese tipo de animación a sus páginas. (Es, de hecho, sorprendentemente fácil.)

Háganse de un nuevo proyecto (si quieren seguir el texto, usen la plantilla básica de aplicaciones de WIndows Phone), y agreguen un rectángulo a la cuadrícula llamada ContentPanel. El mío se ve así:

 

Aspecto inicial de la aplicación con el rectángulo rojo.

 

Por el resto del artículo vamos a usar Expression Blend 4 para crear la animación. Pueden abrir el proyecto desde Visual Studio haciendo clic derecho en el proyecto y seleccionando Abrir en Expression Blend.

 

Expression Blend se puede abrir desde Visual Studio haciendo clic derecho en el proyecto.

 

Si tienen el proyecto abierto en Blend, encuentren la pestaña llamada Objetos y escala de tiempo. Tiene un pequeño símbolo + en la parte superior que se usa para crear nuevas animaciones o guiones gráficos (storyboards).

 

El símbolo '+' crea nuevos guiones gráficos para animaciones.

 

Si hacen clic en el símbolo, obtienen un cuadro de diálogo como el siguiente. Pónganle nombre a la animación:

 

Creando un nuevo guión gráfico o storyboard.

 

Al volver a la pestaña de Objetos y escala de tiempo verán la escala de la animación a la derecha de los objetos. Para apreciarla mejor, la tecla F6 reorganizará las ventanas en Expression, poniendo la pestaña en la parte inferior y abarcando el ancho de la aplicación.

En nuestra animación de puerta abriendo vamos a manipular TODO el contenido de la página. Por dicha, gracias al sistema jerárquico de Silverlight podemos simplemente trabajar con el elemento LayoutRoot. Seleccionen ese elemento en la pestaña de Objetos y busquen un ícono en forma de óvalo directamente encima de la línea de cero segundos.

 

El óvalo sobre la escala de tiempo siver para designar fotogramas clave.

 

El ícono indica que es un fotograma clave (keyframe). Estos son los instantes cruciales cuando ocurren cambios. Silverlight es capaz de crear la animación entre fotogramas clave por nosotros. Por ejemplo, en este caso vamos a definir el comienzo y el final de nuestra a animación, dejando que Silverlight calcule el resto. Hagan clic en el ícono del fotograma, por si no lo han hecho.

Hemos creado el fotograma clave a cero segundos debido a que necesitamos una base. Así le indicamos a Silverlight que tome nota de que nuestro elemento está en el punto de partida. Otro aspecto que tenemos que configurar en este punto es el centro de rotación del objeto. El centro de rotación siempre coincide con el centro del objeto, pero nosotros queremos que rote con respecto a la orilla izquierda de la pantalla.

Luego de verificar que LayoutRoot está seleccionado y que hay un “huevito” a su derecha en cero segundos, vayan a la pestaña de Propiedades. En la categoría Transformación hay otra pestaña llamada Centro de giro (en la sección Projection). Verán que ambos valores, X y Y, son 0.5 (es decir el centro del elemento). Lo que queremos es cambiar el valor X a cero para moverlo al borde izquierdo del elemento.

 

Cambiando la posición del centro de giro de la página.

 

Volviendo a la pestaña Objetos y escala de tiempo vamos a mover la línea amarilla, que indica el paso del tiempo, a la mitad entre cero y uno. Verán como el valor de tiempo junto al ícono de fotograma clave cambia a medida que movemos la línea.

Lo que sigue es modificar el Giro en la sección Projection que visitamos hace un momento. Volviendo a Propiedades, cambiamos el valor Y a 90, causando que nuestro contenido gire 90 grados en una rotación tridimensional.

 

Girando la página 90 grados.

 

Si presionan el botón Reproducir encima de la escala de tiempo deben poder ver la animación en acción. Sin embargo, todavía nos falta un paso más antes de poder usarla en nuestro programa. Hay que invocarla desde el código. Abajo muestro mi archivo completo de MainPage.xaml para que puedan ver todos los cambios que hemos hecho hasta ahora en el XAML:

 

<phone:PhoneApplicationPage
    x:Class="Dia29_Animaciones.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;
                 assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;
                 assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/
              markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignWidth="480"
    d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"
    Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
  <phone:PhoneApplicationPage.Resources>
    <Storyboard x:Name="PuertaAbriendo">
      <DoubleAnimation
         Duration="0"
         To="0.5"
         Storyboard.TargetProperty="(UIElement.Projection).
                                (PlaneProjection.CenterOfRotationY)"
         Storyboard.TargetName="LayoutRoot"
         d:IsOptimized="True" />
      <DoubleAnimation
         Duration="0"
         To="0"
         Storyboard.TargetProperty="(UIElement.Projection).
                                (PlaneProjection.CenterOfRotationX)"
         Storyboard.TargetName="LayoutRoot"
         d:IsOptimized="True" />
      <DoubleAnimationUsingKeyFrames
         Storyboard.TargetProperty="(UIElement.Projection).
                                    (PlaneProjection.RotationY)"
         Storyboard.TargetName="LayoutRoot">
        <EasingDoubleKeyFrame
            KeyTime="0"
            Value="0" />
        <EasingDoubleKeyFrame
            KeyTime="0:0:0.5"
            Value="90" />
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
  </phone:PhoneApplicationPage.Resources>

  <!--LayoutRoot es la cuadrícula raíz donde
  se coloca todo el contenido de la página-->
  <Grid x:Name="LayoutRoot"
        Background="Transparent">
    <Grid.Projection>
      <PlaneProjection />
    </Grid.Projection>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <!--TitlePanel contiene el nombre de
    la aplicación y el título de la página-->
    <StackPanel x:Name="TitlePanel"
                Grid.Row="0"
                Margin="12,17,0,28">
      <TextBlock x:Name="ApplicationTitle"
                 Text="BLANKENSOFT"
                 Style="{StaticResource PhoneTextNormalStyle}" />
      <TextBlock x:Name="PageTitle"
                 Text="animaciones"
                 Margin="9,-7,0,0"
                 Style="{StaticResource PhoneTextTitle1Style}" />
    </StackPanel>

    <!--ContentPanel. Colocar aquí el contenido adicional-->
    <Grid x:Name="ContentPanel"
          Grid.Row="1"
          Margin="12,0,12,0">
      <Rectangle Name="Rectángulo"
                 Height="320"
                 Width="280"
                 Fill="Red" />
    </Grid>
  </Grid>
</phone:PhoneApplicationPage>

 

Invocando las animaciones desde el código

Luego de crear la animación podemos guardar todo y salir de Expression Blend. De vuelta en Visual Studio hay que abrir el archivo MainPage.xaml.cs. Lo que vamos a hacer es iniciar la animación cuando alguien haga un clic en el rectángulo rojo.

Primero creamos un controlador para el evento Click en el rectángulo y luego ejecutamos el método Begin() del guión gráfico. Este es el ejemplo completo de MainPage.xaml.cs:

 

using System.Windows.Input;
using Microsoft.Phone.Controls;

namespace Dia29_Animaciones
{
  public partial class MainPage : PhoneApplicationPage
  {
    // Constructor
    public MainPage()
    {
      InitializeComponent();
      Rectángulo.MouseLeftButtonDown +=
                     Rectángulo_MouseLeftButtonDown;
    }

    void Rectángulo_MouseLeftButtonDown(object sender,
                                        MouseButtonEventArgs e)
    {
      PuertaAbriendo.Begin();
    }
  }
}

 

¡Eso es todo! Si quieren, pueden usar libremente esta animación para dar a sus aplicaciones el mismo efecto frecuentemente usado en el sistema operativo.

 

Descargando el código

El ejemplo incluye todo el código mostrado arriba en un proyecto completo. Descárguenlo, por favor, y experimenten con él  para empezar a usar animaciones en sus aplicaciones.

 

Jeff Blankenburg