如何:使用主要畫面格建立物件的動畫
這個範例示範如何使用主要畫面格,以動畫顯示 物件,在此範例中是 Background 控制項的 Page 屬性。
範例
下列範例會使用 類別 ObjectAnimationUsingKeyFrames ,以動畫顯示控制項屬性的 Page 色彩變更 Background 。 範例動畫會定期變更為不同的背景筆刷。 此動畫會使用 類別 DiscreteObjectKeyFrame 來建立三個不同的主要畫面格。 動畫會以下列方式使用主要畫面格:
在第一秒結束時,以動畫顯示 類別的 LinearGradientBrush 實例。 本範例的這一節會將線性漸層套用至背景色彩,讓色彩從黃色轉換為橙色到紅色。
在下一秒結束時,以動畫顯示 類別的 RadialGradientBrush 實例。 本範例的這個區段會將星形漸層套用至背景色彩,讓色彩從白色轉換為藍色到黑色。
在第三秒結束時,以動畫顯示 類別的 DrawingBrush 實例。 本範例的這一節會將棋盤模式套用至背景。
動畫會再次開始,並無限期地重複。
注意
DiscreteObjectKeyFrame 是您可以搭配 ObjectAnimationUsingKeyFrames 類別使用的唯一主要畫面格類型。 例如 DiscreteObjectKeyFrame 在值中建立突然變更的主要畫面格,也就是此範例中的色彩變更突然發生。
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Page.Triggers>
<EventTrigger RoutedEvent="Page.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- ObjectAnimationUsingKeyFrames is used to animate properties that take
an object as a value. This animation lasts for 4 seconds using 3 KeyFrames which
swap different brush objects at regular intervals, making the background of the Page
change. -->
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Duration="0:0:4" RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<!-- Note: Only discrete interpolation (DiscreteObjectKeyFrame) is available for
use with ObjectAnimationUsingKeyFrames which merely swaps objects according to
a specified timeline. Other types of interpolation are too problematic to apply
to objects. -->
<!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly changes
to a LinearGradientBrush after the first second of the animation. -->
<DiscreteObjectKeyFrame KeyTime="0:0:1">
<DiscreteObjectKeyFrame.Value>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Orange" Offset="0.5" />
<GradientStop Color="Red" Offset="1.0" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly changes
to a RadialGradientBrush after the second second of the animation. -->
<DiscreteObjectKeyFrame KeyTime="0:0:2">
<DiscreteObjectKeyFrame.Value>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<RadialGradientBrush.GradientStops>
<GradientStop Color="White" Offset="0.0" />
<GradientStop Color="MediumBlue" Offset="0.5" />
<GradientStop Color="Black" Offset="1.0" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly
changes to a DrawingBrush (creates a checkerboard pattern) after the
third second of the animation. -->
<DiscreteObjectKeyFrame KeyTime="0:0:3">
<DiscreteObjectKeyFrame.Value>
<DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="White">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,1,1" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing Brush="Black"
Geometry="M 0,0 L0,0.5 0.5,0.5 0.5,1 1,1 1,0.5 0.5,0.5 0.5,0" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Page.Triggers>
</Page>
如需完整的範例,請參閱主要畫面格動畫範例。
另請參閱
意見反應
https://aka.ms/ContentUserFeedback。
即將登場:在 2024 年,我們將逐步淘汰 GitHub 問題作為內容的意見反應機制,並將它取代為新的意見反應系統。 如需詳細資訊,請參閱:提交並檢視相關的意見反應