Aracılığıyla paylaş

Nasıl yapılır: Animasyonu Yineleme

  • Makale

Bu örnekte, animasyonun RepeatBehavior yineleme davranışını denetlemek için özelliğinin Timeline nasıl kullanılacağı gösterilmektedir.

Örnek

özelliğinin RepeatBehavior özelliği, bir animasyonun Timeline basit süresini kaç kez yineleyeni denetler. kullanarak RepeatBehavior, bir Timeline yinelemenin belirli bir sayıda (yineleme sayısı) veya belirli bir süre için yineleneceğini belirtebilirsiniz. Her iki durumda da animasyon, istenen sayıyı veya süreyi doldurmak için ihtiyaç duyduğu kadar baştan sona çalıştırmadan geçer.

Varsayılan olarak, zaman çizelgelerinin yineleme sayısı 1,0'dır; bu da bir kez oynatıldığı ve tekrarlanmadığı anlamına gelir. Ancak, özelliğini TimelineForeverolarak ayarlarsanız RepeatBehavior zaman çizelgesi süresiz olarak yineler.

Aşağıdaki örnekte, bir animasyonun RepeatBehavior yineleme davranışını denetlemek için özelliğinin nasıl kullanılacağı gösterilmektedir. Örnek Width , farklı bir yineleme davranışı türü kullanarak her dikdörtgenle beş dikdörtgenin özelliğine animasyon ekler.

<!-- RepeatBehaviorExample.xaml
     This example shows how to use the RepeatBehavior property to make a timeline repeat. -->
<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="RepeatBehavior Example">
  
  <Border HorizontalAlignment="Stretch">
    <StackPanel Margin="20">

      <!-- Create several rectangles to animate. -->
      <Rectangle Name="ForeverRepeatingRectangle" 
        Fill="Orange" Width="50" Height="20" />
      <Rectangle Name="FourSecondsRepeatingRectangle" 
        Fill="Orange" Width="50" Height="20" />
      <Rectangle Name="TwiceRepeatingRectangle" 
        Fill="Orange" Width="50" Height="20" />
      <Rectangle Name="HalfRepeatingRectangle" 
        Fill="Orange" Width="50" Height="20" />
      <Rectangle Name="OneSecondRepeatingRectangle" 
        Fill="Orange" Width="50" Height="20" />

    
      <!-- Create buttons to restart and stop the animations. -->
      <StackPanel Orientation="Horizontal" Margin="0,20,0,0">
        <Button Name="restartButton">Start Animations</Button>
        <Button Name="stopButton" Background="#669900FF">Stop</Button>
        
        <StackPanel.Triggers>
          <EventTrigger SourceName="restartButton" RoutedEvent="Button.Click">
            <BeginStoryboard Name="myBeginStoryboard">
              <Storyboard>
              
                <!-- Create an animation that repeats indefinitely. -->
                <DoubleAnimation 
                  Storyboard.TargetName="ForeverRepeatingRectangle" 
                  Storyboard.TargetProperty="Width" 
                  From="50" To="300" Duration="0:0:2" RepeatBehavior="Forever" />
          
                <!-- Create an animation that repeats for four seconds. As a result, the
                     animation repeats twice. -->          
                <DoubleAnimation 
                  Storyboard.TargetName="FourSecondsRepeatingRectangle" 
                  Storyboard.TargetProperty="Width"
                  From="50" To="300" Duration="0:0:2" RepeatBehavior="0:0:4" />

                <!-- Create an animation that repeats twice. -->
                <DoubleAnimation 
                  Storyboard.TargetName="TwiceRepeatingRectangle" 
                  Storyboard.TargetProperty="Width" 
                  From="50" To="300" Duration="0:0:2" RepeatBehavior="2x" />     
          
                <!-- Create an animation that repeats 0.5 times. The resulting animation
                     plays for one second, half of its Duration. It animates from 50 to 150. -->
                <DoubleAnimation 
                  Storyboard.TargetName="HalfRepeatingRectangle" 
                  Storyboard.TargetProperty="Width" 
                  From="50" To="300" Duration="0:0:2" RepeatBehavior="0.5x" />
          
                <!-- Create an animation that repeats for one second. The resulting animation
                     plays for one second, half of its Duration. It animates from 50 to 150. -->
                <DoubleAnimation 
                  Storyboard.TargetName="OneSecondRepeatingRectangle" 
                  Storyboard.TargetProperty="Width" 
                  From="50" To="300" Duration="0:0:2" RepeatBehavior="0:0:1" />          
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>        
          <EventTrigger SourceName="stopButton" RoutedEvent="Button.Click">
            <StopStoryboard BeginStoryboardName="myBeginStoryboard" />
          </EventTrigger>
        </StackPanel.Triggers>
      </StackPanel>
    </StackPanel>
  </Border>
</Page>

Örneğin tamamı için bkz . Animasyon Zamanlama Davranışı Örneği.

Ayrıca bkz.