Procedura: animare un rettangolo utilizzando fotogrammi chiave
In questo esempio viene illustrato come animare la Rect proprietà di un RectangleGeometry oggetto usando fotogrammi chiave.
Esempio
Nell'esempio seguente viene utilizzata la RectAnimationUsingKeyFrames classe per animare la Rect proprietà di un oggetto RectangleGeometry. Questa animazione usa tre fotogrammi chiave nel modo seguente:
Durante i primi due secondi, usa un'istanza della LinearRectKeyFrame classe per animare una modifica graduale della posizione, della larghezza e dell'altezza di un rettangolo. Fotogrammi chiave lineari come LinearRectKeyFrame creare una transizione lineare uniforme tra valori.
Durante la fine della seconda metà successiva, usa un'istanza della DiscreteRectKeyFrame classe per ridurre improvvisamente l'altezza del rettangolo. Fotogrammi chiave discreti come DiscreteRectKeyFrame creare cambiamenti improvvisi tra valori, ovvero la diminuzione dell'altezza si verifica rapidamente e non è sottile.
Durante i due secondi finali, usa un'istanza della SplineRectKeyFrame classe per ripristinare le dimensioni e la posizione originali del rettangolo. Fotogrammi chiave spline come SplineRectKeyFrame creare una transizione di variabile tra valori in base ai valori della KeySpline proprietà. In questo esempio l'animazione 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
{
/// <summary>
/// This example shows how to use the RectAnimationUsingKeyFrames class to
/// animate the position and size of a rectangle.
/// Key frame animations enable you to create complex animations
/// by specifying multiple destination values
/// and controlling the animation's interpolation method.
/// </summary>
public class RectAnimationUsingKeyFramesExample : Page
{
public RectAnimationUsingKeyFramesExample()
{
Title = "RectAnimationUsingKeyFrames 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;
//Add the Path Element
Path myPath = new Path();
myPath.Stroke = Brushes.Black;
myPath.Fill = Brushes.LemonChiffon;
myPath.StrokeThickness = 1;
// Create a RectangleGeometry to specify the Path data.
RectangleGeometry myRectangleGeometry = new RectangleGeometry();
myRectangleGeometry.Rect = new Rect(0, 200, 100, 100);
myPath.Data = myRectangleGeometry;
myStackPanel.Children.Add(myPath);
// Assign the TranslateTransform a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"AnimatedRectangleGeometry", myRectangleGeometry);
// Create a RectAnimationUsingKeyFrames to
// animate the RectangleGeometry.
RectAnimationUsingKeyFrames rectAnimation
= new RectAnimationUsingKeyFrames();
rectAnimation.Duration = TimeSpan.FromSeconds(6);
// Set the animation to repeat forever.
rectAnimation.RepeatBehavior = RepeatBehavior.Forever;
// Animate position, width, and height in first 2 seconds. LinearRectKeyFrame creates
// a smooth, linear animation between values.
rectAnimation.KeyFrames.Add(
new LinearRectKeyFrame(
new Rect(600,50,200,50), // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2))) // KeyTime
);
// In the next half second, change height to 10. DiscreteRectKeyFrame creates a
// sudden "jump" between values.
rectAnimation.KeyFrames.Add(
new DiscreteRectKeyFrame(
new Rect(600, 50, 200, 10), // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5))) // KeyTime
);
// In the final 2 seconds of the animation, go back to the starting position, width, and height.
// Spline key frames like SplineRectKeyFrame 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.
rectAnimation.KeyFrames.Add(
new SplineRectKeyFrame(
new Rect(0, 200, 100, 100), // 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 target the Rect property
// of the object named "AnimatedRectangleGeometry."
Storyboard.SetTargetName(rectAnimation, "AnimatedRectangleGeometry");
Storyboard.SetTargetProperty(
rectAnimation, new PropertyPath(RectangleGeometry.RectProperty));
// Create a storyboard to apply the animation.
Storyboard rectStoryboard = new Storyboard();
rectStoryboard.Children.Add(rectAnimation);
// Start the storyboard after the rectangle loads.
myPath.Loaded += delegate(object sender, RoutedEventArgs e)
{
rectStoryboard.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
''' <summary>
''' This example shows how to use the RectAnimationUsingKeyFrames class to
''' animate the position and size of a rectangle.
''' Key frame animations enable you to create complex animations
''' by specifying multiple destination values
''' and controlling the animation's interpolation method.
''' </summary>
Public Class RectAnimationUsingKeyFramesExample
Inherits Page
Public Sub New()
Title = "RectAnimationUsingKeyFrames 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
'Add the Path Element
Dim myPath As New Path()
myPath.Stroke = Brushes.Black
myPath.Fill = Brushes.LemonChiffon
myPath.StrokeThickness = 1
' Create a RectangleGeometry to specify the Path data.
Dim myRectangleGeometry As New RectangleGeometry()
myRectangleGeometry.Rect = New Rect(0, 200, 100, 100)
myPath.Data = myRectangleGeometry
myStackPanel.Children.Add(myPath)
' Assign the TranslateTransform a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("AnimatedRectangleGeometry", myRectangleGeometry)
' Create a RectAnimationUsingKeyFrames to
' animate the RectangleGeometry.
Dim rectAnimation As New RectAnimationUsingKeyFrames()
rectAnimation.Duration = TimeSpan.FromSeconds(6)
' Set the animation to repeat forever.
rectAnimation.RepeatBehavior = RepeatBehavior.Forever
' Animate position, width, and height in first 2 seconds. LinearRectKeyFrame creates
' a smooth, linear animation between values.
rectAnimation.KeyFrames.Add(New LinearRectKeyFrame(New Rect(600,50,200,50), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)))) ' KeyTime - Target value (KeyValue)
' In the next half second, change height to 10. DiscreteRectKeyFrame creates a
' sudden "jump" between values.
rectAnimation.KeyFrames.Add(New DiscreteRectKeyFrame(New Rect(600, 50, 200, 10), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5)))) ' KeyTime - Target value (KeyValue)
' In the final 2 seconds of the animation, go back to the starting position, width, and height.
' Spline key frames like SplineRectKeyFrame 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.
rectAnimation.KeyFrames.Add(New SplineRectKeyFrame(New Rect(0, 200, 100, 100), 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 target the Rect property
' of the object named "AnimatedRectangleGeometry."
Storyboard.SetTargetName(rectAnimation, "AnimatedRectangleGeometry")
Storyboard.SetTargetProperty(rectAnimation, New PropertyPath(RectangleGeometry.RectProperty))
' Create a storyboard to apply the animation.
Dim rectStoryboard As New Storyboard()
rectStoryboard.Children.Add(rectAnimation)
' Start the storyboard after the rectangle loads.
AddHandler myPath.Loaded, Sub(sender As Object, e As RoutedEventArgs) rectStoryboard.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">
<Path Stroke="Black" StrokeThickness="1" Fill="LemonChiffon">
<Path.Data>
<RectangleGeometry x:Name="myRectangleGeometry" Rect="0,200,100,100" />
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the Rect property of the RectangleGeometry which causes the
rectangle to animate its position as well as its width and height. -->
<RectAnimationUsingKeyFrames
Storyboard.TargetName="myRectangleGeometry"
Storyboard.TargetProperty ="Rect"
Duration="0:0:6" FillBehavior="HoldEnd" RepeatBehavior="Forever">
<!-- Animate position, width, and height in first 2 seconds. LinearRectKeyFrame creates
a smooth, linear animation between values. -->
<LinearRectKeyFrame Value="600,50,200,50" KeyTime="0:0:2" />
<!-- In the next half second, change height to 10. DiscreteRectKeyFrame creates a
sudden "jump" between values. -->
<DiscreteRectKeyFrame Value="600,50,200,10" KeyTime="0:0:2.5" />
<!-- In the final 2 seconds of the animation, go back to the starting position, width, and height.
Spline key frames like SplineRectKeyFrame 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.-->
<SplineRectKeyFrame Value="0,200,100,100" KeyTime="0:0:4.5" KeySpline="0.6,0.0 0.9,0.00" />
</RectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</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