Storyboard 類別

定義

命名空間:

Windows.UI.Xaml.Media.Animation

使用時間軸控制動畫，並提供其子動畫的物件和屬性目標資訊。

public ref class Storyboard sealed : Timeline

/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="Children")]
/// [Windows.Foundation.Metadata.Activatable(65536, "Windows.Foundation.UniversalApiContract")]
class Storyboard final : Timeline

[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="Children")]
[Windows.Foundation.Metadata.Activatable(65536, "Windows.Foundation.UniversalApiContract")]
public sealed class Storyboard : Timeline

Public NotInheritable Class Storyboard
Inherits Timeline

<Storyboard ...>
  oneOrMoreChildTimelines
</Storyboard>

繼承

Object Platform::Object IInspectable DependencyObject Timeline Storyboard

屬性

ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Windows 需求

裝置系列	Windows 10 (已於 10.0.10240.0 引進)
API contract	Windows.Foundation.UniversalApiContract (已於 v1.0 引進)

範例

下列範例示範如何使用 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();
}

Private Sub Animation_Begin(sender As Object, e As RoutedEventArgs)
    myStoryboard.Begin()
End Sub

Private Sub Animation_Pause(sender As Object, e As RoutedEventArgs)
    myStoryboard.Pause()
End Sub

Private Sub Animation_Resume(sender As Object, e As RoutedEventArgs)
    myStoryboard.Resume()
End Sub

Private Sub Animation_Stop(sender As Object, e As RoutedEventArgs)
    myStoryboard.Stop()
End Sub

//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();
}

' need Imports for Windows.UI.Xaml.Shapes, Windows.UI.Media.Animation, Windows.UI
Private Sub Create_And_Run_Animation(sender As Object, e As RoutedEventArgs)
    ' Create a red rectangle that will be the target
    ' of the animation.
    Dim myRectangle As Rectangle = New Rectangle
    myRectangle.Width = 200
    myRectangle.Height = 200
    Dim myBrush As SolidColorBrush = New SolidColorBrush(Colors.Red)
    myRectangle.Fill = myBrush

   ' Create the transform
    Dim moveTransform As TranslateTransform = 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.
    Dim duration As Duration = New Duration(TimeSpan.FromSeconds(2))
    ' Create two DoubleAnimations and set their properties.
    Dim myDoubleAnimationX As DoubleAnimation = New DoubleAnimation
    Dim myDoubleAnimationY As DoubleAnimation = New DoubleAnimation
    myDoubleAnimationX.Duration = duration
    myDoubleAnimationY.Duration = duration
    Dim justintimeStoryboard As Storyboard = 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()
End Sub

備註

分鏡腳本是 分鏡腳本動畫概念中的重要類別。 如需概念的詳細資訊，請參閱 分鏡腳本動畫。

分鏡腳本用於下列屬性：

• VisualState.Storyboard
• VisualTransition.Storyboard
• BeginStoryboard.Storyboard

這些屬性不是定義分鏡腳本的唯一位置。 分鏡腳本用於分鏡腳本動畫的一般方式是分鏡腳本定義于 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明確啟動動畫。 如需如何使用主題動畫的詳細資訊，請參閱 快速入門：使用媒體櫃動畫 或 視覺狀態的分鏡動畫製作 UI 的動畫。

XAML 附加屬性

分鏡腳本是數個 XAML 附加屬性的主機服務類別。 這些可讓 Storyboard 控制子動畫至每個目標個別的目標元素和目標屬性，同時仍遵循與父系相同的控制時間軸和觸發機制。

為了支援 XAML 處理器存取附加屬性，以及公開對等 的 get 和 set 作業給程式碼，每個 XAML 附加屬性都有一對 Get 和 Set 存取子方法。 在程式碼中取得或設定值的另一種方式是使用相依性屬性系統，呼叫 GetValue 或 SetValue ，並將識別碼欄位傳遞為相依性屬性識別碼。

附加屬性	描述
TargetName	取得或設定要繪製動畫之物件的名稱。
TargetProperty	取得或設定應該繪製的屬性。

建構函式

Storyboard()

初始化 Storyboard 類別的新實例。

屬性

AutoReverse	取得或設定值，其中該值指出時間軸是否會在完成向前反覆項目後反向播放。 (繼承來源 Timeline)
BeginTime	取得或設定這個 時間軸 應該開始的時間。 (繼承來源 Timeline)
Children	取得子 Timeline 物件的集合。
Dispatcher	取得與此物件相關聯的 CoreDispatcher 。 CoreDispatcher代表可以存取 UI 執行緒上DependencyObject的功能，即使程式碼是由非 UI 執行緒起始也一樣。 (繼承來源 DependencyObject)
Duration	取得或設定這個時間表播放的時間長度 (不計算重複次數)。 (繼承來源 Timeline)
FillBehavior	取得或設定值，指定動畫在到達其使用期間結束時的行為。 (繼承來源 Timeline)
RepeatBehavior	取得或設定這個時間軸的重複行為。 (繼承來源 Timeline)
SpeedRatio	取得或設定相對於其父系的速率，此時會進行這個 時間軸。 (繼承來源 Timeline)
TargetNameProperty	識別 Storyboard.TargetName XAML 附加屬性。
TargetPropertyProperty	識別 Storyboard.TargetProperty XAML 附加屬性。

附加屬性

TargetName	取得或設定要繪製動畫之物件的名稱。
TargetProperty	取得或設定應該繪製的屬性。

方法

Begin()	起始與分鏡腳本相關聯的動畫集。
ClearValue(DependencyProperty)	清除相依性屬性的本機值。 (繼承來源 DependencyObject)
GetAnimationBaseValue(DependencyProperty)	傳回針對相依性屬性所建立的任何基底值，如果動畫未使用中，則會套用。 (繼承來源 DependencyObject)
GetCurrentState()	取得 分鏡腳本的時鐘狀態。
GetCurrentTime()	取得 分鏡腳本的目前動畫時鐘時間。
GetTargetName(Timeline)	從目標專案取得 Storyboard.TargetName XAML 附加屬性的值。
GetTargetProperty(Timeline)	從目標專案取得 Storyboard.TargetProperty XAML 附加屬性的值。
GetValue(DependencyProperty)	從 DependencyObject傳回相依性屬性的目前有效值。 (繼承來源 DependencyObject)
Pause()	暫停與分鏡腳本相關聯的動畫時鐘。
ReadLocalValue(DependencyProperty)	如果已設定本機值，則傳回相依性屬性的本機值。 (繼承來源 DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)	註冊通知函式，以接聽此DependencyObject實例上特定DependencyProperty的變更。 (繼承來源 DependencyObject)
Resume()	繼續與分鏡腳本相關聯的動畫時鐘或執行時間狀態。
Seek(TimeSpan)	將分鏡腳本移至指定的動畫位置。 腳本會在下一個時鐘刻度發生時執行要求的搜尋。
SeekAlignedToLastTick(TimeSpan)	將分鏡腳本移至指定的動畫位置， (同步) 。
SetTarget(Timeline, DependencyObject)	使指定的 時間軸 以指定的物件為目標。
SetTargetName(Timeline, String)	設定目標專案的 Storyboard.TargetName XAML 附加屬性的值。
SetTargetProperty(Timeline, String)	設定目標專案的 Storyboard.TargetProperty XAML 附加屬性的值。
SetValue(DependencyProperty, Object)	在 DependencyObject上設定相依性屬性的本機值。 (繼承來源 DependencyObject)
SkipToFill()	將分鏡腳本時鐘的目前時間前進到其使用期間結束時。
Stop()	停止分鏡腳本。
UnregisterPropertyChangedCallback(DependencyProperty, Int64)	取消先前透過呼叫 RegisterPropertyChangedCallback註冊的變更通知。 (繼承來源 DependencyObject)

事件

Completed

發生于 Storyboard 物件已完成播放時。 (繼承來源 Timeline)

另請參閱

• Timeline
• TimelineCollection
• Storyboard
• Storyboard
• 腳本動畫
• 視覺狀態的腳本動畫
• 主要畫面格動畫和 Easing 函式動畫
• 快速入門：使用動畫庫讓 UI 產生動畫效果
• Property-path 語法
• 附加屬性概觀