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

屬性

ContentPropertyAttribute ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

範例

以下範例展示了如何使用 開始、 停止、 暫停和 繼續 方法來控制分鏡（動畫）的播放。 一組按鈕讓使用者可以呼叫這些方法。

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

這個範例展示了如何完全用程式碼製作並執行動畫。

<Button Content="Create animation" Click="Button_Click"/>

private void Button_Click(object sender, RoutedEventArgs e)
{
    Create_And_Run_Animation();
}

private void Create_And_Run_Animation()
{
    Storyboard justintimeStoryboard = null;
    // If the storyboard already exists in the resources dictionary,
    // get it and make sure it's stopped.
    if (LayoutRoot.Resources.ContainsKey("justintimeStoryboard"))
    {
        justintimeStoryboard = (Storyboard)LayoutRoot.Resources["justintimeStoryboard"];
        justintimeStoryboard.Stop();
    }
    // Otherwise, create the storyboard and add it to the resources dictionary.
    else
    {
        // 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;
        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();
}

備註

分鏡是 分鏡動畫概念中重要的一門課。 想了解更多概念，請參見 分鏡動畫。

以下作品使用分鏡腳本：

• VisualState.Storyboard
• 視覺轉換。分鏡腳本
• 開始分鏡。分鏡

這些屬性並不是唯一定義分鏡的地方。 故事板用於分鏡動畫的典型方式是將故事板定義在 資源 集合中（可能是 Application.Resources 或 FrameworkElement.Resources，或是作為檔案中的資源，例如 Generic.xaml 用於自訂控制項）。 只要它被定義為 XAML 資源，你應該總是為你的故事板指派 x：Name 屬性 值。 之後你可以在程式碼後面以程式變數的方式參考這個名稱。 你需要這個參考，才能實際執行分鏡中包含的動畫，方法是呼叫該分鏡實例的 Begin 方法。 Storyboard 還有其他控制方式，例如 停止 ，可以控制之後的動畫。

Storyboard 繼承了 Timeline 的多個屬性。 這些屬性可以套用到分鏡圖上，或應用在其中的動畫（在 Children 集合中）。 在主故事板上設定 時間軸 屬性，而不是每個動畫，都有優缺點。 如需詳細資訊，請參閱 分鏡腳本動畫。

如果你使用主題動畫，也需要分鏡來控制你加入控制或介面的預設動畫。 主題動畫沒有內建的觸發點，所以你需要把主題動畫放在分鏡中，作為 兒童。 如果分鏡板被用作 VisualState.Storyboard 值，那麼當該視覺狀態載入時，動畫就會執行。 或者，如果是在 VisualTransition.Storyboard 裡，當視覺狀態管理器偵測到該轉換時，動畫就會執行。 這是使用主題動畫最常見的方式，但你也可以在鬆散的分鏡資源中放入，並明確 透過呼叫開始來啟動動畫。

XAML 附加屬性

Storyboard 是多個 XAML 附加屬性的宿主服務類別。 這些功能讓子動畫由分鏡控制，能針對各自的目標元素與屬性，同時仍遵循與父角色相同的控制時間軸與觸發機制。

為了支援 XAML 處理器對附加屬性的存取，並向程式碼暴露等效的 get 與 set 操作，每個 XAML 附加屬性都有一對 Get 與 Set 存取器方法。 另一種在程式碼中取得或設定值的方法是使用相依屬性系統，呼叫 GetValue 或 SetValue ，並將識別欄位傳入相依屬性識別碼。

另請參閱

• Timeline
• TimelineCollection
• Storyboard
• Storyboard
• 分鏡腳本動畫
• 關鍵影格動畫與緩和功能動畫
• 屬性路徑語法
• 附加屬性概觀