方法: キー フレームを使用して色をアニメーション化する

この例では、キー フレームを使用して SolidColorBrush の Color をアニメーション化する方法を示します。

例

次の例では、ColorAnimationUsingKeyFrames クラスを使用して、SolidColorBrush の Color プロパティをアニメーション化します。 このアニメーションは、次の方法で 3 つのキー フレームを使用します。

1. 最初の 2 秒間は、LinearColorKeyFrame クラスのインスタンスを使用して、緑から赤へ徐々に色を変化させます。 LinearColorKeyFrame のような線形キー フレームは、ある値から次の値への滑らかで直線的な遷移を作成します。

2. 次の 0.5 秒間の後わりに、DiscreteColorKeyFrame クラスのインスタンスを使用して、赤から黄色へすばやく色を変化させます。 DiscreteColorKeyFrame のような不連続キー フレームは、ある値から次の値への突然の変化を作成します。つまり、この部分のアニメーションの色の変化は急速に行われ、滑らかではありません。

3. 最後の 2 秒間は、SplineColorKeyFrame クラスのインスタンスを使用して、色を再度変更します (この例では黄色から緑へ戻ります)。 SplineColorKeyFrame のようなスプライン キー フレームは、KeySpline プロパティの値に従って、ある値から次の値への可変遷移を作成します。 この例では、色の変化は最初はゆっくりしていますが、時間セグメントの終点に向かって急激に速くなります。

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>

サンプル全体については、「キーフレーム アニメーションのサンプル」を参照してください。

関連項目

• Color
• SolidColorBrush
• ColorAnimationUsingKeyFrames
• キー フレーム アニメーションの概要
• キー フレームに関する「方法」トピック