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

설명

Storyboard는 스토리보드 애니메이션 개념에서 중요한 클래스입니다. 개념에 대한 자세한 내용은 스토리보드 애니메이션을 참조하세요.

Storyboard는 다음 속성에 사용됩니다.

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

이러한 속성은 Storyboard가 정의된 유일한 위치가 아닙니다. Storyboard가 스토리보드 애니메이션에 사용되는 일반적인 방법은 Storyboard가 Resources 컬렉션(Application.Resources 또는 FrameworkElement.Resources 또는 사용자 지정 컨트롤의 Generic.xaml과 같은 파일 내의 리소스로 정의됨)에 정의된다는 것입니다. XAML 리소스로 정의할 때마다 항상 Storyboard에 x:Name 특성 값을 할당해야 합니다. 그런 다음, 코드 숨김의 뒷부분에서 이름을 프로그래밍 변수로 참조할 수 있습니다. Storyboard instance Begin 메서드를 호출하여 Storyboard에 포함된 애니메이션을 실제로 실행하려면 이 참조가 필요합니다. Storyboard에는 그 이후에 애니메이션을 제어할 수 있는 중지 와 같은 다른 제어 메서드도 있습니다.

Storyboard는 타임라인에서 여러 속성을 상속 합니다. 이러한 속성은 Storyboard 또는 그 안의 애니메이션 중 하나( Children 컬렉션)에 적용할 수 있습니다. 각 애니메이션 대신 기본 Storyboard에서 Timeline 속성을 설정하는 장단점이 있습니다. 자세한 내용은 스토리보드 애니메이션을 참조하세요.

테마 애니메이션 중 하나를 사용하는 경우 컨트롤 또는 UI에 추가하는 미리 정의된 애니메이션을 제어하려면 Storyboard도 필요합니다. 테마 애니메이션에는 타고난 트리거 지점이 없으므로 Storyboard에 테마 애니메이션을 Children으로 포함해야 합니다. Storyboard가 VisualState.Storyboard 값으로 사용되는 경우 해당 시각적 상태가 로드될 때 애니메이션이 실행됩니다. 또는 VisualTransition.Storyboard에 있는 경우 시각적 상태 관리자가 해당 전환을 감지하면 애니메이션이 실행됩니다. 테마 애니메이션을 사용하는 가장 일반적인 방법이지만 느슨한 Storyboard 리소스에 배치하고 Begin을 호출하여 애니메이션을 명시적으로 시작할 수도 있습니다. 테마 애니메이션을 사용하는 방법에 대한 자세한 내용은 빠른 시작: 시각적 상태에 라이브러리 애니메이션 또는 스토리보드 애니메이션을 사용하여 UI 애니메이션 효과를 참조하세요.

XAML 연결 속성

Storyboard는 여러 XAML 연결 속성에 대한 호스트 서비스 클래스입니다. 이를 통해 Storyboard에서 제어하는 자식 애니메이션을 각 대상 개별 대상 요소와 대상 속성에 대해 제어하는 동시에 부모와 동일한 제어 타임라인 및 트리거 메커니즘을 수행합니다.

연결된 속성에 대한 XAML 프로세서 액세스를 지원하고 동등한 get 및 set 작업을 코드에 노출하기 위해 연결된 각 XAML 속성에는 Get 및 Set 접근자 메서드 쌍이 있습니다. 코드에서 값을 얻거나 설정하는 또 다른 방법은 종속성 속성 시스템을 사용하여 GetValue 또는 SetValue 를 호출하고 식별자 필드를 종속성 속성 식별자로 전달하는 것입니다.

연결된 속성	설명
TargetName	애니메이션 효과를 줄 개체의 이름을 가져오거나 설정합니다.
TargetProperty	애니메이션 효과를 적용할 속성을 가져오거나 설정합니다.

생성자

Storyboard()

Storyboard 클래스의 새 instance 초기화합니다.

속성

AutoReverse	타임라인이 앞으로 반복을 완료한 후 반대 방향으로 재생되는지 여부를 나타내는 값을 가져오거나 설정합니다. (다음에서 상속됨 Timeline)
BeginTime	이 타임라인 을 시작할 시간을 가져오거나 설정합니다. (다음에서 상속됨 Timeline)
Children	자식 Timeline 개체의 컬렉션을 가져옵니다.
Dispatcher	이 개체가 연결된 CoreDispatcher 를 가져옵니다. CoreDispatcher는 코드가 비 UI 스레드에서 시작된 경우에도 UI 스레드에서 DependencyObject에 액세스할 수 있는 기능을 나타냅니다. (다음에서 상속됨 DependencyObject)
Duration	반복을 제외하고 이 Timeline이 재생되는 시간을 가져오거나 설정합니다. (다음에서 상속됨 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()	Storyboard의 클록 상태를 가져옵니다.
GetCurrentTime()	Storyboard의 현재 애니메이션 클록 시간을 가져옵니다.
GetTargetName(Timeline)	대상 요소에서 Storyboard.TargetName XAML 연결된 속성의 값을 가져옵니다.
GetTargetProperty(Timeline)	대상 요소에서 Storyboard.TargetProperty XAML 연결된 속성의 값을 가져옵니다.
GetValue(DependencyProperty)	DependencyObject에서 종속성 속성의 현재 유효 값을 반환합니다. (다음에서 상속됨 DependencyObject)
Pause()	스토리보드와 연결된 애니메이션 클록을 일시 중지합니다.
ReadLocalValue(DependencyProperty)	로컬 값이 설정된 경우 종속성 속성의 로컬 값을 반환합니다. (다음에서 상속됨 DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)	이 DependencyObject instance 특정 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에 애니메이션 효과 주기
• 속성 경로 구문
• 연결된 속성 개요