Anvisningar: Animera färg med hjälp av nyckelramar

Det här exemplet visar hur du animerar Color för en SolidColorBrush med hjälp av nyckelramar.

Exempel

I följande exempel används klassen ColorAnimationUsingKeyFrames för att animera egenskapen Color för en SolidColorBrush. Den här animeringen använder tre nyckelramar på följande sätt:

1. Under de första två sekunderna använder en instans av klassen LinearColorKeyFrame för att gradvis ändra färgen från grönt till rött. Linjära nyckelramar som LinearColorKeyFrame skapa en smidig linjär övergång mellan värden.

2. I slutet av nästa halv sekund använder en instans av klassen DiscreteColorKeyFrame för att snabbt ändra färgen från rött till gult. Diskreta nyckelramar som DiscreteColorKeyFrame skapa plötsliga ändringar mellan värden, dvs. färgändringen i den här delen av animeringen sker snabbt och är inte subtil.

3. Under de sista två sekunderna använder en instans av klassen SplineColorKeyFrame för att ändra färgen igen – den här gången från gul tillbaka till grön. Spline-nyckelramar som SplineColorKeyFrame skapar en variabel övergång mellan värden i enlighet med värdena för egenskapen KeySpline. I det här exemplet börjar färgändringen långsamt och ökar exponentiellt mot slutet av tidssegmentet.

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>

Det fullständiga exemplet finns i Exempel på keyframe-animering.

Se även

• Color
• SolidColorBrush
• ColorAnimationUsingKeyFrames
• Key-Frame Översikt av animeringar
• Key-Frame Guideämnen