Storyboard 類別
定義
重要
部分資訊涉及發行前產品，在發行之前可能會有大幅修改。 Microsoft 對此處提供的資訊，不做任何明確或隱含的瑕疵擔保。
使用時間軸控制動畫，並提供其子動畫的物件和屬性目標資訊。
public ref class Storyboard sealed : Timeline/// [Microsoft.UI.Xaml.Markup.ContentProperty(Name="Children")]
/// [Windows.Foundation.Metadata.Activatable(65536, "Microsoft.UI.Xaml.WinUIContract")]
/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.UI.Xaml.WinUIContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
class Storyboard final : Timeline[Microsoft.UI.Xaml.Markup.ContentProperty(Name="Children")]
[Windows.Foundation.Metadata.Activatable(65536, "Microsoft.UI.Xaml.WinUIContract")]
[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.WinUIContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
public sealed class Storyboard : TimelinePublic NotInheritable Class Storyboard
Inherits Timeline<Storyboard ...>
oneOrMoreChildTimelines
</Storyboard>
- 繼承
- 屬性
範例
下列範例示範如何使用 Begin、 Stop、 Pause和 Resume 方法來控制腳本 (動畫的播放) 。 一組按鈕可讓使用者呼叫這些方法。
<StackPanel x:Name="LayoutRoot" >
<StackPanel.Resources>
<Storyboard x:Name="myStoryboard">
<DoubleAnimation From="1" To="6" Duration="00:00:6"
Storyboard.TargetName="rectScaleTransform"
Storyboard.TargetProperty="ScaleY">
<DoubleAnimation.EasingFunction>
<BounceEase Bounces="2" EasingMode="EaseOut"
Bounciness="2" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</StackPanel.Resources>
<!-- Button that begins animation. -->
<Button Click="Animation_Begin"
Margin="2" Content="Begin" />
<!-- Button that pauses Animation. -->
<Button Click="Animation_Pause"
Margin="2" Content="Pause" />
<!-- Button that resumes Animation. -->
<Button Click="Animation_Resume"
Margin="2" Content="Resume" />
<!-- Button that stops Animation. Stopping the animation
returns the ellipse to its original location. -->
<Button Click="Animation_Stop"
Margin="2" Content="Stop" />
<Rectangle Fill="Blue" Width="200" Height="30">
<Rectangle.RenderTransform>
<ScaleTransform x:Name="rectScaleTransform" />
</Rectangle.RenderTransform>
</Rectangle>
</StackPanel>
private void Animation_Begin(object sender, RoutedEventArgs e)
{
myStoryboard.Begin();
}
private void Animation_Pause(object sender, RoutedEventArgs e)
{
myStoryboard.Pause();
}
private void Animation_Resume(object sender, RoutedEventArgs e)
{
myStoryboard.Resume();
}
private void Animation_Stop(object sender, RoutedEventArgs e)
{
myStoryboard.Stop();
}
//using Windows.UI.Xaml.Media.Animation;
//using Windows.UI.Xaml.Shapes;
//using Windows.UI
private void Create_And_Run_Animation(object sender, RoutedEventArgs e)
{
// Create a red rectangle that will be the target
// of the animation.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 200;
myRectangle.Height = 200;
SolidColorBrush myBrush = new SolidColorBrush(Colors.Red);
myRectangle.Fill = myBrush;
// Create the transform
TranslateTransform moveTransform = new TranslateTransform();
moveTransform.X = 0;
moveTransform.Y = 0;
myRectangle.RenderTransform = moveTransform;
// Add the rectangle to the tree.
LayoutRoot.Children.Add(myRectangle);
// Create a duration of 2 seconds.
Duration duration = new Duration(TimeSpan.FromSeconds(2));
// Create two DoubleAnimations and set their properties.
DoubleAnimation myDoubleAnimationX = new DoubleAnimation();
DoubleAnimation myDoubleAnimationY = new DoubleAnimation();
myDoubleAnimationX.Duration = duration;
myDoubleAnimationY.Duration = duration;
Storyboard justintimeStoryboard = new Storyboard();
justintimeStoryboard.Duration = duration;
justintimeStoryboard.Children.Add(myDoubleAnimationX);
justintimeStoryboard.Children.Add(myDoubleAnimationY);
Storyboard.SetTarget(myDoubleAnimationX, moveTransform);
Storyboard.SetTarget(myDoubleAnimationY, moveTransform);
// Set the X and Y properties of the Transform to be the target properties
// of the two respective DoubleAnimations.
Storyboard.SetTargetProperty(myDoubleAnimationX, "X");
Storyboard.SetTargetProperty(myDoubleAnimationY, "Y");
myDoubleAnimationX.To = 200;
myDoubleAnimationY.To = 200;
// Make the Storyboard a resource.
LayoutRoot.Resources.Add("justintimeStoryboard", justintimeStoryboard);
// Begin the animation.
justintimeStoryboard.Begin();
}
備註
分鏡腳本是 分鏡腳本動畫概念中的重要類別。 如需概念的詳細資訊，請參閱 分鏡腳本動畫。
分鏡腳本用於下列屬性：
這些屬性不是定義分鏡腳本的唯一位置。 分鏡腳本用於分鏡腳本動畫的一般方式是分鏡腳本定義于 Resources 集合中， (Application.Resources 或 FrameworkElement.Resources，或可能是自訂控制項的 Generic.xaml 之類的檔案內的資源) 。 每當它定義為 XAML 資源時，您應該一律將 x：Name 屬性值 指派給分鏡腳本。 然後，您可以在程式碼後置中將名稱參考為程式設計變數。 您需要此參考，才能實際執行 Storyboard 包含的動畫，方法是在該 Storyboard 實例上呼叫 Begin 方法。 分鏡腳本也有其他控制方法，例如 Stop ，可在之後控制動畫。
分鏡腳本會繼承 時間軸中的數個屬性。 這些屬性可以套用至 Storyboard 或其中一個動畫， (Children 集合) 。 在主要分鏡腳本上設定 時間軸 屬性，而不是在每個動畫上設定優點和缺點。 如需詳細資訊，請參閱腳本動畫。
如果您使用其中一個主題動畫，您也需要分鏡腳本來控制新增至控制項或 UI 的預先定義動畫。 主題動畫沒有內嵌觸發點，因此您必須在分鏡腳本中包含主題動畫做為 Children。 如果使用 Storyboard 做為 VisualState.Storyboard 值，則動畫會在載入該視覺狀態時執行。 或者，如果它位於 VisualTransition.Storyboard中，動畫會在視覺狀態管理員偵測到該轉換時執行。 這些是使用主題動畫最常見的方式，但您也可以將主題動畫放在鬆散的 Storyboard 資源中，並藉由呼叫 Begin明確啟動動畫。
XAML 附加屬性
分鏡腳本是數個 XAML 附加屬性的主機服務類別。 這些可讓 Storyboard 控制子動畫至每個目標個別的目標元素和目標屬性，同時仍遵循與父系相同的控制時間軸和觸發機制。
為了支援 XAML 處理器存取附加屬性，以及公開對等 的 get 和 set 作業給程式碼，每個 XAML 附加屬性都有一對 Get 和 Set 存取子方法。 在程式碼中取得或設定值的另一種方式是使用相依性屬性系統，呼叫 GetValue 或 SetValue ，並將識別碼欄位傳遞為相依性屬性識別碼。
| 附加屬性 | 描述 |
|---|---|
| TargetName | 取得或設定要繪製動畫之物件的名稱。
Name/x：Name 屬性字串的意義是由 XAML 名稱範圍概念所控制。 對於大部分以動畫為目標的案例，您不需要擔心 XAML 命名範圍的影響，但如果您嘗試以範本元件為目標，或是使用 XamlReader.Load 建立的物件，後續新增至物件樹狀結構，您可能會遇到 XAML 名稱解析問題。 如需詳細資訊，請參閱 XAML 命名範圍。 |
| TargetProperty | 取得或設定應該繪製的屬性。
|
建構函式
| Storyboard() |
初始化 Storyboard 類別的新實例。 |
屬性
| AutoReverse |
取得或設定值，其中該值指出時間軸是否會在完成向前反覆項目後反向播放。 (繼承來源 Timeline) |
| BeginTime |
取得或設定這個 時間軸 應該開始的時間。 (繼承來源 Timeline) |
| Children |
取得子 Timeline 物件的集合。 |
| Dispatcher |
一律會在 |
| DispatcherQueue |
|
| Duration |
取得或設定這個時間表播放的時間長度 (不計算重複次數)。 (繼承來源 Timeline) |
| FillBehavior |
取得或設定值，指定動畫在到達其使用期間結束時的行為。 (繼承來源 Timeline) |
| RepeatBehavior |
取得或設定這個時間軸的重複行為。 (繼承來源 Timeline) |
| SpeedRatio |
取得或設定相對於其父系的速率，此時會進行這個 時間軸。 (繼承來源 Timeline) |
| TargetNameProperty |
識別 Storyboard.TargetName XAML 附加屬性。 |
| TargetPropertyProperty |
識別 Storyboard.TargetProperty XAML 附加屬性。 |
附加屬性
| TargetName |
取得或設定要繪製動畫之物件的名稱。 |
| TargetProperty |
取得或設定應該繪製的屬性。 |
方法
事件
| Completed |
發生于 Storyboard 物件已完成播放時。 (繼承來源 Timeline) |