Gewusst wie: Animieren einer Zeichenfolge mithilfe von Keyframes
In diesem Beispiel wird gezeigt, wie eine Zeichenfolge mithilfe von Keyframes animiert wird. Es handelt sich in diesem Fall um die Content-Eigenschaft eines Button-Steuerelements.
Beispiel
Im folgenden Beispiel wird die StringAnimationUsingKeyFrames-Klasse verwendet, um die Content-Eigenschaft eines Button zu animieren.
Die Keyframes in diesem Beispiel verwenden eine Instanz der DiscreteStringKeyFrame-Klasse, da eine mit Keyframes erstellte Animation einer Zeichenfolge ausschließlich diskrete Keyframes verwenden kann. Diskrete Keyframes wie DiscreteStringKeyFrame ermöglichen abrupte Sprünge zwischen Werten, d. h. Änderungen der Animation treten schnell und deutlich sichtbar auf.
<!-- Demonstrates the StringAnimationUsingKeyFrames class. A StringAnimationUsingKeyFrames is used to
animate the TextContent property of a Text element. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.KeyFrameExamples.StringAnimationUsingKeyFramesExample"
Name="myRootElement"
WindowTitle="StringAnimationUsingKeyFrames Example">
<StackPanel HorizontalAlignment="Center">
<Button Name="myAnimatedButton" Margin="200"
FontSize="16pt" FontFamily="Verdana">Some Text
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<StringAnimationUsingKeyFrames
Storyboard.TargetName="myAnimatedButton" Storyboard.TargetProperty="(Button.Content)"
Duration="0:0:8" FillBehavior="HoldEnd">
<!-- All the key frames below are DiscreteStringKeyFrames. Discrete key frames create
sudden "jumps" between values (no interpolation). Only discrete key frames can be used
for String key frame animations. -->
<DiscreteStringKeyFrame Value="" KeyTime="0:0:0" />
<DiscreteStringKeyFrame Value="A" KeyTime="0:0:1" />
<DiscreteStringKeyFrame Value="An" KeyTime="0:0:1.5" />
<DiscreteStringKeyFrame Value="Ani" KeyTime="0:0:2" />
<DiscreteStringKeyFrame Value="Anim" KeyTime="0:0:2.5" />
<DiscreteStringKeyFrame Value="Anima" KeyTime="0:0:3" />
<DiscreteStringKeyFrame Value="Animat" KeyTime="0:0:3.5" />
<DiscreteStringKeyFrame Value="Animate" KeyTime="0:0:4" />
<DiscreteStringKeyFrame Value="Animated" KeyTime="0:0:4.5" />
<DiscreteStringKeyFrame Value="Animated " KeyTime="0:0:5" />
<DiscreteStringKeyFrame Value="Animated T" KeyTime="0:0:5.5" />
<DiscreteStringKeyFrame Value="Animated Te" KeyTime="0:0:6" />
<DiscreteStringKeyFrame Value="Animated Tex" KeyTime="0:0:6.5" />
<DiscreteStringKeyFrame Value="Animated Text" KeyTime="0:0:7" />
</StringAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Page>
Das vollständige Beispiel finden Sie unter Beispiel für eine Keyframe-Animation.
Siehe auch
Referenz
Konzepte
Übersicht über Keyframe-Animationen