Freigeben über

Vorgehensweise: Animieren von Farben mithilfe von Keyframes

Dieses Beispiel zeigt, wie Sie die Color eines SolidColorBrush mithilfe von Keyframes animieren können.

Beispiel

Im folgenden Beispiel wird die ColorAnimationUsingKeyFrames-Klasse verwendet, um die Color-Eigenschaft einer SolidColorBrush zu animieren. Diese Animation verwendet drei Keyframes auf folgende Weise:

  1. In den ersten zwei Sekunden wird eine Instanz der LinearColorKeyFrame-Klasse verwendet, um die Farbe allmählich von Grün zu Rot zu ändern. Lineare Keyframes wie LinearColorKeyFrame sorgen für einen reibungslosen linearen Übergang zwischen Werten.

  2. Am Ende der nächsten halben Sekunde wird eine Instanz der DiscreteColorKeyFrame-Klasse verwendet, um die Farbe schnell von Rot in Gelb zu ändern. Diskrete Keyframes wie DiscreteColorKeyFrame erzeugen plötzliche Änderungen zwischen Werten, das heißt, die Farbänderung in diesem Teil der Animation erfolgt schnell und ist nicht subtil.

  3. In den letzten zwei Sekunden wird eine Instanz der SplineColorKeyFrame-Klasse verwendet, um die Farbe erneut zu ändern: in diesem Fall von Gelb in Grün. Spline-Keyframes wie SplineColorKeyFrame erzeugen einen variablen Übergang zwischen den Werten entsprechend den Werten der KeySpline-Eigenschaft. In diesem Beispiel beginnt die Farbänderung langsam und beschleunigt sich exponentiell gegen Ende des Zeitsegments.

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>

Das vollständige Beispiel finden Sie unter KeyFrame-Animationsbeispiel.

Siehe auch

  • Last updated on