Nasıl yapılır: Alt Öğe Zaman Çizelgelerini Kullanarak Animasyonları Basitleştirme

Bu örnek, alt nesneler kullanılarak animasyonların nasıl basitleştireceğinizi gösterir ParallelTimeline . , StoryboardTimeline İçerdiği zaman çizelgeleri için hedefleme bilgilerini sağlayan bir türüdür. StoryboardNesne ve özellik bilgileri de dahil olmak üzere, zaman çizelgesi hedefleme bilgilerini sağlamak için bir kullanın.

Bir animasyona başlamak için bir veya daha fazla ParallelTimeline nesneyi ' ın iç içe geçmiş alt öğeleri olarak kullanın Storyboard . Bu ParallelTimeline nesneler diğer animasyonları içerebilir ve bu nedenle, karmaşık animasyonlarda zamanlama dizilerini daha iyi kapsülleyebilirsiniz. Örneğin, bir TextBlock ve birden çok şekli aynı şekilde canlandırdıysanız, Storyboard ve şekillerin animasyonlarını ayrı ayrı koyarak ayrı ayrı ayarlayabilirsiniz TextBlockParallelTimeline . Her birinin ParallelTimeline kendisine BeginTime göre başlangıç ve tüm alt öğeleri olduğundan ParallelTimelineBeginTime , zamanlama daha iyi kapsüllenir.

Aşağıdaki örnek, iki metin parçasını ( TextBlock nesne) aynı içinden hareketlendirir Storyboard . ParallelTimeline, Nesnelerden birinin animasyonlarını Kapsüller TextBlock .

Performans notunun: Zaman çizelgelerini iç içe geçirebilirsiniz , ancak ParallelTimeline daha az ek yük gerektirdiğinden iç içe geçme için daha uygundur. ( Storyboard Sınıf sınıfından devralır ParallelTimeline .)

Örnek

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://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>

Ayrıca bkz.