方法 : 子タイムラインを使用してアニメーションを簡素化する

この例では、子 ParallelTimeline オブジェクトを使用してアニメーションを簡素化する方法を示します。 Storyboard は Timeline の型で、含まれる複数のタイムラインの対象情報を持っています。 Storyboard を使用して、オブジェクトおよびプロパティの情報を含むタイムラインの対象情報を提供します。

アニメーションを開始するには、1 つ以上の ParallelTimeline オブジェクトを、Storyboard の子要素として入れ子にして使用します。 この ParallelTimeline オブジェクトには、他のアニメーションを格納できるので、複雑なアニメーションのタイミング シーケンスを容易にカプセル化できます。 たとえば、1 つの TextBlock といくつかの図形を同じ Storyboard 内でアニメーション化する場合に、TextBlock のアニメーションと図形のアニメーションとを分離するには、それぞれを別の ParallelTimeline に配置します。 それぞれの ParallelTimeline には独自の BeginTime があり、ParallelTimeline のすべての子要素は、この BeginTime を基準として開始されるため、タイミングがより効率的にカプセル化されます。

この例では、2 つのテキスト (TextBlock オブジェクト) を同じ Storyboard 内からアニメーション化します。 ParallelTimeline は、1 つのTextBlock オブジェクトのアニメーションをカプセル化します。

パフォーマンスに関するメモ : Storyboard タイムラインどうしを入れ子にすることもできますが、入れ子にするには、オーバーヘッドの少ない ParallelTimeline の方が適しています (Storyboard クラスは ParallelTimeline クラスから継承されます)。

使用例

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas >

    <!-- TextBlock with text "ParallelTimelines are..." that gets animated. -->
    <TextBlock Name="FirstTextBlock" Canvas.Top="30" Canvas.Left="300" FontSize="24" >
      ParallelTimelines are...
      <TextBlock.RenderTransform>
        <TransformGroup>
          <SkewTransform x:Name="FirstTextBlockSkew" CenterX="25" CenterY="25" AngleX="0" AngleY="0" />
        </TransformGroup>
      </TextBlock.RenderTransform>
    </TextBlock>

    <!-- TextBlock with text "Useful" that gets animated. -->
    <TextBlock Name="SecondTextBlock" Opacity="0" Canvas.Top="30" Canvas.Left="585" FontSize="24" >
      Useful
      <TextBlock.RenderTransform>
        <TransformGroup>
          <SkewTransform x:Name="SecondTextBlockSkew" CenterX="25" CenterY="25" AngleX="0" AngleY="0" />
          <ScaleTransform x:Name="SecondTextBlockScale" CenterX="0" CenterY="24" />
        </TransformGroup>
      </TextBlock.RenderTransform>
    </TextBlock>

    <!-- Event Trigger that controls all animations on the page. -->
    <Canvas.Triggers>
      <EventTrigger RoutedEvent="Canvas.Loaded">
        <BeginStoryboard>
          <Storyboard>

            <!-- "ParallelTimelines are..." fades into view. -->
            <DoubleAnimation Storyboard.TargetName="FirstTextBlock"
            Storyboard.TargetProperty="Opacity" Duration="0:0:2" From="0" To="1" />

            <!-- "ParallelTimelines are..." skews to the left. -->
            <DoubleAnimation Storyboard.TargetName="FirstTextBlockSkew"
            Storyboard.TargetProperty="AngleX" Duration="0:0:1" BeginTime="0:0:2" From="0" To="45" />

            <!-- This ParallelTimeline contains all the animations for the TextBlock with the text
            "Useful" in it. This ParallelTimeline begins 4 seconds after the Storyboard timeline begins and all child
            animations begin relative to this parent timeline. -->
            <ParallelTimeline BeginTime="0:0:4">

              <!-- "Useful" fades into view. -->
              <DoubleAnimation Storyboard.TargetName="SecondTextBlock"
              Storyboard.TargetProperty="Opacity" Duration="0:0:2" From="0" To="1" />

              <!-- "Useful" slides in from the right. -->
              <DoubleAnimation Storyboard.TargetName="SecondTextBlockSkew"
              Storyboard.TargetProperty="AngleX" Duration="0:0:2" From="90" To="180" />

              <!-- "Useful" skews to the right. -->
              <DoubleAnimation Storyboard.TargetName="SecondTextBlockSkew"
              Storyboard.TargetProperty="AngleX" BeginTime="0:0:3" Duration="0:0:0.2" From="0" To="-60" />

              <!-- "Useful" Gets taller. -->
              <DoubleAnimation Storyboard.TargetName="SecondTextBlockScale"
              Storyboard.TargetProperty="ScaleY" BeginTime="0:0:3" Duration="0:0:0.2" From="1" To="3" />
            </ParallelTimeline>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Canvas.Triggers>
  </Canvas>
</Page>

参照

処理手順

方法 : ストーリーボード アニメーション間で HandoffBehavior を指定する

概念

アニメーションの概要