方法 : アニメーションをテキストに適用する
更新 : 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>
![]() |
---|
前のコード例を含むコード サンプル全体については、「テキスト アニメーションのサンプル」を参照してください。 |