Storyboard クラス
定義
重要
一部の情報は、リリース前に大きく変更される可能性があるプレリリースされた製品に関するものです。 Microsoft は、ここに記載されている情報について、明示または黙示を問わず、一切保証しません。
タイムラインを使用してアニメーションを制御し、その子アニメーションのオブジェクトとプロパティのターゲット情報を提供します。
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 : TimelinePublic NotInheritable Class Storyboard
Inherits Timeline<Storyboard ...>
oneOrMoreChildTimelines
</Storyboard>
- 継承
- 属性
例
次の例では、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();
}
注釈
ストーリーボードは、 ストーリーボードアニメーションの概念において重要なクラスです。 概念の詳細については、「 ストーリーボード化されたアニメーション」を参照してください。
ストーリーボードは、次のプロパティに使用されます。
ストーリーボードが定義されている場所は、これらのプロパティだけではありません。 ストーリーボードアニメーションにストーリーボードを使用する一般的な方法は、ストーリーボードが 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 | アニメーション化するオブジェクトの名前を取得または設定します。
名前/x:Name 属性文字列の意味は、XAML 名前スコープの概念によって制御されます。 ほとんどのアニメーション ターゲット シナリオでは、XAML 名前スコープの影響について心配する必要はありませんが、テンプレート パーツ、または XamlReader.Load を使用して作成され、その後オブジェクト ツリーに追加されたオブジェクトをターゲットにしようとすると、XAML の名前解決の問題が発生する可能性があります。 詳しくは、「XAML 名前スコープ」をご覧ください。 |
| TargetProperty | アニメーション化するプロパティを取得または設定します。
|
コンストラクター
| Storyboard() |
Storyboard クラスの新しいインスタンスを初期化します。 |
プロパティ
| AutoReverse |
順方向の反復の完了後に、タイムラインを逆方向に再生するかどうかを示す値を取得または設定します。 (継承元 Timeline) |
| BeginTime |
この タイムライン を開始する時刻を取得または設定します。 (継承元 Timeline) |
| Children |
子 Timeline オブジェクトのコレクションを取得します。 |
| Dispatcher |
常に Windows アプリ SDK アプリで を返します |
| DispatcherQueue |
このオブジェクトが |
| Duration |
繰り返しをカウントせずに、このタイムラインの再生に要する時間を取得または設定します。 (継承元 Timeline) |
| FillBehavior |
アニメーションがアクティブ期間の終わりに達した後の動作を指定する値を取得または設定します。 (継承元 Timeline) |
| RepeatBehavior |
このタイムラインの繰り返し動作を取得または設定します。 (継承元 Timeline) |
| SpeedRatio |
このタイムラインの進行状況を示す、親に対する相対的なレートを取得または設定 します。 (継承元 Timeline) |
| TargetNameProperty |
Storyboard.TargetName XAML 添付プロパティを識別します。 |
| TargetPropertyProperty |
Storyboard.TargetProperty XAML 添付プロパティを識別します。 |
添付プロパティ
| TargetName |
アニメーション化するオブジェクトの名前を取得または設定します。 |
| TargetProperty |
アニメーション化するプロパティを取得または設定します。 |
メソッド
イベント
| Completed |
Storyboard オブジェクトの再生が完了したときに発生します。 (継承元 Timeline) |
適用対象
こちらもご覧ください
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示