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

示例

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

注解

情节提要是 情节提要动画概念中的一个重要类。 有关该概念的详细信息，请参阅 情节提要动画。

情节提要用于以下属性：

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

这些属性并不是定义情节提要的唯一位置。 情节提要用于情节提要动画的典型方式是，情节提要在 Resources 集合中定义， (Application.Resources 或 FrameworkElement.Resources，或者可能定义为文件中的资源（如自定义控件) 的 Generic.xaml）。 每当它定义为 XAML 资源时，应始终为情节提要分配 x：Name 属性值 。 然后，稍后可以在代码隐藏中将名称作为编程变量引用。 你将需要此引用来实际运行 Storyboard 包含的动画，方法是在该 Storyboard 实例上调用 Begin 方法。 情节提要还具有其他控制方法，例如 Stop ，可在之后控制动画。

情节提要从 时间线继承多个属性。 这些属性可以应用于情节提要或其中一个动画， (Children 集合) 。 在main情节提要而不是每个动画上设置 Timeline 属性有利有弊。 有关详细信息，请参阅情节提要动画。

如果你使用的是其中一个主题动画，则还需要情节提要来控制添加到控件或 UI 的预定义动画。 主题动画没有先天触发点，因此需要将 Storyboard 中的主题动画作为 Children 包含在内。 如果将 Storyboard 用作 VisualState.Storyboard 值，则动画将在加载该视觉状态时运行。 或者，如果它位于 VisualTransition.Storyboard 中，则当视觉状态管理器检测到该转换时，动画将运行。 这些是使用主题动画的最常见方法，但你也可以将一个动画放在松散的 Storyboard 资源中，并通过调用 Begin 显式启动动画。

XAML 附加属性

情节提要是多个 XAML 附加属性的主机服务类。 它们使情节提要能够控制每个目标单独的目标元素和目标属性的子动画，同时仍遵循与父级相同的控制时间线和触发机制。

为了支持 XAML 处理器访问附加属性，以及向代码公开等效 的 get 和 set 操作，每个 XAML 附加属性都有一对 Get 和 Set 访问器方法。 在代码中获取或设置值的另一种方法是使用依赖属性系统，调用 GetValue 或 SetValue ，并将标识符字段作为依赖属性标识符传递。

构造函数

属性

附加属性

方法

事件

适用于

另请参阅

• Timeline
• TimelineCollection
• Storyboard
• Storyboard
• 情节提要动画
• 关键帧动画以及缓动函数动画
• Property-path 语法
• 附加属性概述