Поделиться через

Практическое руководство. Использование триггеров событий для управления анимацией после её запуска

  • Статья

В этом примере показано, как управлять Storyboard после запуска. Чтобы запустить Storyboard с помощью XAML, используйте BeginStoryboard, которая распределяет анимации по объектам и свойствам, которые она анимирует, а затем запускает сториборд. Когда вы даете BeginStoryboard имя, указав его свойство Name, вы делаете его управляемым раскадровкой. Затем вы можете интерактивно управлять раскадровкой после её запуска.

Используйте следующие действия сториборда вместе с объектами EventTrigger для управления сторибордом.

  • PauseStoryboard: приостановить сториборд.

  • ResumeStoryboard: возобновляет приостановленную раскадровку.

  • SetStoryboardSpeedRatio: изменяет скорость раскадровки.

  • SkipStoryboardToFill: перемещает раскадровку до конца её периода заполнения, если он существует.

  • StopStoryboard: останавливает сториборд.

  • RemoveStoryboard. Удаляет раскадровку, освобождает ресурсы.

Пример

В следующем примере используются контролируемые действия раскадровки для интерактивного управления раскадровкой.

Заметка

Чтобы увидеть пример управления раскадровкой с помощью кода, см. статью Управление раскадровкой после её запуска, используя интерактивные методы.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Controlling a Storyboard" >
  <StackPanel Margin="20" >

    <!-- This rectangle is animated. -->
    <Rectangle Name="myRectangle"
      Width="100" Height="20" Margin="12,0,0,5" Fill="#AA3333FF" HorizontalAlignment="Left" />

    <!-- This StackPanel contains all the Buttons. -->
    <StackPanel Orientation="Horizontal" Margin="0,30,0,0">

      <Button Name="BeginButton">Begin</Button>
      <Button Name="PauseButton">Pause</Button>
      <Button Name="ResumeButton">Resume</Button>
      <Button Name="SeekButton">Seek</Button>
      <Button Name="SkipToFillButton">Skip To Fill</Button>
      <Button Name="SetSpeedRatioButton">Triple Speed</Button>
      <Button Name="StopButton">Stop</Button>

      <StackPanel.Triggers>
        
        <!-- Begin the Storyboard -->
        <EventTrigger RoutedEvent="Button.Click" SourceName="BeginButton">
          <BeginStoryboard Name="MyBeginStoryboard">
            <Storyboard >
              <DoubleAnimation 
                Storyboard.TargetName="myRectangle" 
                Storyboard.TargetProperty="Width" 
                Duration="0:0:5" From="100" To="500" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>

        <!-- Pause the Storyboard -->
        <EventTrigger RoutedEvent="Button.Click" SourceName="PauseButton">
          <PauseStoryboard BeginStoryboardName="MyBeginStoryboard" />
        </EventTrigger>

        <!-- Resume the Storyboard -->
        <EventTrigger RoutedEvent="Button.Click" SourceName="ResumeButton">
          <ResumeStoryboard BeginStoryboardName="MyBeginStoryboard" />
        </EventTrigger>
 
         <!-- Seek one second into the storyboard's active period. -->
         <EventTrigger RoutedEvent="Button.Click" SourceName="SeekButton">
           <SeekStoryboard 
            BeginStoryboardName="MyBeginStoryboard" 
            Offset="0:0:1" Origin="BeginTime" />
        </EventTrigger>   

        <!-- Skip to Fill -->
        <EventTrigger RoutedEvent="Button.Click" SourceName="SkipToFillButton">
          <SkipStoryboardToFill BeginStoryboardName="MyBeginStoryboard" />
        </EventTrigger>

        <!-- Stop the Storyboard -->
        <EventTrigger RoutedEvent="Button.Click" SourceName="StopButton">
          <StopStoryboard BeginStoryboardName="MyBeginStoryboard" />
        </EventTrigger>
        
        <!-- Triple the speed of the Storyboard -->
        <EventTrigger RoutedEvent="Button.Click" SourceName="SetSpeedRatioButton">
          <SetStoryboardSpeedRatio SpeedRatio="3" BeginStoryboardName="MyBeginStoryboard" />
        </EventTrigger>
      </StackPanel.Triggers>
    </StackPanel>
  </StackPanel>
</Page>

Дополнительные примеры см. в коллекции примеров анимации.

См. также