Gewusst wie: Animieren der Position eines Objekts mit PointAnimation

Artikel
08/20/2008

Aktualisiert: November 2007

In diesem Beispiel wird veranschaulicht, wie die PointAnimation-Klasse verwendet wird, um ein Objekt entlang eines Path zu animieren.

Beispiel

Im folgenden Beispiel wird eine Ellipse entlang eines Path von einem Punkt auf dem Bildschirm zu einem anderen verschoben. Im Beispiel wird die Position einer EllipseGeometry animiert, indem es PointAnimation verwendet, um die Center-Eigenschaft zu animieren.

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

namespace SDKSamples
{
    // This example shows how to use PointAnimation to animate the
    // position of an ellipse by animating the Center property of an 
    // EllipseGeometry. PointAnimation is used because the Center property
    // takes a Point value.
    public class PointAnimationExample : Page
    {
        public PointAnimationExample()
        {

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

            EllipseGeometry myEllipseGeometry = new EllipseGeometry();
            myEllipseGeometry.Center = new Point(200, 100);
            myEllipseGeometry.RadiusX = 15;
            myEllipseGeometry.RadiusY = 15;

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

            Path myPath = new Path();
            myPath.Fill = Brushes.Blue;
            myPath.Margin = new Thickness(15);
            myPath.Data = myEllipseGeometry;

            PointAnimation myPointAnimation = new PointAnimation();
            myPointAnimation.Duration = TimeSpan.FromSeconds(2);

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

            // Set the From and To properties of the animation.
            myPointAnimation.From = new Point(200, 100);
            myPointAnimation.To = new Point(450, 250);

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

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

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

            Canvas containerCanvas = new Canvas();
            containerCanvas.Children.Add(myPath);

            Content = containerCanvas;
        }

    }
}

<!-- This example shows how to use PointAnimation to animate the
position of an ellipse by animating the Center property of an 
EllipseGeometry. PointAnimation is used because the Center property
takes a Point value. -->
<Page  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas>
      <Path Fill="Blue" Margin="15,15,15,15">
        <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 Name="MyBeginStoryboard">
              <Storyboard>

                <!-- Animate the Center property so that the ellipse animates from 
                one point on the screen to another. -->
                <PointAnimation
                Storyboard.TargetProperty="Center"
                Storyboard.TargetName="MyAnimatedEllipseGeometry"
                Duration="0:0:2" From="200,100" To="450,250" RepeatBehavior="Forever" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Path.Triggers>
      </Path>
    </Canvas>
</Page>

Siehe auch

Freigeben über

Gewusst wie: Animieren der Position eines Objekts mit PointAnimation

Beispiel

Siehe auch

Konzepte

Referenz

Weitere Ressourcen

Zusätzliche Ressourcen