方法: キー フレームを使用して文字列をアニメーション化するHow to: Animate a String by Using Key Frames

この例では、キー フレームを使用して、文字列をアニメーション化する方法を示します。この例で使用する文字列は、Button コントロールの Content プロパティです。This example shows how to animate a string, which in this example is the Content property of a Button control, by using key frames.

Example

次の例では、StringAnimationUsingKeyFrames クラスを使用して、ButtonContent プロパティをアニメーション化します。The following example uses the StringAnimationUsingKeyFrames class to animate the Content property of a Button.

この例のすべてのキー フレームは、DiscreteStringKeyFrame クラスのインスタンスを使用します。これは、キー フレームを使用して作成される文字列アニメーションでは、不連続キー フレームしか使用できないためです。All the key frames in this example use an instance of the DiscreteStringKeyFrame class because a string animation that is created with key frames can only use discrete key frames. DiscreteStringKeyFrame のような不連続キー フレームは、ある値から次の値への突然の変化を作成します。つまり、アニメーションの変化は急速に行われ、滑らかではありません。Discrete key frames like DiscreteStringKeyFrame create sudden jumps between values, that is, changes to the animation occur quickly and are not subtle.

<!-- 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>

サンプル全体については、「キーフレーム アニメーションのサンプル」を参照してください。For the complete sample, see KeyFrame Animation Sample.

関連項目See also