Dela via

Anvisningar: Styra en animering med hjälp av Från, Till och Efter

  • Artikel

En "Från/till/av" eller "grundläggande animering" skapar en övergång mellan två målvärden (se Översikt över animering för en introduktion till olika typer av animeringar). Om du vill ange målvärdena för en grundläggande animering använder du dess egenskaper From, Tooch By. I följande tabell sammanfattas hur egenskaperna From, Tooch By kan användas tillsammans eller separat för att fastställa målvärden för en animering.

Angivna egenskaper Resulterande beteende
From Animeringen fortsätter från det värde som anges av egenskapen From till basvärdet för egenskapen som animeras eller till en tidigare animerings utdatavärde, beroende på hur den tidigare animeringen har konfigurerats.
From och To Animeringen fortsätter från det värde som anges av egenskapen From till det värde som anges av egenskapen To.
From och By Animeringen fortsätter från värdet som anges av egenskapen From till värdet som anges av summan av egenskaperna From och By.
To Animeringen fortsätter från den animerade egenskapens basvärde eller en tidigare animerings utdatavärde till det värde som anges av egenskapen To.
By Animeringen fortsätter från basvärdet för egenskapen som animerats eller en tidigare animerings utdatavärde till summan av det värdet och värdet som anges av egenskapen By.

Anteckning

Ange inte både egenskapen To och egenskapen By på samma animering.

Om du vill använda andra interpoleringsmetoder eller animera mellan fler än två målvärden använder du en animering av nyckelramen. Mer information finns i översikten över Key-Frame animeringar.

Information om hur du tillämpar flera animeringar på en enda egenskap finns i Key-Frame Översikt över animeringar.

Exemplet nedan visar de olika effekterna av att ange To, Byoch From egenskaper på animeringar.

Exempel

<!-- This example shows the different effects of setting
   To, By, and From properties on animations.  -->
<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <StackPanel Margin="20">

    <!-- Demonstrates the From and To properties used together. -->
    <Rectangle Name="fromToAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the To property. -->
    <Rectangle Name="toAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the By property. -->
    <Rectangle Name="byAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the From and By properties. -->
    <Rectangle Name="fromByAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the From property. -->
    <Rectangle Name="fromAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />
    <Button>
      Start Animations
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard FillBehavior="Stop">

              <!-- Demonstrates the From and To properties used together.
                 Animates the rectangle's Width property from 50 to 300 over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="fromToAnimatedRectangle" 
                Storyboard.TargetProperty="(Rectangle.Width)"
                From="50" To="300" Duration="0:0:10" />

              <!-- Demonstrates the To property used by itself.
                 Animates the Rectangle's Width property from its base value
                 (100) to 300 over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="toAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)"
                To="300" Duration="0:0:10" />

              <!-- Demonstrates the By property used by itself.
                 Increments the Rectangle's Width property by 300 over 10 seconds.
                 As a result, the Width property is animated from its base value
                 (100) to 400 (100 + 300) over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="byAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)" 
                By="300" Duration="0:0:10" />

              <!-- Demonstrates the From and By properties used together.
                 Increments the Rectangle's Width property by 300 over 10 seconds.
                 As a result, the Width property is animated from 50
                 to 350 (50 + 300) over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="fromByAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)" 
                From="50" By="300" Duration="0:0:10"  />

              <!-- Demonstrates the From property used by itself.
                 Animates the rectangle's Width property from 50 to its base value (100)
                 over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="fromAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)"
                From="50" Duration="0:0:10"  />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </StackPanel>
</Page>

Se även