Jak animovat barvu pomocí klíčových snímků
Tento příklad ukazuje, jak animovat Color u SolidColorBrush pomocí klíčových snímků.
Příklad
Následující příklad používá třídu ColorAnimationUsingKeyFrames pro animaci vlastnosti Color prvku SolidColorBrush. Tato animace používá tři klíčové snímky následujícím způsobem:
Během prvních dvou sekund používá instanci třídy LinearColorKeyFrame k postupné změně barvy ze zelené na červenou. Lineární klíčové snímky, jako je LinearColorKeyFrame, zajišťují hladký lineární přechod mezi hodnotami.
Na konci další poloviny sekundy používá instanci třídy DiscreteColorKeyFrame k rychlé změně barvy z červené na žlutou. Diskrétní klíčové snímky, jako je DiscreteColorKeyFrame, vytvářejí náhlé změny mezi hodnotami, to znamená, že změna barvy v této části animace probíhá rychle a není jemná.
Během posledních dvou sekund použije instanci třídy SplineColorKeyFrame k opětovné změně barvy – tentokrát ze žluté na zelenou. Klíčové rámce spline, jako je SplineColorKeyFrame, vytvářejí proměnný přechod mezi hodnotami podle hodnot vlastnosti KeySpline. V tomto příkladu začíná změna barvy pomalu a exponenciálně se zrychluje směrem ke konci časového segmentu.
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>
Kompletní ukázku najdete v tématu ukázka animace klíčového rámce.
Viz také
Spolupracujte s námi na GitHubu
Zdroj tohoto obsahu najdete na GitHubu, kde můžete také vytvářet a kontrolovat problémy a žádosti o přijetí změn. Další informace najdete v našem průvodci pro přispěvatele.
.NET Desktop feedback