Compartir a través de

Cómo: Animar el color mediante fotogramas clave

En este ejemplo se muestra cómo animar el Color de un SolidColorBrush mediante fotogramas clave.

Ejemplo

En el ejemplo siguiente se usa la clase ColorAnimationUsingKeyFrames para animar la propiedad Color de un SolidColorBrush. Esta animación usa tres fotogramas clave de la siguiente manera:

  1. Durante los dos primeros segundos, usa una instancia de la LinearColorKeyFrame clase para cambiar gradualmente el color de verde a rojo. Fotogramas clave lineales como LinearColorKeyFrame crean una transición lineal suave entre valores.

  2. Durante el final de la próxima mitad de segundo, usa una instancia de la DiscreteColorKeyFrame clase para cambiar rápidamente el color de rojo a amarillo. Fotogramas clave discretos como DiscreteColorKeyFrame producen cambios repentinos entre valores; es decir, el cambio de color en esta parte de la animación se produce rápidamente y no es sutil.

  3. Durante los dos segundos finales, usa una instancia de la SplineColorKeyFrame clase para volver a cambiar el color, esta vez de amarillo a verde. Tramas clave spline como SplineColorKeyFrame crean una transición variable entre valores según los valores de la propiedad KeySpline. En este ejemplo, el cambio de color comienza lentamente y acelera exponencialmente hacia el final del segmento de tiempo.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
using System.Windows.Media;

namespace Microsoft.Samples.KeyFrameExamples
{
    public class ColorAnimationUsingKeyFramesExample : Page
    {
        public ColorAnimationUsingKeyFramesExample()
        {
            Title = "BooleanAnimationUsingKeyFrames Example";
            Background = Brushes.White;
            Margin = new Thickness(20);

            // Create a NameScope for this page so that
            // Storyboards can be used.
            NameScope.SetNameScope(this, new NameScope());

            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Orientation = Orientation.Vertical;
            myStackPanel.HorizontalAlignment = HorizontalAlignment.Center;

            // Create the Border that is the target of the animation.
            SolidColorBrush animatedBrush = new SolidColorBrush();
            animatedBrush.Color = Color.FromArgb(255, 0, 255, 0);
            Border myBorder = new Border();

            // Set the initial color of the border to green.
            myBorder.BorderBrush = animatedBrush;
            myBorder.BorderThickness = new Thickness(28);
            myBorder.Padding = new Thickness(20);
            myStackPanel.Children.Add(myBorder);

            // Create a TextBlock to host inside the Border.
            TextBlock myTextBlock = new TextBlock();
            myTextBlock.Text = "This example shows how to use the ColorAnimationUsingKeyFrames"
                               + " to create an animation on the BorderBrush property of a Border.";
            myBorder.Child = myTextBlock;

            // Assign the Brush a name so that
            // it can be targeted by a Storyboard.
            this.RegisterName(
                "AnimatedBrush", animatedBrush);

            // Create a ColorAnimationUsingKeyFrames to
            // animate the BorderBrush property of the Button.
            ColorAnimationUsingKeyFrames colorAnimation
                = new ColorAnimationUsingKeyFrames();
            colorAnimation.Duration = TimeSpan.FromSeconds(6);

            // Create brushes to use as animation values.
            Color redColor = new Color();
            redColor = Color.FromArgb(255, 255, 0, 0);
            Color yellowColor = new Color();
            yellowColor = Color.FromArgb(255, 255, 255, 0);
            Color greenColor = new Color();
            greenColor = Color.FromArgb(255, 0, 255, 0);

            // Go from green to red in the first 2 seconds. LinearColorKeyFrame creates
            // a smooth, linear animation between values.
            colorAnimation.KeyFrames.Add(
                new LinearColorKeyFrame(
                    redColor, // Target value (KeyValue)
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.0))) // KeyTime
                );

            // In the next half second, go to yellow. DiscreteColorKeyFrame creates a
            // sudden jump between values.
            colorAnimation.KeyFrames.Add(
                new DiscreteColorKeyFrame(
                    yellowColor, // Target value (KeyValue)
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5))) // KeyTime
                );

            // In the final 2 seconds of the animation, go from yellow back to green. SplineColorKeyFrame
            // creates a variable transition between values depending on the KeySpline property. In this example,
            // the animation starts off slow but toward the end of the time segment, it speeds up exponentially.
            colorAnimation.KeyFrames.Add(
                new SplineColorKeyFrame(
                    greenColor, // Target value (KeyValue)
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4.5)), // KeyTime
                    new KeySpline(0.6, 0.0, 0.9, 0.0) // KeySpline
                    )
                );

            // Set the animation to repeat forever.
            colorAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Set the animation to target the Color property
            // of the object named "AnimatedBrush".
            Storyboard.SetTargetName(colorAnimation, "AnimatedBrush");
            Storyboard.SetTargetProperty(
                colorAnimation, new PropertyPath(SolidColorBrush.ColorProperty));

            // Create a storyboard to apply the animation.
            Storyboard myStoryboard = new Storyboard();
            myStoryboard.Children.Add(colorAnimation);

            // Start the storyboard when the Border loads.
            myBorder.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                myStoryboard.Begin(this);
            };

            Content = myStackPanel;
        }
    }
}


Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation
Imports System.Windows.Media

Namespace Microsoft.Samples.KeyFrameExamples
    Public Class ColorAnimationUsingKeyFramesExample
        Inherits Page
        Public Sub New()
            Title = "BooleanAnimationUsingKeyFrames Example"
            Background = Brushes.White
            Margin = New Thickness(20)

            ' Create a NameScope for this page so that
            ' Storyboards can be used.
            NameScope.SetNameScope(Me, New NameScope())

            Dim myStackPanel As New StackPanel()
            myStackPanel.Orientation = Orientation.Vertical
            myStackPanel.HorizontalAlignment = HorizontalAlignment.Center

            ' Create the Border that is the target of the animation.
            Dim animatedBrush As New SolidColorBrush()
            animatedBrush.Color = Color.FromArgb(255, 0, 255, 0)
            Dim myBorder As New Border()

            ' Set the initial color of the border to green.
            myBorder.BorderBrush = animatedBrush
            myBorder.BorderThickness = New Thickness(28)
            myBorder.Padding = New Thickness(20)
            myStackPanel.Children.Add(myBorder)

            ' Create a TextBlock to host inside the Border.
            Dim myTextBlock As New TextBlock()
            myTextBlock.Text = "This example shows how to use the ColorAnimationUsingKeyFrames" & " to create an animation on the BorderBrush property of a Border."
            myBorder.Child = myTextBlock

            ' Assign the Brush a name so that
            ' it can be targeted by a Storyboard.
            Me.RegisterName("AnimatedBrush", animatedBrush)

            ' Create a ColorAnimationUsingKeyFrames to
            ' animate the BorderBrush property of the Button.
            Dim colorAnimation As New ColorAnimationUsingKeyFrames()
            colorAnimation.Duration = TimeSpan.FromSeconds(6)

            ' Create brushes to use as animation values.
            Dim redColor As New Color()
            redColor = Color.FromArgb(255, 255, 0, 0)
            Dim yellowColor As New Color()
            yellowColor = Color.FromArgb(255, 255, 255, 0)
            Dim greenColor As New Color()
            greenColor = Color.FromArgb(255, 0, 255, 0)

            ' Go from green to red in the first 2 seconds. LinearColorKeyFrame creates
            ' a smooth, linear animation between values.
            colorAnimation.KeyFrames.Add(New LinearColorKeyFrame(redColor, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.0)))) ' KeyTime -  Target value (KeyValue)

            ' In the next half second, go to yellow. DiscreteColorKeyFrame creates a 
            ' sudden jump between values.
            colorAnimation.KeyFrames.Add(New DiscreteColorKeyFrame(yellowColor, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5)))) ' KeyTime -  Target value (KeyValue)

            ' In the final 2 seconds of the animation, go from yellow back to green. SplineColorKeyFrame 
            ' creates a variable transition between values depending on the KeySpline property. In this example,
            ' the animation starts off slow but toward the end of the time segment, it speeds up exponentially.
            colorAnimation.KeyFrames.Add(New SplineColorKeyFrame(greenColor, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4.5)), New KeySpline(0.6, 0.0, 0.9, 0.0))) ' KeySpline -  KeyTime -  Target value (KeyValue)

            ' Set the animation to repeat forever. 
            colorAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Set the animation to target the Color property
            ' of the object named "AnimatedBrush".
            Storyboard.SetTargetName(colorAnimation, "AnimatedBrush")
            Storyboard.SetTargetProperty(colorAnimation, New PropertyPath(SolidColorBrush.ColorProperty))

            ' Create a storyboard to apply the animation.
            Dim myStoryboard As New Storyboard()
            myStoryboard.Children.Add(colorAnimation)

            ' Start the storyboard when the Border loads.
            AddHandler myBorder.Loaded, Sub(sender As Object, e As RoutedEventArgs) myStoryboard.Begin(Me)

            Content = myStackPanel
        End Sub

    End Class
End Namespace

<Page  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="ThicknessAnimationUsingKeyFrames Example">

  <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
    <Border Background="#99FFFFFF"  BorderThickness="28"
    Margin="0,60,0,20" Padding="20" >
      <Border.BorderBrush>
        <SolidColorBrush x:Name="MyAnimatedBrush" Color="Green" />
      </Border.BorderBrush>
      <Border.Triggers>
        <EventTrigger RoutedEvent="Border.Loaded">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animate from green to red using a linear key frame, from red to 
              yellow using a discrete key frame, and from yellow back to green with
              a spline key frame. This animation repeats forever. -->
              <ColorAnimationUsingKeyFrames
                Storyboard.TargetProperty="Color"
                Storyboard.TargetName="MyAnimatedBrush"
                Duration="0:0:6" FillBehavior="HoldEnd" RepeatBehavior="Forever">
                <ColorAnimationUsingKeyFrames.KeyFrames>

                  <!-- Go from green to red in the first 2 seconds. LinearColorKeyFrame creates
                  a smooth, linear animation between values. -->
                  <LinearColorKeyFrame Value="Red" KeyTime="0:0:2" />

                  <!-- In the next half second, go to yellow. DiscreteColorKeyFrame creates a 
                  sudden jump between values. -->
                  <DiscreteColorKeyFrame Value="Yellow" KeyTime="0:0:2.5" />

                  <!-- In the final 2 seconds of the animation, go from yellow back to green. SplineColorKeyFrame 
                  creates a variable transition between values depending on the KeySpline property. In this example,
                  the animation starts off slow but toward the end of the time segment, it speeds up exponentially.-->
                  <SplineColorKeyFrame Value="Green" KeyTime="0:0:4.5" KeySpline="0.6,0.0 0.9,0.00" />
                </ColorAnimationUsingKeyFrames.KeyFrames>
              </ColorAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Border.Triggers>

      <TextBlock>
        This example shows how to use the ColorAnimationUsingKeyFrames to create
        an animation on the BorderBrush property of a Border.
      </TextBlock>
    </Border>

  </StackPanel>
</Page>

Para ver el ejemplo completo, consulte Ejemplo de animación de cuadros clave.

Consulte también