Introducción: AnimaciónGetting started: Animation

Agregar animacionesAdding animations

En iOS, los efectos de animación se crean casi siempre mediante programación.In iOS, you most often create animation effects programmatically. Por ejemplo, puedes usar las animaciones que proporcionan los métodos animateWithDuration basados en bloques de la clase UIView o los métodos anteriores no basados en bloques.For example, you might use animations provided by the block-based UIView class's animateWithDuration methods, or the older non-block based methods. Asimismo, también puedes usar explícitamente la clase CALayer para animar capas.Or, you might explicitly use the CALayer class to animate layers. Las animaciones de las aplicaciones de Windows se pueden crear mediante programación, pero también pueden definirse mediante declaración con lenguaje XAML.Animations in Windows apps can be created programmatically, but they can also be defined declaratively with Extensible Application Markup Language (XAML). Puedes usar Microsoft Visual Studio para editar el código XAML directamente, pero Visual Studio también incluye una herramienta llamada Blend, que crea el código XAML por ti a medida que trabajas con animaciones en un diseñador.You can use Microsoft Visual Studio to edit XAML code directly, but Visual Studio also comes with a tool called Blend, which creates XAML code for you as you work with animations in a designer. De hecho, Blend te permite abrir, diseñar, generar y ejecutar proyectos completos de Visual Studio gráficamente.In fact, Blend allows you to open, design, build, and run complete Visual Studio projects, graphically. El tutorial siguiente te permitirá probarlo.The following walkthrough lets you try this out.

Crea una nueva aplicación para la Plataforma universal de Windows (UWP) y asígnale un nombre parecido a "SimpleAnimation".Create a new Universal Windows Platform (UWP) app and name it something like "SimpleAnimation". En este proyecto, moveremos un rectángulo, le aplicaremos un efecto de atenuación y después lo volveremos a mostrar.In this project, we're going to move a rectangle, apply a fade effect, and then bring it back into view. Las animaciones en XAML se basan en el concepto de guiones gráficos (no deben confundirse con los guiones gráficos de iOS).Animations in XAML are based on the concept of storyboards (not to be confused with iOS storyboards). Los guiones gráficos usan fotogramas clave para animar los cambios en las propiedades.Storyboards use keyframes to animate property changes.

Con el proyecto abierto, en el Explorador de soluciones, haz clic con el botón derecho en el nombre del proyecto y, a continuación, selecciona Abrir en Blend o Diseñar en Blend, tal como se muestra en la ilustración siguiente.With your project open, in Solution Explorer, right-click the project's name and then select Open in Blend or Design in Blend, as shown in the following figure. Visual Studio continúa ejecutándose en segundo plano.Visual Studio continues to run in the background.

comando de menú Abrir en Blend

Después de iniciar Blend, deberías ver algo parecido a lo que muestra la ilustración siguiente.After Blend starts, you should see something similar to the following figure.

entorno de desarrollo de Blend

Haga doble clic en MainPage.xaml en el Explorador de soluciones situado en el lado izquierdo.Double-click on MainPage.xaml in the Solution Explorer on the left hand side. A continuación, en la tira vertical de herramientas situada en el borde de la vista Diseño central, selecciona la herramienta Rectángulo y, a continuación, dibuja un rectángulo en la vista Diseño, tal como se muestra en la siguiente ilustración.Next, from the vertical strip of tools on the edge of the central Design View, select the Rectangle tool, and then draw a rectangle in Design View, as shown in the following figure.

agregar un rectángulo en la vista Diseño

Para que el rectángulo sea de color verde, busca la ventana Propiedades y, en el área Pincel, haz clic en el botón Pincel de color sólido y luego en el icono Cuentagotas de color.To make the rectangle green, look in the Properties window, and in the Brush area, click on the Solid color brush button, and then click the Color eyedropper icon. Haz clic en alguna parte de la banda de tonos verdes.Click somewhere in the green band of hues.

Para empezar a animar el rectángulo, en la ventana Objetos y escala de tiempo, pulsa el botón del signo más (Nuevo) tal como se muestra en la ilustración siguiente y después pulsa Aceptar.To begin animating the rectangle, in the Objects and Timeline window, tap the plus symbol (New) button as shown in the following figure, and then tap OK.

agregar un guion gráfico

Es entonces cuando aparece un guion gráfico en la ventana Objetos y escala de tiempo (puede que tengas que cambiar el tamaño de la vista para verla correctamente).A storyboard appears in the Objects and Timeline window (you may need to resize the view to see it properly). La vista Diseño muestra cambios que indican que la grabación de la escala de tiempo de Storyboard1 está activa.The Design View display changes to show that Storyboard1 timeline recording is on. Para capturar el estado actual del rectángulo, en la ventana Objetos y línea de tiempo, pulsa el botón Registrar fotograma clave que se encuentra justo encima de la flecha amarilla, tal como se muestra en la ilustración siguiente.To capture the current state of the rectangle, in the Objects and Timeline window, tap the Record Keyframe button just above the yellow arrow, as shown in the following figure.

registrar un fotograma clave

A continuación, mueve el rectángulo y atenúalo.Now, let's move the rectangle and fade it away. Para ello, arrastra la flecha naranja/amarilla a la posición de dos segundos y, a continuación, arrastra el rectángulo verde ligeramente hacia la derecha.To do this, drag the orange/yellow arrow to the 2-second position, and then move your green rectangle slightly to the right. Una vez hecho esto, en la ventana Propiedades del área Apariencia, cambia la propiedad Opacidad a 0, tal como se muestra en la ilustración siguiente.Then, in the Properties window, in the Appearance area, change the Opacity property to 0, as shown in the following figure. Para obtener una vista previa de la animación, pulsa el botón Reproducir en el panel de guion gráfico.To preview the animation, tap the Play button in the Storyboard panel.

ventana Propiedades y botón Reproducir

A continuación, vuelve a mostrar el rectángulo.Next, let's bring the rectangle back into view. En la ventana Objetos y escala de tiempo, haz doble clic en Storyboard1.In the Objects and Timeline window, double-click Storyboard1. A continuación, en la ventana Propiedades del área Común, selecciona AutoReverse, tal como se muestra en la ilustración siguiente.Then, in the Properties window, in the Common area, select AutoReverse, as shown in the following figure.

seleccionar un guion gráfico

Por último, haz clic en el botón Reproducir para ver qué sucede.Finally, click on the Play button to see what happens.

Puedes compilar y ejecutar el proyecto haciendo clic en el botón de ejecución verde en la parte superior de la ventana (también puedes presionar F5).You can build and run the project by clicking on the green run button at the top of the window (or just press F5). Si lo haces, verás que el proyecto efectivamente se compila y ejecuta, pero el rectángulo verde no se mueve ni un ápice, como un bebé plantado en el pasillo de un supermercado junto al dulce que sus padres no quieren comprarle.If you do this, you'll see your project will indeed build and run, but the green rectangle will stubbornly sit perfectly still, like a toddler denied candy in a supermarket aisle. Para iniciar la animación, tienes que agregar una línea de código al proyecto.To start the animation, you'll need to add a line of code to the project. Esta es la manera de hacerlo.Here's how.

Guarda el proyecto abriendo el menú Archivo y seleccionando Guardar MainPage.xaml.Save the project, by opening the File menu, and selecting Save MainPage.xaml. Vuelva a Visual StudioReturn to Visual Studio. Si Visual Studio muestra un cuadro de diálogo que pregunta si deseas volver a cargar el archivo modificado, selecciona .If Visual Studio displays a dialog box asking whether you want to reload the modified file, select Yes. Haz doble clic en el archivo MainPage.xaml.cs (que está oculto en MainPage.xaml) para abrirlo, y agrega el siguiente código justo encima del método público MainPage():Double-click the MainPage.xaml.cs file, which is hidden under MainPage.xaml, to open it, and add the following code just above the public MainPage() method:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Add the following line of code.
    Storyboard1.Begin();
}

Vuelve a ejecutar el proyecto y verás que el rectángulo está animado.Run the project again, and watch the rectangle animate. ¡Bien!Hurrah!

Si abres el archivo MainPage.xaml en la vista XAML, verás el código XAML que Blend ha agregado mientras trabajabas en el diseñador.If you open the MainPage.xaml file, in XAML view, you'll see the XAML code that Blend added for you as you worked in the designer. En especial, fíjate en el código de los elementos <Storyboard> y <Rectangle>.In particular, look at the code in the <Storyboard> and <Rectangle> elements. El código siguiente muestra un ejemplo.The following code shows an example. Los puntos suspensivos indican código no relacionado que se omite por razones de brevedad; se han agregado saltos de línea para facilitar la lectura del código.Ellipses indicate unrelated code omitted for brevity, and line breaks have been added for code readability.)

...
<Storyboard 
        x:Name="Storyboard1" 
        AutoReverse="True">
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="0"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2" 
                Value="185.075"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="0"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2" 
                Value="2.985"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.Opacity)" 
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="1"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2"
                Value="0"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
...
<Rectangle 
        x:Name="rectangle" 
        Fill="#FF00FF63" 
        HorizontalAlignment="Left" 
        Height="122" 
        Margin="151,312,0,0" 
        Stroke="Black" 
        VerticalAlignment="Top" 
        Width="239" 
        RenderTransformOrigin="0.5,0.5">
    <Rectangle.RenderTransform>
        <CompositeTransform/>
    </Rectangle.RenderTransform>
</Rectangle>
...

Puedes modificar este XAML manualmente o regresar a Blend y seguir trabajando desde allí.You can edit this XAML manually, or return to Blend to continue working on it there. Con Blend es más divertido crear interfaces de usuario atractivas, y la capacidad para animarlas mediante una herramienta gráfica puede acelerar considerablemente el tiempo de desarrollo.Blend makes it fun to create interesting user interfaces, and the ability to animate them using a graphical tool can dramatically speed up development time. Para más información sobre las animaciones, consulta Información general sobre animaciones.For more info about animations, see Animations overview.

Nota:    Para obtener información sobre las animaciones de las aplicaciones para UWP con JavaScript y HTML, consulte animación de la interfaz de usuario (html).Note  For info about animations for UWP apps using JavaScript and HTML, see Animating your UI (HTML).

Paso siguienteNext step

Introducción: ¿Qué debo hacer a continuación?Getting started: What next?