Практическое руководство. Упрощение анимации с помощью дочерних шкал времени
В этом примере показано, как упростить анимацию с помощью дочерних ParallelTimeline объектов. Timeline ТипStoryboard, предоставляющий сведения о целевых объектах для временная шкала, содержащихся в ней. Используйте для Storyboard предоставления временная шкала целевой информации, включая сведения об объектах и свойствах.
Чтобы начать анимацию, используйте один или несколько ParallelTimeline объектов в качестве вложенных дочерних элементов объекта Storyboard. Эти ParallelTimeline объекты могут содержать другие анимации и, следовательно, лучше инкапсулировать последовательности времени в сложных анимациях. Например, если вы анимируете TextBlock и несколько фигур в одной и той же Storyboardформе, можно разделить анимацию для TextBlock фигур и фигур, помещая каждую из них в отдельную ParallelTimeline. Так как каждый из них ParallelTimeline имеет собственный BeginTime и все дочерние элементы ParallelTimeline начала относительно этого BeginTime, время лучше инкапсулировано.
В следующем примере выполняется анимация двух частей текста (TextBlock объектов) из одного и того же Storyboard. Инкапсулирует ParallelTimeline анимацию одного из TextBlock объектов.
Примечание о производительности. Хотя вы можете вложить Storyboard временная шкала внутри друг друга, они более подходят для вложения, ParallelTimelineтак как они требуют меньше накладных расходов. (Класс Storyboard наследуется от ParallelTimeline класса.)
Пример
<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>
См. также
.NET Desktop feedback
Обратная связь
https://aka.ms/ContentUserFeedback.
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделеОтправить и просмотреть отзыв по