次の方法で共有

ストーリーボードに設定されたアニメーション

  • [アーティクル]

ストーリーボードに設定されたアニメーションは、視覚的な意味でのアニメーションだけではありません。 ストーリーボードに設定されたアニメーションは、依存関係プロパティの値を時間関数として変更する方法です。 アニメーション ライブラリ以外のストーリーボード付きアニメーションが必要になる主な理由の 1 つは、コントロール テンプレートまたはページ定義の一部としてコントロールの表示状態を定義することです。

Silverlight と WPF との違い

Microsoft Silverlight または Windows Presentation Foundation (WPF) に慣れている場合は、このセクションをお読みください。それ以外の場合は、スキップできます。

一般に、Windows ランタイム アプリでストーリーボードに設定されたアニメーションを作成することは、Silverlight や WPF のようなものです。 ただし、いくつかの重要な違いがあります。

  • ストーリーボードに設定されたアニメーションは、UI を視覚的にアニメーション化する唯一の方法ではなく、アプリ開発者にとって最も簡単な方法であるとは限りません。 ストーリーボードに設定されたアニメーションを使用するのではなく、多くの場合、テーマ アニメーションや切り替えアニメーションを使用することをお勧めします。 これらは、アニメーション プロパティのターゲット設定の複雑さを考慮することなく、推奨される UI アニメーションをすばやく作成できます。 詳細については、 Animations の概要を参照してください。
  • Windows ランタイムでは、多くの XAML コントロールには、組み込みの動作の一部としてテーマ アニメーションと切り替えアニメーションが含まれています。 ほとんどの場合、WPF コントロールと Silverlight コントロールには既定のアニメーション動作はありませんでした。
  • アニメーション システムで UI のパフォーマンスが低下する可能性があるとアニメーション システムが判断した場合、作成したすべてのカスタム アニメーションを既定でWindows ランタイム アプリで実行できるわけではありません。 システムがパフォーマンスに影響を与える可能性があると判断したアニメーションは、 依存しないアニメーションと呼ばれます。 アニメーションのククロックは UI スレッドに対して直接動作するため、これは、アクティブなユーザー入力やその他の更新プログラムが UI にランタイムの変更を適用しようとしている場合にも依存します。 UI スレッドで広範なシステム リソースを消費している依存アニメーションでは、特定の状況でアプリが応答しなくなる可能性があります。 アニメーションによってレイアウトが変更されたり、UI スレッドのパフォーマンスに影響する可能性がある場合は、多くの場合、アニメーションを明示的に有効にして実行を確認する必要があります。 これは、特定のアニメーション クラスの EnableDependentAnimation プロパティの目的です。 詳細については、「 依存しないアニメーションと独立したアニメーション を参照してください。
  • カスタム イージング関数は現在、Windows ランタイムではサポートされていません。

ストーリーボードに設定されたアニメーションの定義

ストーリーボードに設定されたアニメーションは、依存関係プロパティの値を時間関数として変更する方法です。 アニメーション化するプロパティは、アプリの UI に直接影響するプロパティであるとは限りません。 ただし、XAML はアプリの UI を定義するため、通常はアニメーション化する UI 関連のプロパティです。 たとえば、 RotateTransform の角度や、ボタンの背景の色の値をアニメーション化できます。

ストーリーボードに設定されたアニメーションを定義する主な理由の 1 つは、コントロールの作成者であるか、コントロールを再テンプレート化していて、表示状態を定義している場合です。 詳しくは、「表示状態用にストーリーボードに設定されたアニメーション」をご覧ください。

ビジュアルの状態を定義する場合でも、アプリのカスタム アニメーションを定義する場合でも、このトピックで説明するストーリーボード付きアニメーションの概念と API は、主にどちらかに適用されます。

アニメーション化するには、ストーリーボードに設定されたアニメーションを対象とするプロパティが dependency プロパティである必要があります。 依存関係プロパティは、Windows ランタイム XAML 実装の重要な機能です。 最も一般的な UI 要素の書き込み可能なプロパティは、通常、依存関係プロパティとして実装されます。そのため、アニメーション化したり、データ バインド値を適用したり、Style を適用したりSetterを使用してプロパティをターゲットにしたりできます。 依存関係プロパティのしくみの詳細については、「 Dependency プロパティの概要を参照してください。

ほとんどの場合、XAML を記述してストーリーボードに設定されたアニメーションを定義します。 Microsoft Visual Studio などのツールを使用すると、XAML が生成されます。 コードを使用してストーリーボードに設定されたアニメーションを定義することもできますが、あまり一般的ではありません。

簡単な例を見てみましょう。 この XAML の例では、 Opacity プロパティは、特定の Rectangle オブジェクトでアニメーション化されます。

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>

  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

アニメーション化するオブジェクトの識別

前の例では、ストーリーボードは Rectangle の Opacity プロパティをアニメーション化していました。 オブジェクト自体でアニメーションを宣言しません。 代わりに、ストーリーボードのアニメーション定義内でこれを行います。 ストーリーボードは、通常、アニメーション化するオブジェクトの XAML UI 定義のすぐ近くにはない XAML で定義されます。 代わりに、通常は XAML リソースとして設定されます。

アニメーションをターゲットに接続するには、その識別プログラミング名でターゲットを参照します。 アニメーション化するオブジェクトの名前を指定するには、常に XAML UI 定義で x:Name 属性 を適用する必要があります。 次に、アニメーション定義内で Storyboard.TargetName を設定して、アニメーション化するオブジェクトをターゲットにします。 Storyboard.TargetNameの値には、ターゲット オブジェクトの名前文字列を使用します。これは、以前に設定した文字列で、x:Name 属性を使用して他の場所に設定します。

依存関係プロパティをターゲットにしてアニメーション化する

アニメーションで Storyboard.TargetProperty の値を設定します。 これにより、対象となるオブジェクトの特定のプロパティがアニメーション化されます。

場合によっては、ターゲット オブジェクトの直接のプロパティではないが、オブジェクト とプロパティのリレーションシップでより深く入れ子になっているプロパティをターゲットにする必要があります。 アニメーション化できるプロパティ型 (Double、 Point、 Color) を参照できるようになるまで、一連のオブジェクトとプロパティ値をドリルダウンするには、多くの場合、これを行う必要があります。 この概念は indirect targeting と呼ばれ、この方法でプロパティをターゲットにするための構文は、 プロパティ パスと呼ばれます。

次に例を示します。 ストーリーボード化されたアニメーションの一般的なシナリオの 1 つは、コントロールが特定の状態にあることを表すために、アプリの UI またはコントロールの一部の色を変更することです。 たとえば、TextBlock のForegroundをアニメーション化して、赤から緑に変えたいとします。 ColorAnimationが関係していると予想されます。これは正しいことです。 ただし、オブジェクトの色に影響を与える UI 要素のプロパティは、実際には Color 型ではありません。 代わりに、 Brush 型です。 そのため、アニメーションのターゲットとして実際に必要なのは、SolidColorBrush クラスの Color プロパティです。これは、通常、これらの色関連の UI プロパティに使用される Brush 派生型です。 アニメーションのプロパティ ターゲットのプロパティ パスを形成するという点では、次のようになります。

<Storyboard x:Name="myStoryboard">
  <ColorAnimation
    Storyboard.TargetName="tb1"
    Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
    From="Red" To="Green"/>
</Storyboard>

この構文をその部分で考える方法を次に示します。

  • () かっこの各セットは、プロパティ名を囲みます。
  • プロパティ名内にはドットがあり、そのドットは型名とプロパティ名を区切り、識別するプロパティが明確になるようにします。
  • 中央のドット (かっこ内にないドット) はステップです。 これは構文によって解釈され、最初のプロパティ (オブジェクト) の値を取得し、そのオブジェクト モデルにステップインし、最初のプロパティの値の特定のサブプロパティを対象とします。

間接プロパティ ターゲットを使用する可能性があるアニメーション ターゲット シナリオと、使用する構文に近いプロパティ パス文字列の一覧を次に示します。

これらの例の一部では、数値の周りに角かっこが使用されています。 これはインデクサーです。 これは、その前のプロパティ名に値としてコレクションがあり、そのコレクション内から項目 (0 から始まるインデックスで識別される) が必要であることを示します。

XAML 添付プロパティをアニメーション化することもできます。 (Canvas.Left)など、添付プロパティの完全な名前は常にかっこで囲みます。 詳細については、「 XAML 添付プロパティの作成を参照してください。

プロパティの間接的なターゲット設定にプロパティ パスを使用してアニメーション化する方法の詳細については、「 Property-path 構文 または Storyboard.TargetProperty 添付プロパティを参照してください。

アニメーションの種類

Windows ランタイム アニメーション システムには、ストーリーボードに設定されたアニメーションを適用できる 3 つの特定の種類があります。

オブジェクト参照値の一般化された Object アニメーションの種類もあります。これについては、後で説明します。

アニメーション化された値の指定

ここまでは、アニメーション化するオブジェクトとプロパティをターゲットにする方法を示しましたが、実行時のプロパティ値に対するアニメーションの動作はまだ説明していません。

説明したアニメーションの種類は、 From/To/By アニメーションと呼ばれることもあります。 つまり、アニメーションは、アニメーション定義から取得された 1 つ以上の入力を使用して、時間の経過と同時にプロパティの値を変更しています。

  • この値は、 From 値から始まります。 From 値を指定しない場合、アニメーションが実行される前の時点でアニメーション化されたプロパティの値が開始値になります。 これは、既定値、スタイルまたはテンプレートの値、または XAML UI 定義またはアプリ コードによって特別に適用される値です。
  • アニメーションの最後の値は To 値です。
  • または、開始値を基準にして終了値を指定するには、 By プロパティを設定します。 これは、 To プロパティの代わりに設定します。
  • To値またはBy値を指定しない場合、終了値はアニメーションの実行前のアニメーション化されたプロパティの値になります。 この場合は、 From 値を設定することをお勧めします。それ以外の場合、アニメーションは値をまったく変更しません。開始値と終了値はどちらも同じです。
  • アニメーションには通常、少なくとも 1 つの From、 By または To がありますが、3 つすべてが含まれていない。

前の XAML の例をもう一度見て、 From と To の値、および Duration をもう一度見てみましょう。 この例では、 Opacity プロパティをアニメーション化しており、 Opacity のプロパティ型は Double です。 そのため、ここで使用するアニメーションは DoubleAnimation です。

From="1.0" To="0.0" は、アニメーションの実行時に、 Opacity プロパティの値が 1 から始まり、0 にアニメーション化されることを指定します。 つまり、これらの Double 値が Opacity プロパティに対して何を意味するかという点で、このアニメーションによってオブジェクトが不透明になり、フェードが透明になります。

...
<Storyboard x:Name="myStoryboard">
  <DoubleAnimation
    Storyboard.TargetName="MyAnimatedRectangle"
    Storyboard.TargetProperty="Opacity"
    From="1.0" To="0.0" Duration="0:0:1"/>
</Storyboard>
...

Duration="0:0:1" は、アニメーションの実行時間、つまり四角形のフェード速度を指定します。 Duration プロパティは、hours:minutes:seconds の形式で指定されます。 この例の期間は 1 秒です。

Duration値と XAML 構文の詳細については、「Duration」を参照してください。

Note

示した例では、アニメーション化されるオブジェクトの開始状態が常に 1 Opacity 常に 1 であると確信している場合は、既定値または明示的なセットを使用して、 From 値を省略すると、アニメーションは暗黙的な開始値を使用し、結果は同じになります。

From/To/By は null 許容です

前に、 From、 To または By を省略し、現在のアニメーション化されていない値を欠損値の代わりに使用できることを説明しました。 アニメーションの From、 To、または By プロパティは、推測できる種類ではありません。 たとえば、 DoubleAnimation.To プロパティの型は Double ではありません。 代わりに、Double のNullableです。 既定値は 0 ではなく null です。 この null 値は、アニメーション システムが、 From、 To、または By プロパティの値を明示的に設定していないことを識別する方法です。 Visual C++ コンポーネント拡張機能 (C++/CX) には Nullable 型がないため、代わりに IReference が使用されます。

アニメーションのその他のプロパティ

このセクションで説明する次のプロパティはすべて省略可能であり、ほとんどのアニメーションに適した既定値が設定されています。

AutoReverse

アニメーションに AutoReverse または RepeatBehavior を指定しない場合、そのアニメーションは 1 回実行され、 Duration として指定された時間だけ実行されます。

AutoReverse プロパティは、タイムラインがDurationの末尾に達した後に、タイムラインを逆に再生するかどうかを指定します。 trueに設定すると、宣言されたDurationの終わりに達すると、アニメーションは反転し、値を終了値 (To) から開始値 (From) に戻します。 つまり、アニメーションは、 Duration の 2 倍の時間で効果的に実行されます。

RepeatBehavior

RepeatBehavior プロパティは、タイムラインが再生される回数、またはタイムラインが繰り返す時間を長く指定します。 既定では、タイムラインの反復回数は "1x" です。これは、 Duration で 1 回再生され、繰り返されないことを意味します。

アニメーションで複数のイテレーションを実行できます。 たとえば、値が "3x" の場合、アニメーションは 3 回実行されます。 または、RepeatBehavior に別のDurationを指定することもできます。 その Duration は、アニメーション自体の Duration よりも長くする必要があります。 たとえば、 RepeatBehavior を "0:0:10" に指定した場合、 Duration "0:0:2" のアニメーションでは、そのアニメーションが 5 回繰り返されます。 これらが均等に分割されない場合、アニメーションは RepeatBehavior 時間に達した時点で切り捨てられ、途中で切り捨てられる可能性があります。 最後に、特別な値 "Forever" を指定できます。これにより、アニメーションは意図的に停止するまで無限に実行されます。

RepeatBehavior 値と XAML 構文の詳細については、「RepeatBehaviorを参照してください。

FillBehavior="Stop"

既定では、アニメーションが終了すると、アニメーションはプロパティ値を最後の To または By 変更された値の期間を超えた後も残します。 ただし、 FillBehavior プロパティの値を FillBehavior.Stop に設定すると、アニメーション化された値の値は、アニメーションが適用される前の値に戻ります。依存関係プロパティ システムによって決定される現在の有効な値に正確に戻ります (この区別の詳細については、「 Dependency プロパティの概要を参照してください)。

BeginTime

既定では、アニメーションの BeginTime は "0:0:0" であるため、含まれる Storyboard が実行されるとすぐに開始されます。 Storyboardに複数のアニメーションが含まれており、他のアニメーションと最初のアニメーションの開始時刻をずらしたり、意図的な短い遅延を作成したりする場合は、これを変更できます。

SpeedRatio

Storyboard に複数のアニメーションがある場合はStoryboardに対する 1 つ以上のアニメーションの時間レートを変更できます。 これは親 Storyboard アニメーションの実行中に Duration 時間がどのように経過するかを最終的に制御します。 このプロパティはあまり使用されません。 詳細については、「 SpeedRatioを参照してください。

Storyboard で複数のアニメーションを定義する

Storyboardの内容には、複数のアニメーション定義を指定できます。 同じターゲット オブジェクトの 2 つのプロパティに関連するアニメーションを適用する場合は、複数のアニメーションが存在する可能性があります。 たとえば、UI 要素の RenderTransform として使用される TranslateTransform の TranslateX プロパティと TranslateY プロパティの両方を変更できます。これにより、要素が斜めに変換されます。 これを実現するには 2 つの異なるアニメーションが必要ですが、アニメーションを同じ Storyboard の一部にしたい場合があります これらの 2 つのアニメーションを常に一緒に実行する必要があるためです。

アニメーションは、同じ種類である必要や、同じオブジェクトをターゲットにする必要はありません。 期間が異なる場合があり、プロパティ値を共有する必要はありません。

親 Storyboard を実行すると、その中の各アニメーションも実行されます。

Storyboard クラスは、実際にはアニメーションの種類と同じアニメーション プロパティを多数持っています。これは、どちらも Timeline 基本クラスを共有するためです。 したがって、 Storyboard には、 RepeatBehavior または BeginTime を含めることができます。 通常、これらの設定は Storyboard では行いません 含まれているすべてのアニメーションにその動作を設定する必要がある場合を除きます。 原則として、Storyboardに設定されているTimelineプロパティは、そのすべての子アニメーションに適用されます。 設定を解除すると、 Storyboard には、含まれているアニメーションの最も長い Duration 値から計算される暗黙的な期間があります。 Storyboard でDurationを明示的に設定するとその子アニメーションの 1 つよりも短いと、そのアニメーションが途切れるので、通常は望ましくありません。

ストーリーボードには、同じオブジェクトの同じプロパティをターゲットにしてアニメーション化しようとする 2 つのアニメーションを含めることはできません。 これを試すと、ストーリーボードの実行時にランタイム エラーが発生します。 この制限は、 BeginTime 値と期間が意図的に異なるため、アニメーションが時間内に重なっていない場合でも適用されます。 1 つのストーリーボードの同じプロパティに、より複雑なアニメーション タイムラインを実際に適用する場合、これを行う方法は、キー フレーム アニメーションを使用することです。 Key-frame とイージング関数のアニメーションを参照してください。

これらの入力が複数のストーリーボードから取得された場合、アニメーション システムはプロパティの値に複数のアニメーションを適用できます。 ストーリーボードを同時に実行するために意図的にこの動作を使用することは一般的ではありません。 ただし、コントロール プロパティに適用するアプリ定義アニメーションが、以前にコントロールのビジュアル状態モデルの一部として実行されたアニメーションの HoldEnd 値を変更する可能性があります。

ストーリーボードをリソースとして定義する

Storyboard は、アニメーション オブジェクトを配置するコンテナーです。 通常、 Storyboard は、アニメーション化するオブジェクトで使用できるリソースとして、ページ レベルの Resources または Application.Resources で定義します。

次の例では、前の例 Storyboard をページ レベルの Resources 定義に含める方法を示します。ここで、 Storyboard はルート Page のキー付きリソースです。 x:Name 属性に注意してください。 この属性を使用して、 Storyboardの変数名を定義し、XAML およびコード内の他の要素が後で Storyboard を参照できるようにします。

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>
  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

page.xaml や app.xaml などの XAML ファイルの XAML ルートでリソースを定義することは、XAML でキー付きリソースを整理する方法の一般的な方法です。 また、リソースを個別のファイルに組み込み、それらをアプリまたはページにマージすることもできます。 詳細については、「 ResourceDictionary および XAML リソース参照を参照してください。

Note

Windows ランタイム XAML では、x:Key 属性または x:Name 属性を使用したリソースの識別がサポートされています。 Storyboardでは、Begin メソッドを呼び出してアニメーションを実行できるように、最終的に変数名で参照する必要があるため、x:Name 属性の使用がより一般的です。 x:Key 属性を使用する場合は、Item インデクサーなどの ResourceDictionary メソッドを使用してキー付きリソースとして取得し、取得したオブジェクトを Storyboard Storyboard メソッドを使用する必要があります。

表示状態のストーリーボード

また、コントロールの視覚的な外観の表示状態アニメーションを宣言するときに、アニメーションを Storyboard ユニット内に配置します。 その場合、定義するStoryboard要素は、Style (キー付きリソースである Style) に入れ子になったVisualState コンテナーに入れ子になります。 この場合、Storyboardのキーまたは名前は必要ありません。これは、VisualStateManagerが呼び出すことができるターゲット名を持つVisualStateであるためです。 コントロールのスタイルは、多くの場合、ページまたはアプリ Resources コレクションに配置されるのではなく、個別の XAML ResourceDictionary ファイルに組み込まれます。 詳しくは、「表示状態用にストーリーボードに設定されたアニメーション」をご覧ください。

依存アニメーションと独立アニメーション

この時点で、アニメーション システムのしくみに関するいくつかの重要な点を紹介する必要があります。 特に、アニメーションは基本的に、Windows ランタイム アプリが画面にレンダリングする方法と、そのレンダリングで処理スレッドを使用する方法とやり取りします。 Windows ランタイム アプリには常にメイン UI スレッドがあり、このスレッドは現在の情報で画面を更新する役割を担います。 さらに、Windows ランタイム アプリにはコンポジション スレッドがあり、レイアウトが表示される直前に事前計算するために使用されます。 UI をアニメーション化すると、UI スレッドに多くの作業が発生する可能性があります。 システムは、各更新の間に非常に短い時間間隔を使用して、画面の大きな領域を再描画する必要があります。 これは、アニメーション化されたプロパティの最新のプロパティ値をキャプチャするために必要です。 注意しないと、アニメーションによって UI の応答性が低下したり、同じ UI スレッド上にある他のアプリ機能のパフォーマンスに影響を与えたりするリスクがあります。

UI スレッドの速度が低下するリスクがあると判断されるさまざまなアニメーションは、 依存アニメーションと呼ばれます。 このリスクの影響を受けるアニメーションは、 依存しないアニメーションです。 依存アニメーションと独立アニメーションの違いは、前に説明したようにアニメーションの種類 (DoubleAnimation などによって決まるだけではありません。 代わりに、アニメーション化する特定のプロパティと、継承やコントロールの構成などのその他の要因によって決まります。 アニメーションが UI を変更しても、アニメーションが UI スレッドへの影響を最小限に抑え、代わりにコンポジション スレッドによって独立したアニメーションとして処理できる状況があります。

アニメーションに次のいずれかの特性がある場合、アニメーションは独立しています。

警告

アニメーションを独立として扱うには、 Duration="0"を明示的に設定する必要があります。 たとえば、この XAML から Duration="0" を削除すると、フレームの KeyTime が "0:0:0" であっても、アニメーションは依存として扱われます。

<Storyboard>
  <DoubleAnimationUsingKeyFrames
    Duration="0"
    Storyboard.TargetName="Button2"
    Storyboard.TargetProperty="Width">
    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="200"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

アニメーションがこれらの条件を満たしていない場合は、依存するアニメーションである可能性があります。 既定では、アニメーション システムは依存アニメーションを実行しません。 そのため、開発とテストのプロセス中に、アニメーションが実行されていない場合もあります。 このアニメーションは引き続き使用できますが、このような依存する各アニメーションを明示的に有効にする必要があります。 アニメーションを有効にするには、アニメーション オブジェクトの EnableDependentAnimation プロパティを true に設定します。 (各 Timeline アニメーションを表すサブクラスにはプロパティの実装が異なりますが、これらはすべて EnableDependentAnimationという名前です)。

アプリ開発者に依存するアニメーションを有効にするための要件は、アニメーション システムと開発エクスペリエンスの意識的な設計面です。 アニメーションには UI の応答性に対するパフォーマンス コストが発生することを開発者に知っていただきたいと考えています。 パフォーマンスの低いアニメーションは、本格的なアプリでの分離とデバッグが困難です。 そのため、アプリの UI エクスペリエンスに本当に必要な依存アニメーションのみを有効にすることをお勧めします。 多くのサイクルを使用する装飾アニメーションのために、アプリのパフォーマンスを簡単に損ないたくありませんでした。 アニメーションのパフォーマンスに関するヒントの詳細については、「 アニメーションとメディアを最適化するを参照してください。

アプリ開発者は、依存アニメーションを常に無効にするアプリ全体の設定を適用することもできます。 EnableDependentAnimation が true。 Timeline.AllowDependentAnimations を参照してください。

ヒント

Blend for Visual Studio 2019 の [アニメーション] ペインを使用している場合、表示状態プロパティに依存型アニメーションを適用しようとするたびに、デザイナーに警告が表示されます。 警告は、ビルド出力やエラー一覧には表示されません。 XAML を手動で編集している場合、デザイナーには警告が表示されません。 デバッグの際の実行時に、出力ペインのデバッグ出力には、アニメーションが依存型であるためスキップされる旨の警告が表示されます。

アニメーションの開始と制御

これまでに説明した内容はすべて、アニメーションが実際に実行されたり適用されたりすることはありません。 アニメーションが開始されて実行されるまで、アニメーションが XAML で宣言している値の変更は潜在的であり、まだ発生しません。 アプリの有効期間またはユーザー エクスペリエンスに関連する何らかの方法でアニメーションを明示的に開始する必要があります。 最も簡単なレベルでは、アニメーションの親である Storyboard で Begin メソッドを呼び出してアニメーションを開始します。 XAML からメソッドを直接呼び出すことはできません。そのため、アニメーションを有効にするために何を行う場合でも、コードから実行します。 これは、アプリのページまたはコンポーネントの分離コードになるか、カスタム コントロール クラスを定義する場合はコントロールのロジックになります。

通常は、 Begin を呼び出し、アニメーションをその期間の完了まで実行します。 ただし、 Pause、 Resume 、および Stop メソッドを使用して、実行時に Storyboard を制御したり、より高度なアニメーション制御シナリオに使用されるその他の API を使用したりすることもできます。

無限に繰り返されるアニメーション (RepeatBehavior="Forever") を含むストーリーボードで Begin を呼び出すと、そのアニメーションは、そのアニメーションを含むページがアンロードされるまで実行されるか、Pause または Stop を呼び出します。

アプリ コードからアニメーションを開始する

アニメーションは、自動的に開始することも、ユーザーの操作に応じて開始することもできます。 自動ケースでは、通常、アニメーション トリガーとして動作するために、 Loaded などのオブジェクトの有効期間イベントを使用します。 Loaded イベントは、この時点で UI が操作の準備ができているため、これを使用するのに適したイベントです。UI の別の部分がまだ読み込まれているため、最初はアニメーションが途切れません。

この例では、 PointerPressed イベントが四角形にアタッチされ、ユーザーが四角形をクリックするとアニメーションが開始されます。

<Rectangle PointerPressed="Rectangle_Tapped"
  x:Name="MyAnimatedRectangle"
  Width="300" Height="200" Fill="Blue"/>

イベント ハンドラーは、Storyboard の Begin メソッドを使用して、Storyboard (アニメーション) を開始します。

myStoryboard.Begin();

myStoryboard().Begin();

myStoryboard->Begin();

myStoryBoard.Begin()

アニメーションの値の適用が完了した後に他のロジックを実行する場合は、 Completed イベントを処理できます。 また、プロパティ のシステム/アニメーション操作のトラブルシューティングには、 GetAnimationBaseValue メソッドが役立ちます。

ヒント

アプリ コードからアニメーションを開始するアプリ シナリオをコーディングするときは常に、UI シナリオのアニメーション ライブラリにアニメーションまたは切り替えが既に存在するかどうかを再度確認できます。 ライブラリ アニメーションを使用すると、すべてのWindows ランタイム アプリでより一貫性のある UI エクスペリエンスを実現でき、使いやすくなっています。

 

表示状態のアニメーション

コントロールの表示状態を定義するために使用される Storyboard の実行動作は、アプリがストーリーボードを直接実行する方法とは異なります。 XAML のビジュアル状態定義に適用されるように、 Storyboard は VisualState を含む要素であり、状態全体は VisualStateManager API を使用して制御されます。 コントロールでVisualStateを含む場合、アニメーション値と Timeline プロパティに従ってアニメーションが実行されます。 詳細については、「 Storyboards for visual statesを参照してください。 表示状態の場合、見かけ上の FillBehavior は異なります。 表示状態が別の状態に変更された場合、新しい表示状態がプロパティに新しいアニメーションを明示的に適用しない場合でも、以前の表示状態とそのアニメーションによって適用されたすべてのプロパティ変更が取り消されます。

Storyboard EventTrigger と EventTrigger

XAML で完全に宣言できるアニメーションを開始する方法は 1 つあります。 ただし、この手法は広く使用されなくなりました。 これは、VisualStateManager サポートより前の WPF と以前のバージョンの Silverlight からのレガシ構文です。 このEventTrigger構文は、インポート/互換性の理由からWindows ランタイム XAML で引き続き機能しますが、FrameworkElement.Loaded イベントに基づくトリガー動作でのみ機能します。他のイベントをトリガーしようとすると、例外がスローされるか、コンパイルに失敗します。 詳細については、 EventTrigger または BeginStoryboard を参照してください。

XAML 添付プロパティのアニメーション化

これは一般的なシナリオではありませんが、アニメーション化された値を XAML 添付プロパティに適用できます。 添付プロパティの概要と動作の詳細については、「 Attached プロパティの概要を参照してください。 添付プロパティをターゲットにする場合は、プロパティ名をかっこで囲む プロパティ パス構文 が必要です。 個別の整数値を適用する ObjectAnimationUsingKeyFrames を使用して、Canvas.ZIndex などの組み込みの添付プロパティをアニメーション化できます。 ただし、Windows ランタイム XAML 実装の既存の制限は、カスタム添付プロパティをアニメーション化できないことです。

その他のアニメーションの種類と、UI のアニメーション化について学習するための次の手順

これまでは、2 つの値の間でアニメーション化し、アニメーションの実行中に必要に応じて値を線形補間するカスタム アニメーションを示しました。 これらは From/To/By アニメーションと呼ばれます。 ただし、開始と終了の間に含まれる中間値を宣言できる別のアニメーションの種類があります。 これらは、 キー フレーム アニメーションと呼ばれます。 また、 From/To/By アニメーションまたはキー フレーム アニメーションで補間ロジックを変更する方法もあります。 これには、イージング関数の適用が含まれます。 これらの概念の詳細については、「 Key-frame およびイージング関数アニメーションを参照してください。