方法 : テキスト効果を作成する

更新 : 2007 年 11 月

TextEffect オブジェクトは、テキスト文字列内の 1 つ以上の文字列のグループとしてテキストを処理できるヘルパ オブジェクトです。TextEffect のサンプル から引用されている次の例は、回転する個々の文字を示しています。各文字は、1 秒間隔で個別に回転します。

回転するテキスト効果アニメーションの例

使用例

次のコード例では、TextEffect が TextBlock オブジェクトに対して定義されています。この場合、目的のアニメーション効果は、Text プロパティの各文字に適用される RotateTransform です。

<TextBlock.TextEffects>
  <!-- The TextEffect to animate. -->
  <TextEffect PositionCount="1" x:Name="MyTextEffect">
    <TextEffect.Transform>
      <RotateTransform x:Name="TextEffectRotateTransform" 
        Angle="0" CenterX="10" CenterY="10" />
    </TextEffect.Transform>
  </TextEffect>
</TextBlock.TextEffects>

メモ :
文字列全体を 1 つの単位として回転させる場合は、RotateTransform を TextBlock の RenderTransform プロパティに適用します。詳細については、「方法 : アニメーションをテキストに適用する」を参照してください。

Angle プロパティおよび CenterX プロパティに対して定義されたアニメーションを次のコード例に示します。一連のアニメーションは、Int32AnimationUsingKeyFrames オブジェクトを定義して、TargetName および TargetProperty の設定により TextEffect を参照することによって制御されます。PositionStart プロパティの値は、一連のアニメーション中に 13 文字のテキスト文字列に対応して 0 から 12 まで変化します。

  <TextBlock.Triggers>
    <EventTrigger RoutedEvent="TextBlock.Loaded">
      <EventTrigger.Actions>
      <BeginStoryboard>
        <Storyboard>
          <ParallelTimeline RepeatBehavior="Forever">

            <!-- Animates the angle of the RotateTransform
                 applied to the TextEffect. -->
            <DoubleAnimation
              Storyboard.TargetName="TextEffectRotateTransform"
              Storyboard.TargetProperty="Angle" 
              From="0"
              To="360"
              Duration="00:00:0.75"                
              BeginTime="0:0:0.25" />
          </ParallelTimeline>

          <!-- Animates the horizontal center of the RotateTransform
               applied to the TextEffect. -->
          <DoubleAnimation
            From="30"
            To="370"
            Duration="00:00:13"
            RepeatBehavior="Forever"
            AutoReverse="True"
            Storyboard.TargetName="TextEffectRotateTransform"
            Storyboard.TargetProperty="CenterX" />

          <!-- Animates the position of the TextEffect. -->
          <Int32AnimationUsingKeyFrames
            Storyboard.TargetName="MyTextEffect"
            Storyboard.TargetProperty="PositionStart"
            Duration="0:0:13"
            AutoReverse="True"
            RepeatBehavior="Forever">
            <Int32AnimationUsingKeyFrames.KeyFrames>
              <DiscreteInt32KeyFrame Value="0" KeyTime="0:0:0" />
              <DiscreteInt32KeyFrame Value="1" KeyTime="0:0:1" />
              <DiscreteInt32KeyFrame Value="2" KeyTime="0:0:2" />
              <DiscreteInt32KeyFrame Value="3" KeyTime="0:0:3" />
              <DiscreteInt32KeyFrame Value="4" KeyTime="0:0:4" />
              <DiscreteInt32KeyFrame Value="5" KeyTime="0:0:5" />
              <DiscreteInt32KeyFrame Value="6" KeyTime="0:0:6" />
              <DiscreteInt32KeyFrame Value="7" KeyTime="0:0:7" />
              <DiscreteInt32KeyFrame Value="8" KeyTime="0:0:8" />
              <DiscreteInt32KeyFrame Value="9" KeyTime="0:0:9" />
              <DiscreteInt32KeyFrame Value="10" KeyTime="0:0:10" />
              <DiscreteInt32KeyFrame Value="11" KeyTime="0:0:11" />
              <DiscreteInt32KeyFrame Value="12" KeyTime="0:0:12" />
            </Int32AnimationUsingKeyFrames.KeyFrames>
          </Int32AnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </TextBlock.Triggers>
</TextBlock>

参照

処理手順

TextEffect のサンプル

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