操作說明:使用主要畫面格建立大小變更的動畫
這個範例示範如何使用主要畫面格建立大小變更的動畫。
範例
下列範例會使用 類別 SizeAnimationUsingKeyFrames ,以動畫顯示 Size 的 ArcSegment 屬性。 這個動畫會以下列方式使用三個主要畫面格:
在動畫的上半秒,使用 類別的 LinearSizeKeyFrame 實例逐漸增加弧線的大小。線性主要畫面格,例如 LinearSizeKeyFrame 建立值之間的平滑線性轉換。
在下半秒結束時,使用 類別的 DiscreteSizeKeyFrame 實例突然增加弧線的大小。不同的主要畫面格,例如 DiscreteSizeKeyFrame 在值之間突然跳躍,也就是說,大小變更會突然發生,而且並不微妙。
在最後兩秒內,使用 類別的 SplineSizeKeyFrame 實例來增加弧線的大小。曲線主要畫面格,例如 SplineSizeKeyFrame 根據 屬性的值 KeySpline 建立值之間的變數轉換。 在此範例中,弧線的大小一開始會緩慢增加,然後在接近時間區段結尾時以指數方式增加。
<!-- This example shows how to use the SizeAnimationUsingKeyFrames to animate the
size of an ArcSegment. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Canvas HorizontalAlignment="Left" Margin="0" >
<!-- Create an arc on the screen that animates its size when it loads. -->
<Path Stroke="Black" StrokeThickness="2" >
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="100,200">
<PathFigure.Segments>
<PathSegmentCollection>
<ArcSegment x:Name="myArcSegment" Size="90,80"
SweepDirection="Clockwise" Point="500,200" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard Name="myBeginStoryBoard">
<Storyboard>
<!-- Animating the Size property uses 3 KeyFrames. -->
<SizeAnimationUsingKeyFrames
Storyboard.TargetName="myArcSegment"
Storyboard.TargetProperty="Size" >
<SizeAnimationUsingKeyFrames.KeyFrames>
<!-- Using a LinearSizeKeyFrame, the size of the arc increases
gradually over the first half second of the animation. -->
<LinearSizeKeyFrame KeyTime="0:0:0.5" Value="120,120" />
<!-- Using a DiscreteSizeKeyFrame, the size increases suddenly
after the first second of the animation. -->
<DiscreteSizeKeyFrame KeyTime="0:0:1" Value="150,150" />
<!-- Using a SplineSizeKeyFrame, the Size increases slowly at first
and then speeds up exponentially. This KeyFrame takes 2 seconds. -->
<SplineSizeKeyFrame KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:3" Value="300,300" />
</SizeAnimationUsingKeyFrames.KeyFrames>
</SizeAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Canvas>
</Page>
如需完整的範例,請參閱主要畫面格動畫範例。
另請參閱
意見反應
https://aka.ms/ContentUserFeedback。
即將登場:在 2024 年,我們將逐步淘汰 GitHub 問題作為內容的意見反應機制,並將它取代為新的意見反應系統。 如需詳細資訊,請參閱:提交並檢視相關的意見反應