次の方法で共有


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
属性

次の例では、BeginStopPause、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();
}

注釈

ストーリーボードは、 ストーリーボードアニメーションの概念において重要なクラスです。 概念の詳細については、「 ストーリーボード化されたアニメーション」を参照してください。

ストーリーボードは、次のプロパティに使用されます。

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

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

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

XAML 添付プロパティ

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

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

添付プロパティ 説明
TargetName アニメーション化するオブジェクトの名前を取得または設定します。 Storyboard.TargetName は、別の要素をその名前で参照するために使用されます。 参照される要素は、アニメーションを適用する要素/オブジェクトです。 このメカニズムは、アニメーション システムの基本的な設計の一部です。これにより、アニメーション リソースを UI 宣言リソースとは別に宣言でき、複数の異なるプロパティ動作に 1 つのアニメーション定義を適用できます。 特定のアニメーションの Storyboard.TargetName の値には、ターゲット要素の Name または x:Name 属性値 (文字列) を指定します。 その名前付き要素は、XAML マークアップの他の領域に既に存在している必要があります。
名前/x:Name 属性文字列の意味は、XAML 名前スコープの概念によって制御されます。 ほとんどのアニメーション ターゲット シナリオでは、XAML 名前スコープの影響について心配する必要はありませんが、テンプレート パーツ、または XamlReader.Load を使用して作成され、その後オブジェクト ツリーに追加されたオブジェクトをターゲットにしようとすると、XAML の名前解決の問題が発生する可能性があります。 詳しくは、「XAML 名前スコープ」をご覧ください。
TargetProperty アニメーション化するプロパティを取得または設定します。Storyboard.TargetProperty は、Storyboard.TargetName で指定された要素の特定のプロパティを対象とします。 Storyboard.TargetProperty に指定する値には、 プロパティ パスと呼ばれる概念が含まれます。 アニメーションのプロパティ パスを指定する方法の詳細については、「 SetTargetProperty または Storyboard.TargetProperty の解説」または 「Property-path 構文 」トピックを参照してください。

コンストラクター

Storyboard()

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

プロパティ

AutoReverse

順方向の反復の完了後に、タイムラインを逆方向に再生するかどうかを示す値を取得または設定します。

(継承元 Timeline)
BeginTime

この タイムライン を開始する時刻を取得または設定します。

(継承元 Timeline)
Children

Timeline オブジェクトのコレクションを取得します。

Dispatcher

常に Windows アプリ SDK アプリで を返しますnull。 代わりに DispatcherQueue を使用してください。

(継承元 DependencyObject)
DispatcherQueue

このオブジェクトが DispatcherQueue 関連付けられている を取得します。 は DispatcherQueue 、コードが 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)

適用対象

こちらもご覧ください