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

ストーリーボードに設定されたアニメーションは、単なる視覚なアニメーションではありません。Storyboarded animations are not just animations in the visual sense. ストーリーボードに設定されたアニメーションは、依存関係プロパティの値を時間の関数として変更する手段です。A storyboarded animation is a way to change the value of a dependency property as a function of time. アニメーション ライブラリからではないストーリーボードに設定されたアニメーションが必要になる主な理由として、コントロール テンプレートまたはページ定義の一部としてコントロールの表示状態を定義できることが挙げられます。One of the main reasons you might need a storyboarded animation that's not from the animation library is to define the visual state for a control, as part of a control template or page definition.

Silverlight や WPF を使ったアニメーションとの違いDifferences with Silverlight and WPF

Microsoft Silverlight または Windows Presentation Foundation (WPF) に慣れている方は、このセクションをお読みください。それ以外の方は飛ばしてくださって結構です。If you are familiar with Microsoft Silverlight or Windows Presentation Foundation (WPF), read this section; otherwise, you can skip it.

一般に、Windows ランタイム アプリのストーリーボードに設定されたアニメーションの作成は、Silverlight や WPF と似ています。In general, creating storyboarded animations in a Windows Runtime app is like Silverlight or WPF. ただし、重要な違いがいくつかあります。But there are a number of important differences:

  • ストーリーボードに設定されたアニメーションは、UI を視覚的にアニメーション化する唯一の方法ではなく、アプリ開発者にとってもっと簡単な方法も他にあります。Storyboarded animations are not the only way to visually animate a UI, nor are they necessarily the easiest way for app developers to do so. ストーリーボードに設定されたアニメーションを使わず、テーマ アニメーションと切り替え効果のアニメーションを使う方が設計上効率的であるケースはよくあります。Rather than using storyboarded animations it's often a better design practice to use theme animations and transition animations. これらを使うと、複雑なアニメーション プロパティのターゲット設定を扱わずに済み、推奨 UI アニメーションをすばやく作成できます。These can quickly create recommended UI animations without getting into the intricacies of animation property targeting. 詳しくは、「アニメーションの概要」をご覧ください。For more info see Animations overview.
  • Windows ランタイムの多くの XAML コントロールには、組み込み動作の一部としてテーマ アニメーションと切り替え効果のアニメーションが組み込まれています。In the Windows Runtime, many XAML controls include theme animations and transition animations as part of their built-in behavior. ほとんどの場合、WPF や Silverlight コントロールには既定のアニメーション動作がありませんでした。For the most part, WPF and Silverlight controls didn't have a default animation behavior.
  • UI のパフォーマンスが低下するとアニメーション システムによって判断された場合、作成したすべてのカスタム アニメーションが Windows ランタイム アプリでそのまま動くわけではありません。Not all custom animations you create can run by default in a Windows Runtime app, if the animation system determines that the animation might cause bad performance in your UI. アプリのパフォーマンスに影響を及ぼす可能性があるとシステムによって判断されたアニメーションを依存型アニメーションといいます。Animations where the system determines there could be a performance impact are called dependent animations. "依存型" と呼ばれるのは、アニメーションのクロッキングは UI スレッドに対して直接作用するためです。この UI スレッドは、アクティブなユーザー入力やその他の更新によって UI に対してランタイムの変更の適用が試行される部分でもあります。It's dependent because the clocking of your animation is directly working against the UI thread, which is also where active user input and other updates are trying to apply the runtime changes to UI. UI スレッドで大量のシステム リソースを消費する依存型アニメーションの場合、特定の状況においてアプリが応答していないかのように見えることがあります。A dependent animation that's consuming extensive system resources on the UI thread can make the app appear unresponsive in certain situations. 自分が作成したアニメーションが、レイアウトの変更を含め、UI スレッドのパフォーマンスへの影響を伴う可能性がある場合は、アニメーションを明示的に有効にし、動作することを確かめる必要があります。If your animation causes a layout change or otherwise has the potential to impact performance on the UI thread, you often need to explicitly enable the animation to see it run. これを行うのが、特定のアニメーション クラスに用意されている EnableDependentAnimation プロパティです。That's what the EnableDependentAnimation property on specific animation classes is for. 詳しくは、「依存型および独立型アニメーション」をご覧ください。See Dependent and independent animations for more info.
  • カスタム イージング関数は現在 Windows ランタイムではサポートされていません。Custom easing functions are not currently supported in the Windows Runtime.

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

ストーリーボードに設定されたアニメーションは、依存関係プロパティの値を時間の関数として変更する手段です。A storyboarded animation is a way to change the value of a dependency property as a function of time. アニメーション化するプロパティは、アプリの UI に直接影響するプロパティであるとは限りません。The property you are animating is not always a property that directly affects the UI of your app. ただし、XAML はアプリ UI を定義するものであるため、通常は、アニメーション化の対象となる UI 関連のプロパティです。But since XAML is about defining UI for an app, usually it is a UI-related property you are animating. たとえば、RotateTransform の角度やボタンの背景色の値をアニメーション化することができます。For example, you can animate the angle of a RotateTransform, or the color value of a button's background.

ストーリーボードに設定されたアニメーションを定義する主な場面の 1 つは、コントロールの作成や再テンプレート化を担当しており、表示状態を定義する必要があるときです。One of the main reasons you might be defining a storyboarded animation is if you are a control author or are re-templating a control, and you are defining visual states. 詳しくは、「表示状態用にストーリーボードに設定されたアニメーション」をご覧ください。For more info, see Storyboarded animations for visual states.

表示状態とアプリのカスタム アニメーションのどちらを定義するときも、このトピックで説明するストーリーボードに設定されたアニメーションの概念と API はほぼ適用できます。Whether you are defining visual states or a custom animation for an app, the concepts and APIs for storyboarded animations that are described in this topic mostly apply to either.

アニメーション化するためには、ストーリーボードに設定されたアニメーションでターゲットに設定するプロパティが依存関係プロパティである必要があります。In order to be animated, the property you are targeting with a storyboarded animation must be a dependency property. 依存関係プロパティは、Windows ランタイム XAML 実装の重要な機能です。A dependency property is a key feature of the Windows Runtime XAML implementation. 通常、一般的な UI 要素の書き込み可能なプロパティは依存関係プロパティとして実装されるため、アニメーション化したり、データ バインディング値を適用したり、Style を適用し、Setter でプロパティのターゲット設定を行ったりできます。The writeable properties of most common UI elements are typically implemented as dependency properties, so that you can animate them, apply data-bound values, or apply a Style and target the property with a Setter. 依存関係プロパティのしくみについて詳しくは、「依存関係プロパティの概要」をご覧ください。For more info about how dependency properties work, see Dependency properties overview.

ほとんどの場合、ストーリーボードに設定されたアニメーションを定義するには XAML を記述します。Most of the time, you define a storyboarded animation by writing XAML. Microsoft Visual Studio などのツールを利用すれば、XAML は自動的に生成されます。If you use a tool such as Microsoft Visual Studio, it will produce the XAML for you. ストーリーボードに設定されたアニメーションをコードを使って定義することもできますが、あまり一般的ではありません。It's possible to define a storyboarded animation using code too, but that's less common.

シンプルな例を見てみましょう。Let's look at a simple example. この XAML の例では、Opacity プロパティを特定の Rectangle オブジェクトでアニメーション化しています。In this XAML example, the Opacity property is animated on a particular Rectangle object.

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

アニメーション化の対象となるオブジェクトの指定Identifying the object to animate

先ほどの例では、ストーリーボードで RectangleOpacity プロパティがアニメーション化されています。In the previous example, the storyboard was animating the Opacity property of a Rectangle. オブジェクト自体ではアニメーションを宣言しません。You don't declare the animations on the object itself. 代わりに、ストーリーボードのアニメーション定義内で宣言します。Instead, you do this within the animation definition of a storyboard. ストーリーボードは、アニメーション化するオブジェクトの XAML UI 定義のすぐ近くにない XAML で定義されるのが普通です。Storyboards are usually defined in XAML that's not in the immediate vicinity of the XAML UI definition of the object to animate. 代わりに、通常は、XAML リソースとして設定します。Instead, they're usually set up as a XAML resource.

ターゲットにアニメーションを接続するには、識別用のプログラミング名でターゲットを参照します。To connect an animation to a target, you reference the target by its identifying programming name. 必ず XAML UI 定義の x:Name 属性を適用して、アニメーション化するオブジェクトに名前を付けてください。You should always apply the x:Name attribute in the XAML UI definition to name the object that you want to animate. その後で、アニメーション定義内の Storyboard.TargetName を設定することで、アニメーション化するオブジェクトのターゲット設定を行います。You then target the object to animate by setting Storyboard.TargetName within the animation definition. Storyboard.TargetName の値には、ターゲット オブジェクトの名前文字列を使います。これは、前に別の場所で x:Name 属性を使って設定した値です。For the value of Storyboard.TargetName, you use the name string of the target object, which is what you set earlier and elsewhere with x:Name attribute.

アニメーション化する依存関係プロパティの指定Targeting the dependency property to animate

アニメーションの Storyboard.TargetProperty の値を設定します。You set a value for Storyboard.TargetProperty in the animation. これにより、アニメーション化するターゲット オブジェクトのプロパティが決まります。This determines which specific property of the targeted object is animated.

ターゲット オブジェクトの直接のプロパティではないプロパティをターゲットにする必要があることもありますが、オブジェクトとプロパティの関係の中でより深い入れ子の状態になります。Sometimes you need to target a property that's not an immediate property of the target object, but that is nested more deeply in an object-property relationship. アニメーション化できるプロパティの型 (DoublePointColor) を参照できるまで、関係する一連のオブジェクトとプロパティの値をドリルダウンするために、これが必要になることがよくあります。You often need to do this in order to drill down into a set of contributing object and property values until you can reference a property type that can be animated (Double, Point, Color). この概念を "間接的なターゲット設定" と呼び、この方法でアニメーションの対象プロパティを設定する構文を "プロパティ パス" と呼びます。This concept is called indirect targeting, and the syntax for targeting a property in this way is known as a property path.

次に例を示します。Here's an example. ストーリーボードに設定されたアニメーションの一般的なシナリオの 1 つに、コントロールが特定の状態にあることを表すためにアプリ UI やコントロールの一部の色を変更するというシナリオがあります。One common scenario for a storyboarded animation is to change the color of a part of an app UI or control in order to represent that the control is in a particular state. たとえば、赤から緑に変化するように TextBlockForeground をアニメーション化するとします。Say you want to animate the Foreground of a TextBlock, so that it turns from red to green. ColorAnimation の呼び出しが必要と思われるでしょう。それは正しいものの、You'd expect that a ColorAnimation is involved, and that's correct. オブジェクトの色に影響する UI 要素のプロパティは、実際には Color 型ではなく、However, none of the properties on UI elements that affect the object's color are actually of type Color. Brush 型です。Instead, they're of type Brush. そのため、アニメーションのターゲット設定に実際に必要なのは、SolidColorBrush クラスの Color プロパティです。これは、これらの色関連の UI プロパティに一般的に使われる Brush 派生型です。So what you actually need to target for animation is the Color property of the SolidColorBrush class, which is a Brush-derived type that's typically used for these color-related UI properties. アニメーションのプロパティのターゲット設定に使うプロパティ パスの作成という点に注目すると、次のようになります。And here's what that looks like in terms of forming a property path for your animation's property targeting:

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

この構文について、各部分に注目して説明します。Here's how to think of this syntax in terms of its parts:

  • プロパティ名は、かっこ () の各セットで囲みます。Each set of () parentheses encloses a property name.
  • プロパティ名の中にドットがありますが、そのドットは型名とプロパティ名を区切って対象のプロパティを明確にするためのものです。Within the property name, there's a dot, and that dot separates a type name and a property name, so that the property you're identifying is unambiguous.
  • かっこ内にない中央のドットはステップを表します。The dot in the middle, the one that's not inside parentheses, is a step. これは、最初のプロパティ (オブジェクト) の値を受け取り、オブジェクト モデルをステップ実行してから、最初のプロパティの値の特定のサブプロパティをターゲットとするという意味に解釈されます。This is interpreted by the syntax to mean, take the value of the first property (which is an object), step into its object model, and target a specific sub-property of the first property's value.

次に、アニメーションのターゲット設定のシナリオを示します。おそらくこうしたシナリオでは、間接的なプロパティのターゲット設定と、使う構文に似たプロパティ パス文字列を使うことになります。Here's a list of animation targeting scenarios where you'll probably be using indirect property targeting, and some property path strings that approximates the syntax you'll use:

これらの例の一部では、数を囲む角かっこが使われていることがわかります。You'll notice some of these examples use square brackets around numbers. これはインデクサーです。This is an indexer. 前のプロパティ名に値としてコレクションが含まれており、そのコレクション内からの項目 (0 から始まるインデックスで識別される) が必要であることを示しています。It indicates that the property name preceding it has a collection as value, and that you want an item (as identified by a zero-based index) from within that collection.

XAML 添付プロパティをアニメーション化することもできます。You can also animate XAML attached properties. (Canvas.Left) のように、必ず完全な添付プロパティの名前をかっこで囲んでください。Always enclose the full attached property name in parentheses, for example (Canvas.Left). 詳しくは、「XAML 添付プロパティのアニメーション化」をご覧ください。For more info, see Animating XAML attached properties.

アニメーション化するプロパティの間接的なターゲット設定をプロパティ パスで行う方法について詳しくは、「プロパティ パス構文」または「Storyboard.TargetProperty 添付プロパティ」をご覧ください。For more info on how to use a property path for indirect targeting of the property to animate, see Property-path syntax or Storyboard.TargetProperty attached property.

アニメーション型Animation types

Windows ランタイムのアニメーション システムには、ストーリーボードに設定されたアニメーションを適用できる 3 つの型があります。The Windows Runtime animation system has three specific types that storyboarded animations can apply to:

また、後ほど説明するオブジェクトの参照値に使える汎用 Object アニメーション型もあります。There's also a generalized Object animation type for object reference values, which we'll discuss later.

アニメーション化された値の指定Specifying the animated values

オブジェクトとプロパティをアニメーション化のターゲットとして設定する方法については以上ですが、アニメーションを実行するとプロパティ値にどのような影響があるかについてはまだ説明していません。So far we've shown you how to target the object and the property to animate, but haven't yet described what the animation does to the property value when it runs.

ここまでで説明したアニメーションの種類は、From/To/By アニメーションとも呼ばれます。The animation types we've described are sometimes referred to as From/To/By animations. これは、アニメーションが、アニメーション定義からのこれらの入力の 1 つ以上を使って、時間の経過と共にプロパティの値を変更することを意味します。This means that the animation is changing the value of a property, over time, using one or more of these inputs that come from the animation definition:

  • 開始値は From です。The value starts at the From value. From 値を指定しない場合、開始値は、アニメーション化されたプロパティにアニメーションの実行前に設定されていた値になります。If you don't specify a From value, the starting value is whatever value the animated property has at the time before the animation runs. これは、既定値、スタイルまたはテンプレートからの値、XAML UI 定義またはアプリ コードによって個別に適用された値のいずれかである可能性があります。This might be a default value, a value from a style or template, or a value specifically applied by a XAML UI definition or app code.
  • アニメーションの終了時の値は To 値です。At the end of the animation, the value is the To value.
  • 開始値を基準とする相対的な終了値を指定するには、By プロパティを設定します。Or, to specify an ending value relative to the starting value, set the By property. To のプロパティの代わりに、これを設定します。You'd set this instead of the To property.
  • To 値または By 値を指定しない場合、終了値は、アニメーション化されたプロパティにアニメーションの実行前に設定されていた値になります。If you don't specify a To value or a By value, the ending value is whatever value the animated property has at the time before the animation runs. この場合は、From 値をお勧めします。そうしないと、アニメーションによって値がまったく変更されず、開始値と終了値が同じになるためです。In this case you'd better have a From value because otherwise the animation won't change the value at all; its starting and ending values are both the same.
  • アニメーションには FromBy、または To のうち少なくとも 1 つが指定されるのが一般的ですが、3 つすべてが指定されることはありません。An animation typically has at least one of From, By or To but never all three.

前の XAML の例に戻り、From 値と To 値、それに Duration をもう一度見てみましょう。Let's revisit the earlier XAML example and look again at the From and To values, and the Duration. この例では Opacity プロパティをアニメーション化します。Opacity のプロパティ型は Double です。The example is animating the Opacity property, and the property type of Opacity is Double. そのため、ここで使うアニメーションは DoubleAnimation です。So the animation to use here is DoubleAnimation.

From="1.0" To="0.0" は、アニメーション開始時の Opacity プロパティの初期値が 1 で、これが 0 になるまでアニメーション化することを示します。From="1.0" To="0.0" specifies that when the animation runs, the Opacity property starts at a value of 1 and animates to 0. つまり、これらの Double 値が Opacity プロパティに与える効果は、当初不透明な状態のオブジェクトを徐々に透明にするというものです。In other words, in terms of what these Double values mean to the Opacity property, this animation will cause the object to start opaque and then fade to transparent.

...
<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="0:0:1" specifies how long the animation lasts, that is, how fast the rectangle fades. Duration プロパティは、時間::という形式で指定します。A Duration property is specified in the form of hours:minutes:seconds. この例のアニメーションの継続時間は 1 秒ということになります。The time duration in this example is one second.

Duration 値と XAML 構文について詳しくは、「Duration」をご覧ください。For more info about Duration values and the XAML syntax, see Duration.

注意

紹介した例の場合、アニメーション化するオブジェクトの開始状態の Opacity が既定値か明示的な設定かを問わず常に 1 である場合は、From 値を省略できます。そのときアニメーションでは暗黙的な開始値が使われ、同じ結果になります。For the example we showed, if you were sure that the starting state of the object being animated has Opacity always equal to 1, either through the default or an explicit set, you could omit the From value, the animation would use the implicit starting value, and the result would be the same.

From/To/By では null が許容されるFrom/To/By are nullable

FromTo、または By は省略でき、省略した値の代わりにアニメーション化されない現在の値を使うことができると説明しました。We mentioned previously that you can omit From, To or By and thus use current non-animated values as substitutes for a missing value. アニメーションの FromToBy の各プロパティは、想定した型ではない場合があります。From, To, or By properties of an animation aren't of the type you might guess. たとえば、DoubleAnimation.To プロパティの型は Double ではなく、For example the type of the DoubleAnimation.To property isn't Double. Double に対しては Nullable です。Instead, it's a Nullable for Double. 既定値は 0 ではなく null です。And its default value is null, not 0. null 値により、アニメーション システムは、FromTo、または By プロパティの値が明示的に設定されていないことを識別します。That null value is how the animation system distinguishes that you haven't specifically set a value for a From, To, or By property. Visual C コンポーネント拡張 (C +/cli CX) がない、 Nullable型であるため、使用して IReference 代わりにします。Visual C++ component extensions (C++/CX) doesn't have a Nullable type, so it uses IReference instead.

アニメーションのその他のプロパティOther properties of an animation

次のセクションで説明するプロパティはいずれも省略可能であり、ほとんどのアニメーションに適した既定値を持ちます。The next properties described in this section are all optional in that they have defaults that are appropriate for most animations.

AutoReverseAutoReverse

アニメーションで AutoReverse または RepeatBehavior を指定しなかった場合、そのアニメーションは 1 回実行され、さらに Duration で指定された期間実行されます。If you don't specify either AutoReverse or RepeatBehavior on an animation, that animation will run once, and run for the time specified as the Duration.

AutoReverse プロパティは、Duration の最後に達した後で逆にタイムラインを再生するかどうかを指定します。The AutoReverse property specifies whether a timeline plays in reverse after it reaches the end of its Duration. これを true に設定すると、アニメーションは宣言済みの Duration の最後に達した後で逆に再生され、値がその終了値 (To) から開始値 (From) に変更されます。If you set it to true, the animation reverses after it reaches the end of its declared Duration, changing the value from its ending value (To) back to its starting value (From). これは、アニメーションが実質的に Duration の倍の時間実行されることを表します。This means that the animation effectively runs for double the time of its Duration.

RepeatBehaviorRepeatBehavior

RepeatBehavior プロパティは、タイムラインの再生回数か、タイムラインを繰り返すより長い期間を指定します。The RepeatBehavior property specifies either how many times a timeline plays, or a larger duration that the timeline should repeat within. 既定では、タイムラインの反復回数は "1x" であり、その Duration の間に 1 回再生され、繰り返されません。By default, a timeline has an iteration count of "1x", which means it plays one time for its Duration and does not repeat.

アニメーションが複数回反復して実行されるようにすることができます。You can cause the animation to run multiple iterations. たとえば、値 "3x" により、アニメーションは 3 回実行されます。For example, a value of "3x" causes the animation to run three times. また、RepeatBehavior に別の Duration を指定することもできます。Or, you can specify a different Duration for RepeatBehavior. その Duration は、アニメーション自体の Duration よりも長くしてください。That Duration should be longer than the Duration of the animation itself to be effective. たとえば、Duration が "0:0:2" のアニメーションに対して RepeatBehavior を "0:0:10" に指定した場合、アニメーションは 5 回繰り返されます。For example, if you specify a RepeatBehavior of "0:0:10", for an animation that has a Duration of "0:0:2", that animation repeats five times. この値が割り切れない場合、RepeatBehavior の時間に達した時点でアニメーションは途切れてしまいます。If these don't divide evenly, the animation gets truncated at the time that the RepeatBehavior time is reached, which might be partway through. 最後に、特別な "Forever" という値を指定することもできます。この値を指定すると、アニメーションは意図的に停止されるまで無限に実行されます。Finally, you can specify the special value "Forever", which causes the animation to run infinitely until it's deliberately stopped.

RepeatBehavior 値と XAML 構文について詳しくは、「RepeatBehavior」をご覧ください。For more info about RepeatBehavior values and the XAML syntax, see RepeatBehavior.

FillBehavior ="Stop"FillBehavior="Stop"

既定では、アニメーションが終了すると、その継続期間を超過した後も、プロパティ値は最終的な To か、By で変更された値で維持されます。By default, when an animation ends, the animation leaves the property value as the final To or By-modified value even after its duration is surpassed. ただし、FillBehavior プロパティの値を FillBehavior.Stop に設定した場合、アニメーション化された値はアニメーションが適用される前の値か、より正確には、依存関係プロパティ システムによって特定された現在の有効な値に戻ります (この違いについて詳しくは、「依存関係プロパティの概要」をご覧ください)。However, if you set the value of the FillBehavior property to FillBehavior.Stop, the value of the animated value reverts to whatever the value was before the animation was applied, or more precisely to the current effective value as determined by the dependency property system (for more info on this distinction, see Dependency properties overview).

BeginTimeBeginTime

既定では、アニメーションの BeginTime は "0:0:0" であるため、上位の Storyboard の実行と同時に開始されます。By default, the BeginTime of an animation is "0:0:0", so it begins as soon as its containing Storyboard runs. この動作は、Storyboard に複数のアニメーションが含まれており、アニメーションどうしの開始のタイミングをずらしたり、開始のタイミングを意図的に少し遅らせたりする場合には、変更できます。You might change this if the Storyboard contains more than one animation and you want to stagger the start times of the others versus an initial animation, or to create a deliberate short delay.

SpeedRatioSpeedRatio

Storyboard に複数のアニメーションがある場合は、Storyboard を基準に 1 つ以上のアニメーションのタイム レートを変更できます。If you have more than one animation in a Storyboard you can change the time rate of one or more of the animations relative to the Storyboard. これは、アニメーションの実行中に経過する Duration 時間を最終的に制御する親 Storyboard です。It's the parent Storyboard that ultimately controls how the Duration time elapses while the animations run. このプロパティはあまり利用されません。This property isn't used very often. 詳しくは、「SpeedRatio」をご覧ください。For more info see SpeedRatio.

Storyboard での複数のアニメーションの定義Defining more than one animation in a Storyboard

Storyboard のコンテンツとして、複数のアニメーション定義を設定できます。The contents of a Storyboard can be more than one animation definition. 同じターゲット オブジェクトの 2 種類のプロパティに関連のアニメーションを適用している場合は、複数のアニメーションが存在する可能性があります。You might have more than one animation if you are applying related animations to two properties of the same target object. たとえば、UI 要素の RenderTransform として使われる TranslateTransformTranslateX プロパティと TranslateY プロパティを両方とも変更する必要がある場合は、要素は対角線状に変換されます。For example, you might change both the TranslateX and TranslateY properties of a TranslateTransform used as the RenderTransform of a UI element; this will cause the element to translate diagonally. そのためには 2 つのアニメーションが必要ですが、それらを常に一緒に実行するために、同じ Storyboard に設定したい場合もあります。You need two different animations to accomplish that, but you might want the animations to be part of the same Storyboard because you always want those two animations to be run together.

これらのアニメーションは同じ型でなくてもよく、同じオブジェクトをターゲットにする必要もありません。The animations don't have to be the same type, or target the same object. 継続時間が違っていてもかまわず、プロパティ値を共有する必要はありません。They can have different durations, and don't have to share any property values.

Storyboard が実行されると、その中の各アニメーションも実行されます。When the parent Storyboard runs, each of the animations within will run too.

Storyboard クラスには、実際にはアニメーション型と同様に多数の同じアニメーション プロパティがあります。どちらも Timeline 基底クラスを共有しているためです。The Storyboard class actually has a lot of the same animation properties as the animation types do, because both share the Timeline base class. そのため、Storyboard には RepeatBehaviorBeginTime を設定できます。Thus, a Storyboard can have a RepeatBehavior, or a BeginTime. 通常は、含まれるすべてのアニメーションにその動作を持たせる場合を除いて、これらを Storyboard に設定することはありません。You don't usually set these on a Storyboard though unless you want all the contained animations to have that behavior. 一般に、Storyboard に設定されている Timeline プロパティはそのすべての子アニメーションに適用されます。As a general rule, any Timeline property as set on a Storyboard applies to all its child animations. 非設定の場合、Storyboard には、含まれるアニメーションの最も長い Duration 値から計算された暗黙的な継続時間が使われます。If let unset, the Storyboard has an implicit duration that's calculated from the longest Duration value of the contained animations. 子アニメーションのいずれかよりも短い DurationStoryboard に明示的に設定すると、そのアニメーションは途中で途切れてしまいます。これは、通常は望ましくありません。An explicitly set Duration on a Storyboard that's shorter than one of its child animations will cause that animation to get cut off, which isn't usually desirable.

ストーリーボードには、同じオブジェクトの同じプロパティをターゲットにしてアニメーション化する 2 つのアニメーションを含めることはできません。A storyboard can't contain two animations that attempt to target and animate the same property on the same object. これを試みると、ストーリーボードの実行を試みたときにランタイム エラーが発生します。If you try this, you'll get a runtime error when the storyboard tries to run. この制限は、BeginTime 値と継続時間が意図的に異なる設定になっているためにアニメーションが時間的に重ならない場合でも適用されます。This restriction applies even if the animations don't overlap in time because of deliberately different BeginTime values and durations. 実際に 1 つのストーリーボードで同じプロパティにより複雑なアニメーション タイムラインを適用する場合は、キー フレーム アニメーションを使います。If you really want to apply a more complex animation timeline to the same property in a single storyboard, the way to do this is to use a key-frame animation. キーフレームとイージング関数のアニメーション」をご覧ください。See Key-frame and easing function animations.

アニメーション システムは、複数のアニメーションをプロパティの値に適用できます (それらが複数のストーリーボードからの入力である場合)。The animation system can apply more than one animation to the value of a property, if those inputs come from multiple storyboards. 意図的にこの動作を使って同時にストーリーボードを実行するのは一般的ではありません。Using this behavior deliberately for simultaneously running storyboards isn't common. ただし、コントロールのプロパティに適用する、アプリで定義されたアニメーションによって、コントロールの表示状態モデルの一部として以前に実行されたアニメーションの HoldEnd 値が変更される可能性があります。However it's possible that an app-defined animation that you apply to a control property will be modifying the HoldEnd value of an animation that was previously run as part of the control's visual state model.

リソースとしてのストーリーボードの定義Defining a storyboard as a resource

Storyboard は、アニメーション オブジェクトを入れるコンテナーです。A Storyboard is the container that you put animation objects in. Storyboard は、ページ レベルの Resources または Application.Resources で、アニメーション化の対象となるオブジェクトから利用できるリソースとして定義するのが一般的です。You typically define the Storyboard as a resource that is available to the object that you want to animate, either in page-level Resources or Application.Resources.

次の例は、前の例の Storyboard がページ レベルの Resources の定義にどのように含まれているかを示しており、Storyboard は、ルート Page のキーを持つリソースです。This next example shows how the previous example Storyboard would be contained in a page-level Resources definition, where the Storyboard is a keyed resource of the root Page. x:Name 属性に注目してください。Note the x:Name attribute. この属性は、コードだけでなく XAML の他の要素でも後から Storyboard を参照できるように、Storyboard に対して変数名を定義する方法を示しています。This attribute is how you define a variable name for the Storyboard, so that other elements in XAML as well as code can refer to the Storyboard later.

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

リソースを XAML ファイル (page.xaml や app.xaml など) の XAML ルートで定義する方法は、キーを持つリソースを XAML で編成する場合の一般的な方法です。Defining resources at the XAML root of a XAML file such as page.xaml or app.xaml is a common practice for how to organize keyed resources in your XAML. リソースを別個のファイルに分け、アプリやパッケージにマージすることもできます。You also can factor resources into separate files and merge them into apps or pages. 詳しくは、「ResourceDictionary と XAML リソースの参照」をご覧ください。For more info, see ResourceDictionary and XAML resource references.

注意

Windows ランタイムの XAML は x:Key 属性x: Name 属性を使ったリソースの識別をサポートします。Windows Runtime XAML supports identifying resources either using the x:Key attribute or the x:Name attribute. Storyboard では x: Name 属性を使う方が一般的です。これを変数名を使って参照することになるためで、その Begin メソッドを後で呼び出してアニメーションを実行できるようにする目的があります。Using x:Name attribute is more common for a Storyboard, because you'll want to reference it by variable name eventually, so that you can call its Begin method and run the animations. x:Key 属性を使う場合は、Item インデクサーなどの ResourceDictionary メソッドを使ってキーを持つリソースとしてそれを取得し、取得したオブジェクトを Storyboard にキャストして、Storyboard メソッドを使う必要があります。If you do use x:Key attribute, you'll need to use ResourceDictionary methods such as the Item indexer to retrieve it as a keyed resource and then cast the retrieved object to Storyboard to use the Storyboard methods.

表示状態用のストーリーボードStoryboards for visual states

また、コントロールの見た目に対して表示状態のアニメーションを宣言する場合は、アニメーションを Storyboard ユニットに含めます。You also put your animations within a Storyboard unit when you are declaring the visual state animations for a control's visual appearance. その場合、定義する Storyboard 要素は、Style (キーを持つリソースである Style) 内でより深く入れ子にされる VisualState コンテナーに含めます。In that case the Storyboard elements you define go into a VisualState container that's nested more deeply in a Style (it's the Style that is the keyed resource). この場合、Storyboard に対してキーや名前は必要ありません。それは、これが、VisualStateManager が呼び出すことができるターゲットの名前を持つ VisualState であるためです。You don't need a key or name for your Storyboard in this case because it's the VisualState that has a target name that the VisualStateManager can invoke. ページまたはアプリの Resources コレクションに配置する代わりに、コントロールのスタイルを別個の XAML ResourceDictionary ファイルに格納する方法は一般的な方法です。The styles for controls are often factored into separate XAML ResourceDictionary files rather than placed in a page or app Resources collection. 詳しくは、「表示状態用にストーリーボードに設定されたアニメーション」をご覧ください。For more info, see Storyboarded animations for visual states.

依存型および独立型アニメーションDependent and independent animations

ここで、アニメーション システムの動作についていくつか重要な点を紹介しておきます。At this point we need to introduce some important points about how the animation system works. 特に、アニメーションには、Windows ランタイム アプリが画面にレンダリングされるしくみや、そのレンダリングでの処理スレッドの使い方と深い関係があります。In particular, animation interacts fundamentally with how a Windows Runtime app renders to the screen, and how that rendering uses processing threads. Windows ランタイム アプリには常にメイン UI スレッドがあり、このスレッドで現在の情報を基に画面を更新します。A Windows Runtime app always has a main UI thread, and this thread is responsible for updating the screen with current information. また、Windows ランタイム アプリには合成スレッドがあります。このスレッドは、レイアウトを表示の直前に事前計算するために使われます。In addition, a Windows Runtime app has a composition thread, which is used for precalculating layouts immediately before they are shown. UI をアニメーション化すると、UI スレッドに対し多数の処理が発生する可能性があります。When you animate the UI, there's potential to cause a lot of work for the UI thread. システムは、各更新間の非常に短い時間を使って画面の大きな領域を再描画しなければなりません。The system must redraw large areas of the screen using fairly short time intervals between each refresh. これはアニメーション化されたプロパティの最新のプロパティ値を取得するために必要です。This is necessary for capturing the latest property value of the animated property. 注意しないと、アニメーションによって UI の応答性が低下したり、同じ UI スレッドにある他のアプリ機能のパフォーマンスに影響したりするおそれがあります。If you're not careful, there's risk that an animation can make the UI less responsive, or will impact performance of other app features that are also on the same UI thread.

UI スレッドの処理を遅くする可能性があると判断された各種アニメーションは、依存型アニメーションと呼ばれます。The variety of animation that is determined to have some risk of slowing down the UI thread is called a dependent animation. この心配のないアニメーションは独立型アニメーションと呼ばれます。An animation not subject to this risk is an independent animation. 依存型アニメーションと独立型アニメーションの違いは、先ほど説明したアニメーションの型 (DoubleAnimation など) だけでは決まりません。The distinction between dependent and independent animations isn't just determined by animation types (DoubleAnimation and so on) as we described earlier. アニメーション化するプロパティや、コントロールの継承や複合などの要因によって決まります。Instead, it's determined by which specific properties you are animating, and other factors like inheritance and composition of controls. アニメーションで UI を変更しても、UI スレッドへの影響がごく小さく、アニメーションを合成スレッドによって独立型アニメーションとして処理できることもあります。There are circumstances where even if an animation does change UI, the animation can have minimal impact to the UI thread, and can instead be handled by the composition thread as an independent animation.

アニメーションに次のいずれかの特性がある場合は独立型と見なされます。An animation is independent if it has any of these characteristics:

警告

アニメーションが独立型であると見なされるためには、明示的に Duration="0" を設定する必要があります。In order for your animation to be treated as independent, you must explicitly set Duration="0". たとえば、この XAML から Duration="0" を削除した場合、フレームの KeyTime が "0:0:0" であった場合でも、アニメーションは独立型であると見なされます。For example, if you remove Duration="0" from this XAML, the animation is treated as dependent, even though the KeyTime of the frame is "0:0:0".

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

アニメーションがこれらの条件を満たしていない場合は、おそらく依存型アニメーションです。If your animation doesn't meet these criteria, it's probably a dependent animation. 既定では、アニメーション システムは依存型アニメーションを実行しません。By default, the animation system won't run a dependent animation. そのため、開発とテストのプロセス中に、アニメーションの実行を確認できない可能性もあります。So during the process of developing and testing, you might not even be seeing your animation running. このアニメーションを使うことはできるものの、こうした各依存型アニメーションを明示的に有効にする必要があります。You can still use this animation, but you must specifically enable each such dependent animation. アニメーションを有効にするには、アニメーション オブジェクトの EnableDependentAnimation プロパティを true に設定しますTo enable your animation, set the EnableDependentAnimation property of the animation object to true. (アニメーションを表す Timeline サブクラスごとにプロパティの実装は異なりますが、いずれも名前は EnableDependentAnimation です)。(Each Timeline subclass that represents an animation has a different implementation of the property but they're all named EnableDependentAnimation.)

アプリ開発者に課される依存型アニメーションを有効にするという要件は、開発経験を活かしたアニメーション システムにおける重要な設計の一側面です。The requirement of enabling dependent animations falling onto the app developer is a conscious design aspect of the animation system and the development experience. 開発者は、アニメーションには UI の応答性の低下というパフォーマンス コストが存在することに注意しなければなりません。We want developers to be aware that animations do have a performance cost for the responsiveness of your UI. パフォーマンスの低いアニメーションは、フルスケールのアプリでの分離とデバッグが困難です。Poorly performing animations are difficult to isolate and debug in a full-scale app. そのため、アプリの UI エクスペリエンスに実際に必要な依存型アニメーションだけを有効にする方が適切です。So it's better to turn on only the dependent animations you really need for your app's UI experience. 多くのサイクルを使う装飾的なアニメーションによりアプリのパフォーマンスが低下しないように注意する必要があります。We didn't want to make it too easy to compromise your app's performance because of decorative animations that use a lot of cycles. アニメーションのパフォーマンスに関するヒントについて詳しくは、「アニメーションとメディアの最適化」をご覧ください。For more info on performance tips for animation, see Optimize animations and media.

アプリ開発者は、EnableDependentAnimationtrue でも、依存型アニメーションを常に無効にするアプリ全体の設定を適用することもできます。As an app developer, you can also choose to apply an app-wide setting that always disables dependent animations, even those where EnableDependentAnimation is true. Timeline.AllowDependentAnimations」をご覧ください。See Timeline.AllowDependentAnimations.

ヒント

Blend for Visual Studio 2019 のアニメーション ウィンドウを使用しているは、visual state プロパティに依存するアニメーションを適用しようとしたときに場合、は、デザイナーで警告が表示されます。If you're using the Animation Pane in Blend for Visual Studio 2019, whenever you attempt to apply a dependent animation to a visual state property, warnings will be displayed in the designer. ビルド出力またはエラーの一覧で、警告は表示されません。Warnings will not show in the build output or Error List. XAML を手動で、編集する場合、デザイナーでは、警告が表示されません。If you're editing XAML by hand, the designer will not show a warning. 出力ウィンドウのデバッグ出力時のデバッグ時に、警告が表示されます、アニメーションは独立していないはスキップされます。At runtime when debugging, the Output pane's Debug output will show a warning that the animation is not independent and will be skipped.

アニメーションの開始と制御Starting and controlling an animation

ここまでで説明した内容だけでは、実際にはアニメーションは動作せず、適用もされません。Everything we've shown you so far doesn't actually cause an animation to run or be applied! アニメーションが開始および実行されるまでは、アニメーションが XAML で宣言している値の変更は行われません。Until the animation is started and is running, the value changes that an animation is declaring in XAML are latent and won't happen yet. アプリの有効期間またはユーザー エクスペリエンスに関連する何らかの方法で、アニメーションを明示的に開始する必要があります。You must explicitly start an animation in some way that's related to the app lifetime or the user experience. 最も単純なレベルでは、アニメーションの親である StoryboardBegin メソッドを呼び出してアニメーションを開始します。At the simplest level, you start an animation by calling the Begin method on the Storyboard that's the parent for that animation. XAML からメソッドを直接呼び出すことはできないため、アニメーションを有効にする場合は、必ずコードから行うことになります。You can't call methods from XAML directly, so whatever you do to enable your animations, you'll be doing it from code. アプリのページまたはコンポーネントのコード ビハインドか、コントロールのロジック (カスタム コントロール クラスを定義する場合) を使うことになります。That will either be the code-behind for the pages or components of your app, or perhaps the logic of your control if you're defining a custom control class.

通常は、Begin を呼び出し、継続時間が過ぎるまで単純にアニメーションを実行します。Typically, you'll call Begin and just let the animation run to its duration completion. ただし、PauseResumeStop メソッドを使って実行時に Storyboard を制御することも、高度なアニメーション コントロールのシナリオに使われるその他の API を使うこともできます。However, you can also use Pause, Resume and Stop methods to control the Storyboard at run-time, as well as other APIs that are used for more advanced animation control scenarios.

無限に繰り返すアニメーション (RepeatBehavior="Forever") を含むストーリーボードで Begin を呼び出すと、アニメーションは、それを含むページがアンロードされるか、Pause または Stop を明示的に呼び出すまで実行されます。When you call Begin on a storyboard that contains an animation that repeats infinitely (RepeatBehavior="Forever"), that animation runs until the page containing it is unloaded, or you specifically call Pause or Stop.

アプリ コードからのアニメーションの開始Starting an animation from app code

アニメーションは、自動的に開始することも、ユーザー操作に応答して開始することもできます。You can either start animations automatically, or in response to user actions. 自動的に開始する場合は、通常、アニメーション トリガーとして機能する Loaded などのオブジェクト有効期間イベントを使います。For the automatic case, you typically use an object lifetime event such as Loaded to act as the animation trigger. このとき便利なのが Loaded イベントです。その時点で UI は対話式操作に対応しているうえ、アニメーションが先頭で切れることもありません。UI の別の部分がまだ読み込んでいるためです。The Loaded event is a good event to use for this because at that point the UI is ready for interaction, and the animation won't be cut off at the beginning because another part of UI was still loading.

この例では、PointerPressed イベントを四角形に関連付けて、ユーザーが四角形をクリックしたときにアニメーションが開始されるようにしています。In this example, the PointerPressed event is attached to the rectangle so that when the user clicks the rectangle, the animation begins.

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

イベント ハンドラーは、StoryboardBegin メソッドを使って Storyboard (アニメーション) を開始します。The event handler start the Storyboard (the animation) by using the Begin method of the Storyboard.

myStoryboard.Begin();
myStoryboard().Begin();
myStoryboard->Begin();
myStoryBoard.Begin()

アニメーションが値を適用した後、他のロジックを実行する必要がある場合は、Completed イベントを処理できます。You can handle the Completed event if you want other logic to run after the animation has finished applying values. また、プロパティ システム/アニメーション操作のトラブルシューティングには、GetAnimationBaseValue メソッドが役立つ場合があります。Also, for troubleshooting property system/animation interactions, the GetAnimationBaseValue method can be useful.

ヒント

アプリ コードからアニメーションを開始するアプリのシナリオを実現するためにコードを記述している際に、アニメーションや切り替えが、独自の UI シナリオのためのアニメーション ライブラリに既に存在するかどうかをもう一度確かめたい場合があります。Whenever you are coding for an app scenario where you are starting an animation from app code, you might want to review again whether an animation or transition already exists in the animation library for your UI scenario. ライブラリ アニメーションは使いやすいうえ、すべての Windows ランタイム アプリで UI エクスペリエンスの一貫性を高めるのに役立ちます。The library animations enable a more consistent UI experience across all Windows Runtime apps, and are easier to use.

 

表示状態用のアニメーションAnimations for visual states

コントロールの表示状態を定義するために使われる Storyboard の実行動作は、アプリがストーリーボードを直接実行する方法とは異なります。The run behavior for a Storyboard that's used to define a control's visual state is different from how an app might run a storyboard directly. XAML で表示状態の定義に適用されるとおり、Storyboard は上位の VisualState の要素であり、状態全体は VisualStateManager API を使って制御されます。As applied to a visual state definition in XAML, the Storyboard is an element of a containing VisualState, and the state as a whole is controlled by using the VisualStateManager API. 含まれるアニメーションは、上位の VisualState がコントロールによって使われるときにアニメーション値と Timeline プロパティに従って実行されます。Any animations within will run according to their animation values and Timeline properties when the containing VisualState is used by a control. 詳しくは、「表示状態用にストーリーボードに設定されたアニメーション」をご覧ください。For more info, see Storyboards for visual states. 表示状態については、明確な FillBehavior は異なります。For visual states, the apparent FillBehavior is different. 表示状態が別の状態に変化すると、新しい表示状態でプロパティに新しいアニメーションを明示的に適用しない場合でも、前の表示状態とそのアニメーションによって適用されるすべてのプロパティの変更が取り消されます。If a visual state is changed to another state, all the property changes applied by the previous visual state and its animations are canceled, even if the new visual state doesn't specifically apply a new animation to a property.

StoryboardEventTriggerStoryboard and EventTrigger

XAML で完全に宣言できるアニメーションをある方法で開始できます。There is one way to start an animation that can be declared entirely in XAML. しかし、この手法は幅広く使われていません。However, this technique isn't widely used anymore. これは、VisualStateManager がサポートされる前の WPF と旧バージョンの Silverlight で使われていた構文です。It's a legacy syntax from WPF and early versions of Silverlight prior to VisualStateManager support. この EventTrigger 構文はインポートまたは互換性の理由から Windows ランタイム XAML でも機能するものの、FrameworkElement.Loaded イベントに基づくトリガー動作でのみ機能します。他のイベントのトリガーを試みると、例外がスローされるか、コンパイルに失敗します。This EventTrigger syntax still works in Windows Runtime XAML for import/compatibility reasons, but only works for a trigger behavior based on the FrameworkElement.Loaded event; attempting to trigger off other events will throw exceptions or fail to compile. 詳しくは、「EventTrigger」または「BeginStoryboard」をご覧ください。For more info, see EventTrigger or BeginStoryboard.

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

一般的なシナリオではありませんが、アニメーション化された値を XAML 添付プロパティに適用できます。It's not a common scenario, but you can apply an animated value to a XAML attached property. 添付プロパティの概要とその動作について詳しくは、「添付プロパティの概要」をご覧ください。For more info on what attached properties are and how they work, see Attached properties overview. 添付プロパティをターゲットとして設定するには、プロパティ名をかっこで囲むプロパティ パス構文が必要です。Targeting an attached property requires a property-path syntax that encloses the property name in parentheses. 個別の整数値を適用する ObjectAnimationUsingKeyFrames を使って、Canvas.ZIndex などの組み込み添付プロパティをアニメーション化することができます。You can animate the built-in attached properties such as Canvas.ZIndex by using an ObjectAnimationUsingKeyFrames that applies discrete integer values. ただし、Windows ランタイム XAML 実装の制限があるため、カスタム添付プロパティをアニメーション化することはできません。However, an existing limitation of the Windows Runtime XAML implementation is that you cannot animate a custom attached property.

その他のアニメーションの種類、UI のアニメーション化に関する次の学習ステップMore animation types, and next steps for learning about animating your UI

ここまで、2 つの値の間をアニメーション化し、アニメーションの実行中に必要に応じて値を線形補間するカスタム アニメーションについて見てきました。Up to now, we've shown the custom animations that are animating between two values, and then linearly interpolating the values as necessary while the animation runs. これらは、From/To/By アニメーションと呼ばれています。These are called From/To/By animations. これ以外に、開始から終了までの間の中間値を宣言できるタイプのアニメーションもあります。But there's another animation type that enables you to declare intermediate values that fall between the start and end. これらはキー フレーム アニメーションと呼ばれます。These are called key-frame animations. From/To/By アニメーションまたはキー フレーム アニメーションの補間ロジックを変更する方法もあります。There's also a way to alter the interpolation logic on either a From/To/By animation or a key-frame animation. それには、イージング関数を適用する必要があります。This involves applying an easing function. これらの概念について詳しくは、「キーフレームとイージング関数のアニメーション」をご覧ください。For more info on these concepts, see Key-frame and easing function animations.