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

ストーリーボードが定義されている場所は、これらのプロパティだけではありません。 ストーリーボードのアニメーションにストーリーボードを使用する一般的な方法は、ストーリーボードが Resources コレクション ( Application.Resources または FrameworkElement.Resources、またはカスタム コントロールの Generic.xaml などのファイル内のリソース) で定義されていることです。 XAML リソースとして定義されている場合は常に、ストーリーボードに x:Name 属性値 を割り当てる必要があります。 その後、コード ビハインドで後でプログラミング変数として名前を参照できます。 ストーリーボードに含まれるアニメーションを実際に実行するには、この参照が必要です。そのストーリーボード インスタンスで Begin メソッドを呼び出します。 ストーリーボードには、その後のアニメーションを制御できる Stop などの他のコントロール メソッドもあります。

ストーリーボードはタイムラインからいくつかのプロパティを継承 します。 これらのプロパティは、ストーリーボードまたはその中のアニメーション ( Children コレクション内) のいずれかに適用できます。 各アニメーションではなく、メイン ストーリーボードで Timeline プロパティを設定するには長所と短所があります。 詳しくは、「ストーリーボードに設定されたアニメーション」をご覧ください。

テーマ アニメーションのいずれかを使用している場合は、コントロールまたは UI に追加する定義済みのアニメーションを制御するためにストーリーボードも必要です。 テーマ アニメーションには生来のトリガー ポイントがないため、ストーリーボードにテーマ アニメーションを 子として含める必要があります。 ストーリーボードが VisualState.Storyboard 値として使用されている場合、そのビジュアル状態が読み込まれるときにアニメーションが実行されます。 または、 VisualTransition.Storyboard 内にある場合は、その遷移がビジュアル状態マネージャーによって検出されたときにアニメーションが実行されます。 これらはテーマ アニメーションを使用する最も一般的な方法ですが、緩やかなストーリーボード リソースに配置し、 Begin を呼び出してアニメーションを明示的に開始することもできます。 テーマ アニメーションの使用方法の詳細については、「 クイック スタート: ライブラリ アニメーションを使用して UI をアニメーション化する 」または 「表示状態のストーリーボードアニメーション」を参照してください。

XAML 添付プロパティ

ストーリーボードは、 いくつかの XAML 添付プロパティのホスト サービス クラスです。 これにより、ストーリーボードによって制御下にある子アニメーションが各ターゲットに個別のターゲット要素とターゲット プロパティに対して有効になりますが、親と同じ制御タイムラインおよびトリガー メカニズムに従います。

添付プロパティへの XAML プロセッサ アクセスをサポートし、同等の get 操作と set 操作をコードに公開するために、各 XAML 添付プロパティには、Get および Set アクセサー メソッドのペアがあります。 コードで値を取得または設定するもう 1 つの方法は、依存関係プロパティ システムを使用して GetValue または SetValue を呼び出し、識別子フィールドを依存関係プロパティ識別子として渡すことです。

添付プロパティ	説明
Targetname	アニメーション化するオブジェクトの名前を取得または設定します。
TargetProperty	アニメーション化するプロパティを取得または設定します。

コンストラクター

Storyboard()

Storyboard クラスの新しいインスタンスを初期化します。

プロパティ

AutoReverse	順方向の反復の完了後に、タイムラインを逆方向に再生するかどうかを示す値を取得または設定します。 (継承元 Timeline)
BeginTime	この タイムライン を開始する時刻を取得または設定します。 (継承元 Timeline)
Children	子 Timeline オブジェクトのコレクションを取得します。
Dispatcher	このオブジェクトが関連付けられている CoreDispatcher を取得します。 CoreDispatcher は、コードが UI 以外のスレッドによって開始された場合でも、UI スレッド上の DependencyObject にアクセスできる機能を表します。 (継承元 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)	指定した Timeline を指定したオブジェクトをターゲットにします。
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 のアニメーション化
• プロパティ パス構文
• 添付プロパティの概要