다음을 통해 공유

방법: 자식 Timeline을 사용하여 애니메이션 단순화

  • 아티클

업데이트: 2007년 11월

이 예제에서는 자식 ParallelTimeline 개체를 사용하여 애니메이션을 단순화하는 방법을 보여 줍니다. Storyboard는 Storyboard에 포함된 Timeline에 대한 대상 정보를 제공하는 Timeline 형식입니다. Storyboard를 사용하면 개체 및 속성 정보를 비롯한 Timeline 대상 정보를 제공할 수 있습니다.

애니메이션을 시작하려면 하나 이상의 ParallelTimeline 개체를 Storyboard의 중첩된 자식 요소로 사용합니다. 이러한 ParallelTimeline 개체는 다른 애니메이션을 포함할 수 있으므로 복잡한 애니메이션의 타이밍 시퀀스를 더욱 효율적으로 캡슐화할 수 있습니다. 예를 들어 동일한 Storyboard에서 TextBlock 및 여러 모양에 애니메이션 효과를 주는 경우 TextBlock과 모양에 대한 애니메이션을 분리하여 각각을 별도의 ParallelTimeline에 배치할 수 있습니다. 각 ParallelTimeline에는 고유한 BeginTime이 있으며 ParallelTimeline의 모든 자식 요소는 이 BeginTime에 따라 시작되므로 타이밍을 더욱 효과적으로 캡슐화할 수 있습니다.

다음 예제에서는 동일한 Storyboard 내에서 텍스트 조각 두 개(TextBlock 개체)에 애니메이션 효과를 줍니다. ParallelTimeline은 TextBlock 개체 중 하나에 대한 애니메이션을 캡슐화합니다.

성능 참고 사항:Storyboard Timeline을 서로 중첩시킬 수 있지만 더 적은 오버헤드를 필요로 하는 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>

참고 항목

작업

방법: Storyboard 애니메이션 간의 HandoffBehavior 지정

개념

애니메이션 개요