HOW TO：對文字套用動畫

更新：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 秒間隔內，TextBlock 控制項的不透明值從 1.00 漸變成 0.00 的效果。

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

注意事項：
上述程式碼範例摘錄自完整範例，如需完整程式碼範例，請參閱文字動畫範例。

請參閱

概念

動畫概觀