操作說明：使用主要畫面格建立雙精度浮點數的動畫
此範例示範如何使用主要畫面格，以動畫顯示採用 Double 的 屬性值。
範例
下列範例會讓矩形橫越畫面移動。 此範例會使用 類別 DoubleAnimationUsingKeyFrames ，以動畫顯示 X 套用至 Rectangle 的 TranslateTransform 屬性。 這個不斷重複的動畫會以下列方式使用三個主要畫面格：
在前三秒內，使用 類別的 LinearDoubleKeyFrame 實例，將矩形沿著路徑以穩定速率從其起始位置移至 500 位置。 線性主要畫面格，例如 LinearDoubleKeyFrame 建立值之間的平滑線性轉換。
在第四秒結束時，使用 類別的 DiscreteDoubleKeyFrame 實例突然將矩形移至下一個位置。 不同的主要畫面格，例如 DiscreteDoubleKeyFrame 在值之間突然跳躍。 在此範例中，矩形位在起始位置，接著會突然出現在 500 位置。
在最後兩秒，使用 類別的 SplineDoubleKeyFrame 實例，將矩形移回其起始位置。 曲線主要畫面格，例如 SplineDoubleKeyFrame 根據 屬性的值 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
{
/// <summary>
/// This example shows how to use the DoubleAnimationUsingKeyFrames class to
/// animate the position of an object.
/// Key frame animations enable you to create complex animations
/// by specifying multiple destination values
/// and controlling the animation's interpolation method.
/// </summary>
public class AltDoubleAnimationUsingKeyFramesExample : Page
{
public AltDoubleAnimationUsingKeyFramesExample()
{
Title = "DoubleAnimationUsingKeyFrames 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());
// Create a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Width = 100;
aRectangle.Height = 100;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 5;
// Create a Canvas to contain and
// position the rectangle.
Canvas containerCanvas = new Canvas();
containerCanvas.Width = 610;
containerCanvas.Height = 300;
containerCanvas.Children.Add(aRectangle);
Canvas.SetTop(aRectangle, 100);
Canvas.SetLeft(aRectangle, 10);
// Create a TranslateTransform to
// move the rectangle.
TranslateTransform animatedTranslateTransform =
new TranslateTransform();
aRectangle.RenderTransform = animatedTranslateTransform;
// Assign the TranslateTransform a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"AnimatedTranslateTransform", animatedTranslateTransform);
// Create a DoubleAnimationUsingKeyFrames to
// animate the TranslateTransform.
DoubleAnimationUsingKeyFrames translationAnimation
= new DoubleAnimationUsingKeyFrames();
translationAnimation.Duration = TimeSpan.FromSeconds(6);
// Animate from the starting position to 500
// over the first second using linear
// interpolation.
translationAnimation.KeyFrames.Add(
new LinearDoubleKeyFrame(
500, // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3))) // KeyTime
);
// Animate from 500 (the value of the previous key frame)
// to 400 at 4 seconds using discrete interpolation.
// Because the interpolation is discrete, the rectangle will appear
// to "jump" from 500 to 400.
translationAnimation.KeyFrames.Add(
new DiscreteDoubleKeyFrame(
400, // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4))) // KeyTime
);
// Animate from 400 (the value of the previous key frame) to 0
// over two seconds, starting at 4 seconds (the key time of the
// last key frame) and ending at 6 seconds.
translationAnimation.KeyFrames.Add(
new SplineDoubleKeyFrame(
0, // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(6)), // KeyTime
new KeySpline(0.6,0.0,0.9,0.0) // KeySpline
)
);
// Set the animation to repeat forever.
translationAnimation.RepeatBehavior = RepeatBehavior.Forever;
// Set the animation to target the X property
// of the object named "AnimatedTranslateTransform."
Storyboard.SetTargetName(translationAnimation, "AnimatedTranslateTransform");
Storyboard.SetTargetProperty(
translationAnimation, new PropertyPath(TranslateTransform.XProperty));
// Create a storyboard to apply the animation.
Storyboard translationStoryboard = new Storyboard();
translationStoryboard.Children.Add(translationAnimation);
// Start the storyboard after the rectangle loads.
aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
{
translationStoryboard.Begin(this);
};
Content = containerCanvas;
}
}
}
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 DoubleAnimationUsingKeyFrames class to
''' animate the position of an object.
''' Key frame animations enable you to create complex animations
''' by specifying multiple destination values
''' and controlling the animation's interpolation method.
''' </summary>
Public Class AltDoubleAnimationUsingKeyFramesExample
Inherits Page
Public Sub New()
Title = "DoubleAnimationUsingKeyFrames 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())
' Create a rectangle.
Dim aRectangle As New Rectangle()
aRectangle.Width = 100
aRectangle.Height = 100
aRectangle.Stroke = Brushes.Black
aRectangle.StrokeThickness = 5
' Create a Canvas to contain and
' position the rectangle.
Dim containerCanvas As New Canvas()
containerCanvas.Width = 610
containerCanvas.Height = 300
containerCanvas.Children.Add(aRectangle)
Canvas.SetTop(aRectangle, 100)
Canvas.SetLeft(aRectangle, 10)
' Create a TranslateTransform to
' move the rectangle.
Dim animatedTranslateTransform As New TranslateTransform()
aRectangle.RenderTransform = animatedTranslateTransform
' Assign the TranslateTransform a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("AnimatedTranslateTransform", animatedTranslateTransform)
' Create a DoubleAnimationUsingKeyFrames to
' animate the TranslateTransform.
Dim translationAnimation As New DoubleAnimationUsingKeyFrames()
translationAnimation.Duration = TimeSpan.FromSeconds(6)
' Animate from the starting position to 500
' over the first second using linear
' interpolation.
translationAnimation.KeyFrames.Add(New LinearDoubleKeyFrame(500, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3)))) ' KeyTime - Target value (KeyValue)
' Animate from 500 (the value of the previous key frame)
' to 400 at 4 seconds using discrete interpolation.
' Because the interpolation is discrete, the rectangle will appear
' to "jump" from 500 to 400.
translationAnimation.KeyFrames.Add(New DiscreteDoubleKeyFrame(400, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4)))) ' KeyTime - Target value (KeyValue)
' Animate from 400 (the value of the previous key frame) to 0
' over two seconds, starting at 4 seconds (the key time of the
' last key frame) and ending at 6 seconds.
translationAnimation.KeyFrames.Add(New SplineDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(6)), New KeySpline(0.6,0.0,0.9,0.0))) ' KeySpline - KeyTime - Target value (KeyValue)
' Set the animation to repeat forever.
translationAnimation.RepeatBehavior = RepeatBehavior.Forever
' Set the animation to target the X property
' of the object named "AnimatedTranslateTransform."
Storyboard.SetTargetName(translationAnimation, "AnimatedTranslateTransform")
Storyboard.SetTargetProperty(translationAnimation, New PropertyPath(TranslateTransform.XProperty))
' Create a storyboard to apply the animation.
Dim translationStoryboard As New Storyboard()
translationStoryboard.Children.Add(translationAnimation)
' Start the storyboard after the rectangle loads.
AddHandler aRectangle.Loaded, Sub(sender As Object, e As RoutedEventArgs) translationStoryboard.Begin(Me)
Content = containerCanvas
End Sub
End Class
End Namespace
<!-- This example shows how to use the DoubleAnimationUsingKeyFrames to
animate the position of an object.
Key frame animations enable you to create complex animations
by specifying multiple destination values
and controlling the animation's interpolation method.
-->
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DoubleAnimationUsingKeyFrames Example"
Background="White" Margin="20">
<Canvas Width="610" Height="300">
<!-- The position of this rectangle is animated using
a key frame animation. -->
<Rectangle
Canvas.Top="100"
Canvas.Left="10"
Height="100"
Width="100"
Stroke="Black"
StrokeThickness="5">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="AnimatedTranslateTransform" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform.X property using 3 KeyFrames
which animates the rectangle along a straight line.
This animation repeats indefinitely. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="AnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:6"
RepeatBehavior="Forever">
<!-- Using a LinearDoubleKeyFrame, the rectangle moves
steadily from its starting position to 500 over
the first 3 seconds. -->
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:3" />
<!-- Using a DiscreteDoubleKeyFrame, the rectangle suddenly
appears at 400 after the fourth second of the animation. -->
<DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4" />
<!-- Using a SplineDoubleKeyFrame, the rectangle moves
back to its starting point. The
animation starts out slowly at first and then speeds up.
This KeyFrame ends after the 6th
second. -->
<SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:6" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
</Page>
如需完整的範例，請參閱主要畫面格動畫範例。
為了與其他動畫範例一致，此範例的程式碼版本會使用 Storyboard 物件來套用 DoubleAnimationUsingKeyFrames 。 或者，在程式碼中套用單一動畫時，使用 BeginAnimation 方法比較簡單，而不是使用 Storyboard 。 如需範例，請參閱 不使用分鏡腳本而建立屬性的動畫。
另請參閱
意見反應
即將登場：在 2024 年，我們將逐步淘汰 GitHub 問題作為內容的意見反應機制，並將它取代為新的意見反應系統。 如需詳細資訊，請參閱：https://aka.ms/ContentUserFeedback。
提交並檢視相關的意見反應