Jak zastosować animacje do tekstu
Animacje mogą zmieniać wyświetlanie i wygląd tekstu w aplikacji. W poniższych przykładach użyto różnych typów animacji, aby wpłynąć na wyświetlanie tekstu w kontrolce TextBlock .
Przykład
W poniższym przykładzie użyto obiektu a DoubleAnimation do animowania szerokości bloku tekstu. Wartość szerokości zmienia się z szerokości bloku tekstu na 0 w czasie trwania 10 sekund, a następnie odwraca wartości szerokości i kontynuuje. Ten typ animacji tworzy efekt czyszczenia.
<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>
W poniższym przykładzie użyto obiektu a DoubleAnimation do animowania nieprzezroczystości bloku tekstu. Wartość nieprzezroczystości zmienia się z 1,0 na 0 w czasie trwania 5 sekund, a następnie odwraca wartości nieprzezroczystości i kontynuuje.
<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>
Na poniższym diagramie przedstawiono efekt TextBlock zmiany nieprzezroczystości kontrolki z 1.00
na 0.00
w 5-sekundowym interwale zdefiniowanym Durationprzez parametr .
W poniższym przykładzie użyto elementu a ColorAnimation do animowania koloru pierwszego planu bloku tekstu. Wartość koloru pierwszego planu zmienia się z jednego koloru na drugi w czasie trwania 5 sekund, a następnie odwraca wartości kolorów i kontynuuje.
<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>
W poniższym przykładzie użyto elementu , DoubleAnimation aby obrócić blok tekstowy. Blok tekstu wykonuje pełną rotację w czasie trwania 20 sekund, a następnie kontynuuje powtarzanie obrotu.
<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>
Zobacz też
.NET Desktop feedback
Opinia
https://aka.ms/ContentUserFeedback.
Dostępne już wkrótce: W 2024 r. będziemy stopniowo wycofywać zgłoszenia z serwisu GitHub jako mechanizm przesyłania opinii na temat zawartości i zastępować go nowym systemem opinii. Aby uzyskać więcej informacji, sprawdź:Prześlij i wyświetl opinię dla