Nasıl yapılır: Anahtar Çerçeveler Kullanarak bir Noktaya Animasyon Ekleme

Bu örnekte, bir 'a PointAnimationUsingKeyFrames animasyonu vermek için sınıfının nasıl kullanılları Point gösterir.

Örnek

Aşağıdaki örnek, üçgen yol üzerinde bir üç nokta taşır. Örnek, bir PointAnimationUsingKeyFrames özelliğinin özelliğine animasyon vermek Center için sınıfını EllipseGeometry kullanır. Bu animasyon aşağıdaki şekilde üç anahtar kare kullanır:

  1. İlk yarım saniye boyunca, bir yol üzerinde bulunan üç noktayı başlangıç konumundan sabit bir oranda taşımak LinearPointKeyFrame için sınıfının bir örneğini kullanır. Gibi doğrusal anahtar LinearPointKeyFrame çerçeveler, değerler arasında sorunsuz bir doğrusal ilişkilendirme sağlar.

  2. Sonraki yarım saniyenin sonunda, yol boyunca aniden bir sonraki konuma üç nokta taşımak DiscretePointKeyFrame için sınıfının bir örneğini kullanır. Gibi ayrık anahtar DiscretePointKeyFrame çerçeveler, değerler arasında ani sıçramalar oluşturabilir.

  3. Son iki saniye boyunca, üç noktanın başlangıç konumunu geri taşımak SplinePointKeyFrame için sınıfının bir örneğini kullanır. gibi eğri anahtar SplinePointKeyFrame çerçeveler, özelliğin değerlerine göre değerler arasında bir değişken geçişi KeySpline oluşturun. Bu örnekte animasyon yavaş başlar ve zaman segmenti sonuna doğru üstel olarak hızlandırır.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
using System.Windows.Media;

namespace Microsoft.Samples.KeyFrameExamples
{
    /// <summary>
    /// This example shows how to use the PointAnimationUsingKeyFrames class
    /// to animate the position of an object.
    /// </summary>
    public class PointAnimationUsingKeyFramesExample : Page
    {
        public PointAnimationUsingKeyFramesExample()
        {
            Title = "PointAnimationUsingKeyFrames Example";
            Background = Brushes.White;
            Margin = new Thickness(20);

            // Create a NameScope for this page so that
            // Storyboards can be used.
            NameScope.SetNameScope(this, new NameScope());

            // Create an EllipseGeometry.
            EllipseGeometry myAnimatedEllipseGeometry =
                new EllipseGeometry(new Point(200,100), 15, 15);

            // Assign the EllipseGeometry a name so that
            // it can be targeted by a Storyboard.
            this.RegisterName(
                "MyAnimatedEllipseGeometry", myAnimatedEllipseGeometry);

            // Create a Path element to display the geometry.
            Path aPath = new Path();
            aPath.Fill = Brushes.Blue;
            aPath.Data = myAnimatedEllipseGeometry;

            // Create a Canvas to contain the path.
            Canvas containerCanvas = new Canvas();
            containerCanvas.Width = 500;
            containerCanvas.Height = 400;
            containerCanvas.Children.Add(aPath);

            // Create a PointAnimationUsingKeyFrames to
            // animate the EllipseGeometry.
            PointAnimationUsingKeyFrames centerPointAnimation
                = new PointAnimationUsingKeyFrames();
            centerPointAnimation.Duration = TimeSpan.FromSeconds(5);

            // Animate from the starting position to (100,300)
            // over the first half-second using linear
            // interpolation.
            centerPointAnimation.KeyFrames.Add(
                new LinearPointKeyFrame(
                    new Point(100, 300), // Target value (KeyValue)
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.5))) // KeyTime
                );

            // Animate from (100,300) (the value of the previous key frame)
            // to (400,300) at 1 second using discrete interpolation.
            // Because the interpolation is discrete, the ellipse will appear
            // to "jump" to (400,300) at 1 second.
            centerPointAnimation.KeyFrames.Add(
                new DiscretePointKeyFrame(
                    new Point(400, 300), // Target value (KeyValue)
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1))) // KeyTime
                );

            // Animate from (400,300) (the value of the previous key frame) to (200,100)
            // over two seconds, starting at 1 second (the key time of the
            // last key frame) and ending at 3 seconds.
            centerPointAnimation.KeyFrames.Add(
                new SplinePointKeyFrame(
                    new Point(200, 100), // Target value (KeyValue)
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3)), // KeyTime
                    new KeySpline(0.6, 0.0, 0.9, 0.0) // KeySpline
                    )
                );

            // Set the animation to repeat forever.
            centerPointAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Set the animation to target the Center property
            // of the object named "MyAnimatedEllipseGeometry".
            Storyboard.SetTargetName(centerPointAnimation, "MyAnimatedEllipseGeometry");
            Storyboard.SetTargetProperty(
                centerPointAnimation, new PropertyPath(EllipseGeometry.CenterProperty));

            // Create a storyboard to apply the animation.
            Storyboard ellipseStoryboard = new Storyboard();
            ellipseStoryboard.Children.Add(centerPointAnimation);

            // Start the storyboard when the Path loads.
            aPath.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                ellipseStoryboard.Begin(this);
            };

            Content = containerCanvas;
        }
    }
}

Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation
Imports System.Windows.Media

Namespace Microsoft.Samples.KeyFrameExamples
    ''' <summary>
    ''' This example shows how to use the PointAnimationUsingKeyFrames class
    ''' to animate the position of an object.
    ''' </summary>
    Public Class PointAnimationUsingKeyFramesExample
        Inherits Page
        Public Sub New()
            Title = "PointAnimationUsingKeyFrames Example"
            Background = Brushes.White
            Margin = New Thickness(20)

            ' Create a NameScope for this page so that
            ' Storyboards can be used.
            NameScope.SetNameScope(Me, New NameScope())

            ' Create an EllipseGeometry.
            Dim myAnimatedEllipseGeometry As New EllipseGeometry(New Point(200,100), 15, 15)

            ' Assign the EllipseGeometry a name so that
            ' it can be targeted by a Storyboard.
            Me.RegisterName("MyAnimatedEllipseGeometry", myAnimatedEllipseGeometry)

            ' Create a Path element to display the geometry.
            Dim aPath As New Path()
            aPath.Fill = Brushes.Blue
            aPath.Data = myAnimatedEllipseGeometry

            ' Create a Canvas to contain the path.
            Dim containerCanvas As New Canvas()
            containerCanvas.Width = 500
            containerCanvas.Height = 400
            containerCanvas.Children.Add(aPath)

            ' Create a PointAnimationUsingKeyFrames to
            ' animate the EllipseGeometry.
            Dim centerPointAnimation As New PointAnimationUsingKeyFrames()
            centerPointAnimation.Duration = TimeSpan.FromSeconds(5)

            ' Animate from the starting position to (100,300)
            ' over the first half-second using linear
            ' interpolation.
            centerPointAnimation.KeyFrames.Add(New LinearPointKeyFrame(New Point(100, 300), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.5)))) ' KeyTime -  Target value (KeyValue)

            ' Animate from (100,300) (the value of the previous key frame) 
            ' to (400,300) at 1 second using discrete interpolation.
            ' Because the interpolation is discrete, the ellipse will appear
            ' to "jump" to (400,300) at 1 second.
            centerPointAnimation.KeyFrames.Add(New DiscretePointKeyFrame(New Point(400, 300), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1)))) ' KeyTime -  Target value (KeyValue)

            ' Animate from (400,300) (the value of the previous key frame) to (200,100)
            ' over two seconds, starting at 1 second (the key time of the
            ' last key frame) and ending at 3 seconds.
            centerPointAnimation.KeyFrames.Add(New SplinePointKeyFrame(New Point(200, 100), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3)), New KeySpline(0.6, 0.0, 0.9, 0.0))) ' KeySpline -  KeyTime -  Target value (KeyValue)

            ' Set the animation to repeat forever. 
            centerPointAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Set the animation to target the Center property
            ' of the object named "MyAnimatedEllipseGeometry".
            Storyboard.SetTargetName(centerPointAnimation, "MyAnimatedEllipseGeometry")
            Storyboard.SetTargetProperty(centerPointAnimation, New PropertyPath(EllipseGeometry.CenterProperty))

            ' Create a storyboard to apply the animation.
            Dim ellipseStoryboard As New Storyboard()
            ellipseStoryboard.Children.Add(centerPointAnimation)

            ' Start the storyboard when the Path loads.
            AddHandler aPath.Loaded, Sub(sender As Object, e As RoutedEventArgs) ellipseStoryboard.Begin(Me)

            Content = containerCanvas
        End Sub

    End Class
End Namespace
<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Background="White" Margin="20">
  <Canvas Width="400" Height="400">
    <Path Fill="Blue">
      <Path.Data>

        <!-- Describes an ellipse. -->
        <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
          Center="200,100" RadiusX="15" RadiusY="15" />
      </Path.Data>
      <Path.Triggers>
        <EventTrigger RoutedEvent="Path.Loaded">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animating the Center property uses 3 KeyFrames, which animate
                   the ellipse allong a triangular path. -->
              <PointAnimationUsingKeyFrames
                Storyboard.TargetProperty="Center"
                Storyboard.TargetName="MyAnimatedEllipseGeometry"
                Duration="0:0:5" RepeatBehavior="Forever">

                <!-- Over the first half second, Using a LinearPointKeyFrame, the ellipse 
                     moves steadily from its starting position along the first line of the 
                     trianglar path.  -->
                <LinearPointKeyFrame 
                  KeyTime="0:0:0.5"
                  Value="100,300" />

                <!-- Using a DiscretePointKeyFrame, the ellipse suddenly changes position
                     after the first second of the animation. -->
                <DiscretePointKeyFrame 
                  KeyTime="0:0:1"
                  Value="400,300" />

                <!-- Using a SplinePointKeyFrame, the ellipse moves back to its starting
                     position. It moves slowly at first and then speeds up. This key frame 
                     takes 2 seconds to complete. -->
                <SplinePointKeyFrame 
                  KeySpline="0.6,0.0 0.9,0.00" 
                  KeyTime="0:0:3"
                  Value="200,100" />
              </PointAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Path.Triggers>
    </Path>
  </Canvas>
</Page>

Tam örnek için bkz. KeyFrame Animasyon Örneği.

Diğer animasyon örnekleriyle tutarlılık sağlamak için bu örneğin kod sürümleri nesnesini Storyboard kullanarak nesnesini PointAnimationUsingKeyFrames uygulayabilir. Ancak kodda tek bir animasyonu uygularken yöntemini kullanmak yerine BeginAnimation kullanmak daha Storyboard kolaydır. Bir örnek için, bkz. Storyboard Olmadan Bir Özelle Animasyona Animasyon Uygulama.

Ayrıca bkz.