Udostępnij przez

Jak animować ciąg przy użyciu klatek kluczowych

W tym przykładzie pokazano, jak animować ciąg, który w tym przykładzie jest właściwością Content kontrolki Button przy użyciu klatek kluczowych.

Przykład

W poniższym przykładzie użyto klasy StringAnimationUsingKeyFrames do animowania właściwości Content obiektu Button.

Wszystkie kluczowe klatki w tym przykładzie używają instancji klasy DiscreteStringKeyFrame, ponieważ animacja stringu utworzona za pomocą klatek kluczowych może używać tylko dyskretnych klatek kluczowych. Dyskretne klatki kluczowe, takie jak DiscreteStringKeyFrame, powodują nagłe przeskoki między wartościami, czyli zmiany w animacji następują szybko i nie są subtelne.

<!-- Demonstrates the StringAnimationUsingKeyFrames class. A StringAnimationUsingKeyFrames is used to
   animate the TextContent property of a Text element. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.KeyFrameExamples.StringAnimationUsingKeyFramesExample"
  Name="myRootElement"
  WindowTitle="StringAnimationUsingKeyFrames Example">

  <StackPanel HorizontalAlignment="Center">
    <Button Name="myAnimatedButton" Margin="200"
      FontSize="16pt" FontFamily="Verdana">Some Text
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <StringAnimationUsingKeyFrames 
                Storyboard.TargetName="myAnimatedButton" Storyboard.TargetProperty="(Button.Content)"
                Duration="0:0:8" FillBehavior="HoldEnd">

                <!-- All the key frames below are DiscreteStringKeyFrames. Discrete key frames create 
                sudden "jumps" between values (no interpolation). Only discrete key frames can be used 
                for String key frame animations. -->
                <DiscreteStringKeyFrame Value="" KeyTime="0:0:0" />
                <DiscreteStringKeyFrame Value="A" KeyTime="0:0:1" />
                <DiscreteStringKeyFrame Value="An" KeyTime="0:0:1.5" />
                <DiscreteStringKeyFrame Value="Ani" KeyTime="0:0:2" />
                <DiscreteStringKeyFrame Value="Anim" KeyTime="0:0:2.5" />
                <DiscreteStringKeyFrame Value="Anima" KeyTime="0:0:3" />
                <DiscreteStringKeyFrame Value="Animat" KeyTime="0:0:3.5" />
                <DiscreteStringKeyFrame Value="Animate" KeyTime="0:0:4" />
                <DiscreteStringKeyFrame Value="Animated" KeyTime="0:0:4.5" />
                <DiscreteStringKeyFrame Value="Animated " KeyTime="0:0:5" />
                <DiscreteStringKeyFrame Value="Animated T" KeyTime="0:0:5.5" />
                <DiscreteStringKeyFrame Value="Animated Te" KeyTime="0:0:6" />
                <DiscreteStringKeyFrame Value="Animated Tex" KeyTime="0:0:6.5" />
                <DiscreteStringKeyFrame Value="Animated Text" KeyTime="0:0:7" />
              </StringAnimationUsingKeyFrames>              
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger> 
      </Button.Triggers>
    </Button>
  </StackPanel>
</Page>

Aby zapoznać się z kompletnym przykładem, zobacz przykład KeyFrame Animation .

Zobacz także

  • Last updated on