Procedura: animare il colore utilizzando fotogrammi chiave
In questo esempio viene illustrato come animare l'oggetto Color di un SolidColorBrush oggetto usando fotogrammi chiave.
Esempio
Nell'esempio seguente viene utilizzata la ColorAnimationUsingKeyFrames classe per animare la Color proprietà di un oggetto SolidColorBrush. Questa animazione usa tre fotogrammi chiave nel modo seguente:
Durante i primi due secondi, usa un'istanza della LinearColorKeyFrame classe per modificare gradualmente il colore da verde a rosso. Fotogrammi chiave lineari come LinearColorKeyFrame creare una transizione lineare uniforme tra valori.
Durante la fine della seconda metà successiva, usa un'istanza della DiscreteColorKeyFrame classe per modificare rapidamente il colore da rosso a giallo. Fotogrammi chiave discreti come DiscreteColorKeyFrame creare cambiamenti improvvisi tra valori, ovvero, la modifica del colore in questa parte dell'animazione si verifica rapidamente e non è sottile.
Durante i due secondi finali, usa un'istanza della SplineColorKeyFrame classe per modificare nuovamente il colore, questa volta dal giallo al verde. Fotogrammi chiave spline come SplineColorKeyFrame creare una transizione di variabile tra valori in base ai valori della KeySpline proprietà. In questo esempio, il cambio di colore inizia lentamente, quindi accelera in modo esponenziale verso la fine del segmento temporale.
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>
Per l'esempio completo, vedere Esempio di animazione con fotogrammi chiave.
Vedi anche
Collabora con noi su GitHub
L'origine di questo contenuto è disponibile in GitHub, in cui è anche possibile creare ed esaminare i problemi e le richieste pull. Per ulteriori informazioni, vedere la guida per i collaboratori.
.NET Desktop feedback
Commenti e suggerimenti
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedere https://aka.ms/ContentUserFeedback.
Invia e visualizza il feedback per