方法: キー フレームを使用して色をアニメーション化する
この例では、キー フレームを使用して SolidColorBrush の Color をアニメーション化する方法を示します。
例
次の例では、ColorAnimationUsingKeyFrames クラスを使用して、SolidColorBrush の Color プロパティをアニメーション化します。 このアニメーションは、次の方法で 3 つのキー フレームを使用します。
最初の 2 秒間は、LinearColorKeyFrame クラスのインスタンスを使用して、緑から赤へ徐々に色を変化させます。 LinearColorKeyFrame のような線形キー フレームは、ある値から次の値への滑らかで直線的な遷移を作成します。
次の 0.5 秒間の後わりに、DiscreteColorKeyFrame クラスのインスタンスを使用して、赤から黄色へすばやく色を変化させます。 DiscreteColorKeyFrame のような不連続キー フレームは、ある値から次の値への突然の変化を作成します。つまり、この部分のアニメーションの色の変化は急速に行われ、滑らかではありません。
最後の 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>
サンプル全体については、「キーフレーム アニメーションのサンプル」を参照してください。
関連項目
GitHub で Microsoft と共同作業する
このコンテンツのソースは GitHub にあります。そこで、issue や pull request を作成および確認することもできます。 詳細については、共同作成者ガイドを参照してください。
.NET Desktop feedback
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示