方法 : アニメーションをテキストに適用する

更新 : 2007 年 11 月

アニメーションを使用すると、アプリケーション内のテキストの表示と外観を変えることができます。次の例では、 TextBlock コントロール内のテキストの表示に影響を及ぼす、異なる種類のアニメーションを使用しています。

使用例

次の例では、DoubleAnimation を使用してテキスト ブロックの幅をアニメーション化しています。10 秒間で幅の値がテキスト ブロックの幅から 0 まで変化してから、幅の値が逆に戻る変化が繰り返されます。この種類のアニメーションにより、ワイプ効果がもたらされます。

<TextBlock
  Name="MyWipedText"
  Margin="20" 
  Width="480" Height="100" FontSize="48" FontWeight="Bold" Foreground="Maroon">
  This is wiped text

  <!-- Animates the text block's width. -->
  <TextBlock.Triggers>
    <EventTrigger RoutedEvent="TextBlock.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyWipedText" 
            Storyboard.TargetProperty="(TextBlock.Width)"
            To="0.0" Duration="0:0:10" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </TextBlock.Triggers>
</TextBlock>

次の例では、DoubleAnimation を使用してテキスト ブロックの不透明度をアニメーション化しています。5 秒間で不透明度の値が 1.0 から 0 まで変化してから、その不透明度の値が逆行する変化が繰り返されます。

<TextBlock
  Name="MyFadingText"
  Margin="20" 
  Width="640" Height="100" FontSize="48" FontWeight="Bold" Foreground="Maroon">
  This is fading text

  <!-- Animates the text block's opacity. -->
  <TextBlock.Triggers>
    <EventTrigger RoutedEvent="TextBlock.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyFadingText" 
            Storyboard.TargetProperty="(TextBlock.Opacity)"
            From="1.0" To="0.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </TextBlock.Triggers>
</TextBlock>

Duration で定義されている 5 秒間に不透明度が 1.00 から 0.00 まで変化する TextBlock コントロールの効果を次の図に示します。

1.00 から 0.00 まで変更するテキストの不透明度

次の例では、ColorAnimation を使用してテキスト ブロックの前景色をアニメーション化しています。5 秒間で前景色の値がある色から別の色に変化してから、その色の値が逆行する変化が繰り返されます。

<TextBlock
  Name="MyChangingColorText"
  Margin="20" 
  Width="640" Height="100" FontSize="48" FontWeight="Bold">
  This is changing color text
  <TextBlock.Foreground>
    <SolidColorBrush x:Name="MySolidColorBrush" Color="Maroon" />
  </TextBlock.Foreground>

  <!-- Animates the text block's color. -->
  <TextBlock.Triggers>
    <EventTrigger RoutedEvent="TextBlock.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation 
            Storyboard.TargetName="MySolidColorBrush"
            Storyboard.TargetProperty="Color"
            From="DarkOrange" To="SteelBlue" Duration="0:0:5"
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </TextBlock.Triggers>
</TextBlock>

次の例では、DoubleAnimation を使用してテキスト ブロックを回転させています。20 秒間でテキスト ブロックが完全に回転してから、回転が繰り返されます。

<TextBlock
  Name="MyRotatingText"
  Margin="20" 
  Width="640" Height="100" FontSize="48" FontWeight="Bold" Foreground="Teal" 
  >
  This is rotating text
  <TextBlock.RenderTransform>
    <RotateTransform x:Name="MyRotateTransform" Angle="0" CenterX="230" CenterY="25"/>
  </TextBlock.RenderTransform>

  <!-- Animates the text block's rotation. -->
  <TextBlock.Triggers>
    <EventTrigger RoutedEvent="TextBlock.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRotateTransform" 
            Storyboard.TargetProperty="(RotateTransform.Angle)"
            From="0.0" To="360" Duration="0:0:10" 
            RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </TextBlock.Triggers>
</TextBlock>

メモ :
前のコード例を含むコード サンプル全体については、「テキスト アニメーションのサンプル」を参照してください。

参照

概念

アニメーションの概要