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

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

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

如果使用其中一个主题动画，则还需要情节提要来控制添加到控件或 UI 的预定义动画。 主题动画没有与生俱来的触发点，因此你需要在情节提要中包含主题动画作为 Children。 如果将 Storyboard 用作 VisualState.Storyboard 值，则在加载该视觉状态时，动画将运行。 或者，如果它位于 VisualTransition.Storyboard 中，动画将在视觉状态管理器检测到该切换时运行。 这些是使用主题动画的最常见方法，但你也可以在松散的 Storyboard 资源中放置一个动画，并通过调用 Begin 显式启动动画。 有关如何使用主题动画的详细信息，请参阅 快速入门：使用库动画对 UI 进行动画 处理或 用于视觉状态的情节提要动画。

XAML 附加属性

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

为了支持 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
• 情节提要动画
• 视觉状态的情节提要动画
• 关键帧动画以及缓动函数动画
• 快速入门：使用库动画创建 UI 动画
• Property-path 语法
• 附加属性概述