(0) exportieren Drucken
Alle erweitern

Int32KeyFrame.KeyTime-Eigenschaft

Aktualisiert: November 2007

Ruft den Zeitpunkt ab, zu dem der Ziel-Value des Keyframes erreicht werden soll, oder legt diesen fest. Dies ist eine Abhängigkeitseigenschaft.

Namespace:  System.Windows.Media.Animation
Assembly:  PresentationCore (in PresentationCore.dll)
XMLNS für XAML: http://schemas.microsoft.com/winfx/xaml/presentation

public KeyTime KeyTime { get; set; }
/** @property */
public final KeyTime get_KeyTime()
/** @property */
public final  void set_KeyTime(KeyTime value)

public final function get KeyTime () : KeyTime
public final function set KeyTime (value : KeyTime)
<object KeyTime="KeyTime" .../>

Eigenschaftenwert

Typ: System.Windows.Media.Animation.KeyTime
Der Zeitpunkt, zu dem der aktuelle Wert des Keyframes mit der zugehörigen Value-Eigenschaft übereinstimmen soll. Der Standardwert ist Uniform.

Implementiert

IKeyFrame.KeyTime

Bezeichnerfeld

KeyTimeProperty

Auf true festgelegte Metadateneigenschaften

Keine

Dieses Beispiel zeigt, wie Keyframes innerhalb einer Keyframe-Animation zeitlich gesteuert werden können. Wie andere Animationen, verfügen auch Keyframe-Animationen über eine Duration-Eigenschaft. Zusätzlich zu der Animationsdauer muss auch angegeben werden, welcher Teil dieser Dauer den einzelnen Keyframes zugewiesen wird. Um die Zeit zuzuweisen, wird eine KeyTime für jeden Keyframe in der Animation angegeben.

Die KeyTime gibt das Ende für jeden Keyframe an (es wird nicht angegeben, wie lange ein Keyframe läuft). Sie können eine KeyTime als TimeSpan-Wert, in Prozent oder als speziellen Uniform- oder Paced-Wert angeben.

Im folgenden Beispiel wird DoubleAnimationUsingKeyFrames verwendet, um ein Rechteck über den Bildschirm zu bewegen. Die Schlüsselzeiten der Keyframes werden mit TimeSpan-Werten festgelegt.

/*
   This Rectangle is animated with KeyTimes using TimeSpan Values. 
   It moves horizontally to 100 in the first 3 seconds, 100 to 300 in 
   the next second, and 300 to 500 in the last 6 seconds.
*/

// Create the a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Fill = Brushes.Blue;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 5;
aRectangle.Width = 50;
aRectangle.Height = 50;

// Create a transform to move the rectangle
// across the screen.
TranslateTransform translateTransform1 = 
    new TranslateTransform();
aRectangle.RenderTransform = translateTransform1;

// Create a DoubleAnimationUsingKeyFrames
// to animate the transform.
DoubleAnimationUsingKeyFrames transformAnimation = 
    new DoubleAnimationUsingKeyFrames();
transformAnimation.Duration = TimeSpan.FromSeconds(10);

// Animate to 100 at 3 seconds.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(100, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3))));

// Animate to 300 at 4 seconds.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(300, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4))));

// Animate to 500 at 10 seconds.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(500, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(10))));

// Start the animation when the rectangle is loaded.
aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
{
    translateTransform1.BeginAnimation(TranslateTransform.XProperty, transformAnimation);
};



<!-- This Rectangle is animated with KeyTimes using TimeSpan Values. 
     It moves horizontally to 100 in the first 3 seconds, 100 to 300 in 
     the next second, and 300 to 500 in the last 6 seconds. -->
<Rectangle Fill="Blue" Stroke="Black" StrokeThickness="5"
  Width="50" Height="50">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform1" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform1" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10">

            <!-- These KeyTime properties are specified as TimeSpan values 
                 which are in the form of "hours:minutes:seconds". -->
            <LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
            <LinearDoubleKeyFrame Value="300" KeyTime="0:0:4" />
            <LinearDoubleKeyFrame Value="500" KeyTime="0:0:10" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>


Die folgende Abbildung zeigt, wann der Wert jedes Keyframes erreicht ist.

Schlüsselwerte werden nach 3, 4 und 10 Sekunden erreicht

Das folgende Beispiel zeigt eine beinah identische Animation, bei der jedoch die Schlüsselzeiten der Keyframes mit Prozentwerten festgelegt sind.

/*
  This rectangle moves horizontally to 100 in the first 3 seconds, 
  100 to 300 in  the next second, and 300 to 500 in the last 6 seconds.
*/

// Create the a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Fill = Brushes.Purple;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 5;
aRectangle.Width = 50;
aRectangle.Height = 50;

// Create a transform to move the rectangle
// across the screen.
TranslateTransform translateTransform2 =
    new TranslateTransform();
aRectangle.RenderTransform = translateTransform2;

// Create a DoubleAnimationUsingKeyFrames
// to animate the transform.
DoubleAnimationUsingKeyFrames transformAnimation =
    new DoubleAnimationUsingKeyFrames();
transformAnimation.Duration = TimeSpan.FromSeconds(10);

// Animate to 100 at 30% of the animation's duration.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(100, KeyTime.FromPercent(0.3)));

// Animate to 300 at 40% of the animation's duration.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(300, KeyTime.FromPercent(0.4)));

// Animate to 500 at 100% of the animation's duration.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(500, KeyTime.FromPercent(1.0)));

// Start the animation when the rectangle is loaded.
aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
{
    translateTransform2.BeginAnimation(TranslateTransform.XProperty, transformAnimation);
};


<!-- This rectangle moves horizontally to 100 in the first 3 seconds, 
     100 to 300 in  the next second, and 300 to 500 in the last 6 seconds.-->
<Rectangle Fill="Purple" Stroke="Black" StrokeThickness="5"
  Width="50" Height="50">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform2" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform2" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10">

            <!-- KeyTime properties are expressed as Percentages. -->
            <LinearDoubleKeyFrame Value="100" KeyTime="30%" />
            <LinearDoubleKeyFrame Value="300" KeyTime="40%" />
            <LinearDoubleKeyFrame Value="500" KeyTime="100%" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>


Die folgende Abbildung zeigt, wann der Wert jedes Keyframes erreicht ist.

Schlüsselwerte werden nach 3, 4 und 10 Sekunden erreicht

Im folgenden Beispiel werden Uniform-Schlüsselzeitwerte verwendet.

/*
   This rectangle is animated with KeyTimes using Uniform values. 
   Goes to 100 in the first 3.3 seconds, 100 to
   300 in the next 3.3 seconds, 300 to 500 in the last 3.3 seconds.
*/

// Create the a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Fill = Brushes.Red;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 5;
aRectangle.Width = 50;
aRectangle.Height = 50;

// Create a transform to move the rectangle
// across the screen.
TranslateTransform translateTransform3 =
    new TranslateTransform();
aRectangle.RenderTransform = translateTransform3;

// Create a DoubleAnimationUsingKeyFrames
// to animate the transform.
DoubleAnimationUsingKeyFrames transformAnimation =
    new DoubleAnimationUsingKeyFrames();
transformAnimation.Duration = TimeSpan.FromSeconds(10);

/*
   KeyTime properties are expressed with values of Uniform. When a key time is set to
   "Uniform" the total allotted time of the animation is divided evenly between key frames.  
   In this example, the total duration of the animation is ten seconds and there are four 
   key frames each of which are set to "Uniform", therefore, the duration of each key frame 
   is 3.3 seconds (10/3).
 */

// Animate to 100.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(100, KeyTime.Uniform));

// Animate to 300.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(300, KeyTime.Uniform));

// Animate to 500.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(500, KeyTime.Uniform));

// Start the animation when the rectangle is loaded.
aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
{
    translateTransform3.BeginAnimation(TranslateTransform.XProperty, transformAnimation);
};



<!-- This rectangle is animated with KeyTimes using Uniform values. 
     Goes to 100 in the first 3.3 seconds, 100 to
     300 in the next 3.3 seconds, 300 to 500 in the last 3.3 seconds. -->
<Rectangle Fill="Red" Stroke="Black" StrokeThickness="5"
  Width="50" Height="50">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform3" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform3" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10">

            <!--   KeyTime properties are expressed with values of Uniform. When a key time is set to
                   "Uniform" the total allotted time of the animation is divided evenly between key frames.  
                   In this example, the total duration of the animation is ten seconds and there are four 
                   key frames each of which are set to "Uniform", therefore, the duration of each key frame 
                   is 3.3 seconds (10/3). -->
            <LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
            <LinearDoubleKeyFrame Value="300" KeyTime="Uniform" />
            <LinearDoubleKeyFrame Value="500" KeyTime="Uniform" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>


Die folgende Abbildung zeigt, wann der Wert jedes Keyframes erreicht ist.

Schlüsselwerte werden nach 3,3, 6,6 und 9,9 Sekunden erreicht

Im abschließenden Beispiel werden Paced-Schlüsselzeitwerte verwendet.

/*
   This rectangle is animated with KeyTimes using Paced Values. 
   The rectangle moves between key frames at uniform rate except for first key frame
   because using a Paced value on the first KeyFrame in a collection of frames gives a time of zero.
*/

// Create the a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Fill = Brushes.Orange;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 5;
aRectangle.Width = 50;
aRectangle.Height = 50;

// Create a transform to move the rectangle
// across the screen.
TranslateTransform translateTransform4 =
    new TranslateTransform();
aRectangle.RenderTransform = translateTransform4;

// Create a DoubleAnimationUsingKeyFrames
// to animate the transform.
DoubleAnimationUsingKeyFrames transformAnimation =
    new DoubleAnimationUsingKeyFrames();
transformAnimation.Duration = TimeSpan.FromSeconds(10);

/*
   Use Paced values when a constant rate is desired. 
   The time allocated to a key frame with a KeyTime of "Paced" is
   determined by the time allocated to the other key frames of the animation. This time is 
   calculated to attempt to give a "paced" or "constant velocity" for the animation.
 */

// Animate to 100.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(100, KeyTime.Paced));

// Animate to 300.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(300, KeyTime.Paced));

// Animate to 500.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(500, KeyTime.Paced));

// Start the animation when the rectangle is loaded.
aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
{
    translateTransform4.BeginAnimation(TranslateTransform.XProperty, transformAnimation);
};



<!-- This rectangle is animated with KeyTimes using Paced Values. 
     The rectangle moves between key frames at uniform rate except for first key frame
     because using a Paced value on the first KeyFrame in a collection of frames gives a time of zero. -->
<Rectangle Fill="Orange" Stroke="Black" StrokeThickness="5"
  Width="50" Height="50">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform4" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform4" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10">

            <!-- Use Paced values when a constant rate is desired. 
                 The time allocated to a key frame with a KeyTime of "Paced" is
                 determined by the time allocated to the other key frames of the animation. This time is 
                 calculated to attempt to give a "paced" or "constant velocity" for the animation. -->
            <LinearDoubleKeyFrame Value="100" KeyTime="Paced" />
            <LinearDoubleKeyFrame Value="300" KeyTime="Paced" />
            <LinearDoubleKeyFrame Value="500" KeyTime="Paced" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>


Die folgende Abbildung zeigt, wann der Wert jedes Keyframes erreicht ist.

Schlüsselwerte werden nach 0, 5 und 10 Sekunden erreicht

Der Einfachheit halber verwenden die Codeversionen dieses Beispiels lokale Animationen statt Storyboards, da nur eine Animation auf eine Eigenschaft angewendet wird. Das Beispiel kann jedoch auch für den Gebrauch von Storyboards geändert werden. Ein Beispiel für ein im Code deklariertes Storyboard finden Sie unter Gewusst wie: Animieren einer Eigenschaft unter Verwendung eines Storyboards.

Das vollständige Beispiel finden Sie unter Beispiel für eine Keyframe-Animation. Weitere Informationen zu Keyframe-Animationen finden Sie unter Übersicht über Keyframe-Animationen.

Weiterer Code

Gewusst wie: Animieren eines Doubles mithilfe von KeyframesIn diesem Beispiel wird veranschaulicht, wie Sie den Wert einer Eigenschaft, die ein Double annimmt, mithilfe von Keyframes animieren.

Windows Vista

.NET Framework und .NET Compact Framework unterstützen nicht alle Versionen sämtlicher Plattformen. Eine Liste der unterstützten Versionen finden Sie unter Systemanforderungen für .NET Framework.

.NET Framework

Unterstützt in: 3.5, 3.0

Community-Beiträge

HINZUFÜGEN
Anzeigen:
© 2014 Microsoft