共用方式為


Storyboard 類別

定義

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

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 : Timeline
Public NotInheritable Class Storyboard
Inherits Timeline
<Storyboard ...>
  oneOrMoreChildTimelines
</Storyboard>
繼承
Object Platform::Object IInspectable DependencyObject Timeline Storyboard
屬性

範例

下列範例示範如何使用 BeginStopPauseResume 方法來控制腳本 (動畫的播放) 。 一組按鈕可讓使用者呼叫這些方法。

<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.ResourcesFrameworkElement.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 處理器存取附加屬性,以及公開對等 的 getset 作業給程式碼,每個 XAML 附加屬性都有一對 Get 和 Set 存取子方法。 在程式碼中取得或設定值的另一種方式是使用相依性屬性系統,呼叫 GetValueSetValue ,並將識別碼欄位傳遞為相依性屬性識別碼。

附加屬性 描述
TargetName 取得或設定要繪製動畫之物件的名稱。 Storyboard.TargetName 用來依其名稱參考另一個專案。 所參考的專案是應該套用動畫的專案/物件。 此機制是動畫系統的基本設計之一部分:它可讓動畫資源與 UI 宣告資源分開宣告,並讓一個動畫定義套用至數個不同的屬性行為。 針對特定動畫的 Storyboard.TargetName 值,您可以指定目標元素的 Namex:Name 屬性值 ,也就是字串。 該具名元素應該已經存在於 XAML 標記的一些其他區域中。
Name/x:Name 屬性字串的意義是由 XAML 名稱範圍概念所控制。 對於大部分以動畫為目標的案例,您不需要擔心 XAML 命名範圍的影響,但如果您嘗試以範本元件為目標,或是使用 XamlReader.Load 建立的物件,後續新增至物件樹狀結構,您可能會遇到 XAML 名稱解析問題。 如需詳細資訊,請參閱 XAML 命名範圍
TargetProperty 取得或設定應該繪製的屬性。Storyboard.TargetProperty 是以 Storyboard.TargetName 所指定之元素的特定屬性為目標。 您為 Storyboard.TargetProperty 提供的值牽涉到稱為 屬性路徑的概念。 如需如何指定動畫屬性路徑的詳細資訊,請參閱 SetTargetPropertyStoryboard.TargetPropertyProperty-path 語法 主題中的。

建構函式

Storyboard()

初始化 Storyboard 類別的新實例。

屬性

AutoReverse

取得或設定值,其中該值指出時間軸是否會在完成向前反覆項目後反向播放。

(繼承來源 Timeline)
BeginTime

取得或設定這個 時間軸 應該開始的時間。

(繼承來源 Timeline)
Children

取得子 Timeline 物件的集合。

Dispatcher

一律會在 null Windows 應用程式 SDK應用程式中傳回。 請改用 DispatcherQueue

(繼承來源 DependencyObject)
DispatcherQueue

DispatcherQueue取得與這個 物件相關聯的 。 DispatcherQueue表示即使程式碼是由非 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)

適用於

另請參閱