Yol Animasyonlarına Genel Bakış

Bu konu başlığında çıkış değerleri oluşturmak için geometrik bir yol kullanmana olanak sağlayan yol animasyonları tanıtacağız. Yol animasyonları, karmaşık yollarda nesneleri taşıma ve döndürme için kullanışlıdır.

Önkoşullar

Bu konuyu anlamak için WPF animasyon özellikleri hakkında bilgi sahibi olmak gerekir. Animasyon özelliklerine giriş için bkz. Animasyona Genel Bakış.

Bir yol PathGeometry animasyonunu tanımlamak için bir nesnesi kullanırken, ve farklı nesne PathGeometry türleri hakkında da bilgi sahibi olmak PathSegment gerekir. Daha fazla bilgi için bkz. Geometriye Genel Bakış.

Yol Animasyonu Nedir?

Yol animasyonu, girişi AnimationTimeline olarak kullanan bir t PathGeometry t'tir. Bir From, To veya By özelliğini (Bir From/To/By animasyonu için olduğu gibi) veya anahtar çerçeveleri (anahtar çerçeve animasyonu için kullanılan şekilde) ayarlamak yerine, geometrik bir yol tanımlar ve yol animasyonun özelliğini ayarlamak için PathGeometry kullanırsanız. Yol animasyonu ilerledikçe, yoldan x, y ve açı bilgilerini okur ve çıkışını oluşturmak için bu bilgileri kullanır.

Yol animasyonları, karmaşık bir yol üzerinde bir nesneye animasyon oluşturmak için çok kullanışlıdır. Bir nesneyi yol üzerinde taşımanın bir yolu, karmaşık bir yol üzerinde bir nesneyi dönüştürmek için ve MatrixTransformMatrixAnimationUsingPath kullanmaktır. Aşağıdaki örnek, nesnesini kullanarak bir MatrixAnimationUsingPath özelliğinin özelliğine animasyon eklemeye göre bu Matrix tekniği MatrixTransform gösterir. MatrixTransform, bir düğmeye uygulanır ve eğri bir yol boyunca hareket ettirin. özelliği DoesRotateWithTangent olarak ayar olduğundan true dikdörtgen, yolun tanjgent'ı boyunca döndürülür.

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="PresentationOptions" Margin="20">
  <Canvas Width="400" Height="400">
      
    <!-- The Button that is animated across the screen by animating
         the MatrixTransform applied to the button. -->
    <Button MinWidth="100" Content="A Button">
      <Button.RenderTransform>
        <MatrixTransform x:Name="ButtonMatrixTransform">
          <MatrixTransform.Matrix >
            <Matrix />
          </MatrixTransform.Matrix>
        </MatrixTransform>
      </Button.RenderTransform>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <MatrixAnimationUsingPath
              Storyboard.TargetName="ButtonMatrixTransform"
              Storyboard.TargetProperty="Matrix"
              DoesRotateWithTangent="True"
              Duration="0:0:5" 
              RepeatBehavior="Forever" >
                <MatrixAnimationUsingPath.PathGeometry>
                  <PathGeometry 
                    Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" 
                    PresentationOptions:Freeze="True" />
                </MatrixAnimationUsingPath.PathGeometry>
              </MatrixAnimationUsingPath>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </Canvas>
</Page>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace SDKSample
{

    /// <summary>
    /// Shows how to animate an object along
    /// a geometric path.
    /// </summary>
    public class MatrixAnimationUsingPathDoesRotateWithTangentExample : Page
    {

        public MatrixAnimationUsingPathDoesRotateWithTangentExample()
        {
            this.Margin = new Thickness(20);

            // Create a NameScope for the page so that
            // we can use Storyboards.
            NameScope.SetNameScope(this, new NameScope());

            // Create a button.
            Button aButton = new Button();
            aButton.MinWidth = 100;
            aButton.Content = "A Button";

            // Create a MatrixTransform. This transform
            // will be used to move the button.
            MatrixTransform buttonMatrixTransform = new MatrixTransform();
            aButton.RenderTransform = buttonMatrixTransform;

            // Register the transform's name with the page
            // so that it can be targeted by a Storyboard.
            this.RegisterName("ButtonMatrixTransform", buttonMatrixTransform);

            // Create a Canvas to contain the button
            // and add it to the page.
            // Although this example uses a Canvas,
            // any type of panel will work.
            Canvas mainPanel = new Canvas();
            mainPanel.Width = 400;
            mainPanel.Height = 400;
            mainPanel.Children.Add(aButton);
            this.Content = mainPanel;

            // Create the animation path.
            PathGeometry animationPath = new PathGeometry();
            PathFigure pFigure = new PathFigure();
            pFigure.StartPoint = new Point(10, 100);
            PolyBezierSegment pBezierSegment = new PolyBezierSegment();
            pBezierSegment.Points.Add(new Point(35, 0));
            pBezierSegment.Points.Add(new Point(135, 0));
            pBezierSegment.Points.Add(new Point(160, 100));
            pBezierSegment.Points.Add(new Point(180, 190));
            pBezierSegment.Points.Add(new Point(285, 200));
            pBezierSegment.Points.Add(new Point(310, 100));
            pFigure.Segments.Add(pBezierSegment);
            animationPath.Figures.Add(pFigure);

            // Freeze the PathGeometry for performance benefits.
            animationPath.Freeze();

            // Create a MatrixAnimationUsingPath to move the
            // button along the path by animating
            // its MatrixTransform.
            MatrixAnimationUsingPath matrixAnimation =
                new MatrixAnimationUsingPath();
            matrixAnimation.PathGeometry = animationPath;
            matrixAnimation.Duration = TimeSpan.FromSeconds(5);
            matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Set the animation's DoesRotateWithTangent property
            // to true so that rotates the rectangle in addition
            // to moving it.
            matrixAnimation.DoesRotateWithTangent = true;

            // Set the animation to target the Matrix property
            // of the MatrixTransform named "ButtonMatrixTransform".
            Storyboard.SetTargetName(matrixAnimation, "ButtonMatrixTransform");
            Storyboard.SetTargetProperty(matrixAnimation,
                new PropertyPath(MatrixTransform.MatrixProperty));

            // Create a Storyboard to contain and apply the animation.
            Storyboard pathAnimationStoryboard = new Storyboard();
            pathAnimationStoryboard.Children.Add(matrixAnimation);

            // Start the storyboard when the button is loaded.
            aButton.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                // Start the storyboard.
                pathAnimationStoryboard.Begin(this);
            };
        }
    }
}

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


Namespace SDKSample

    ''' <summary>
    ''' Shows how to animate an object along
    ''' a geometric path.
    ''' </summary>
    Public Class MatrixAnimationUsingPathDoesRotateWithTangentExample
        Inherits Page

        Public Sub New()
            Me.Margin = New Thickness(20)

            ' Create a NameScope for the page so that
            ' we can use Storyboards.
            NameScope.SetNameScope(Me, New NameScope())

            ' Create a button.
            Dim aButton As New Button()
            aButton.MinWidth = 100
            aButton.Content = "A Button"

            ' Create a MatrixTransform. This transform
            ' will be used to move the button.
            Dim buttonMatrixTransform As New MatrixTransform()
            aButton.RenderTransform = buttonMatrixTransform

            ' Register the transform's name with the page
            ' so that it can be targeted by a Storyboard.
            Me.RegisterName("ButtonMatrixTransform", buttonMatrixTransform)

            ' Create a Canvas to contain the button
            ' and add it to the page.
            ' Although this example uses a Canvas,
            ' any type of panel will work.
            Dim mainPanel As New Canvas()
            mainPanel.Width = 400
            mainPanel.Height = 400
            mainPanel.Children.Add(aButton)
            Me.Content = mainPanel

            ' Create the animation path.
            Dim animationPath As New PathGeometry()
            Dim pFigure As New PathFigure()
            pFigure.StartPoint = New Point(10, 100)
            Dim pBezierSegment As New PolyBezierSegment()
            pBezierSegment.Points.Add(New Point(35, 0))
            pBezierSegment.Points.Add(New Point(135, 0))
            pBezierSegment.Points.Add(New Point(160, 100))
            pBezierSegment.Points.Add(New Point(180, 190))
            pBezierSegment.Points.Add(New Point(285, 200))
            pBezierSegment.Points.Add(New Point(310, 100))
            pFigure.Segments.Add(pBezierSegment)
            animationPath.Figures.Add(pFigure)

            ' Freeze the PathGeometry for performance benefits.
            animationPath.Freeze()

            ' Create a MatrixAnimationUsingPath to move the
            ' button along the path by animating
            ' its MatrixTransform.
            Dim matrixAnimation As New MatrixAnimationUsingPath()
            matrixAnimation.PathGeometry = animationPath
            matrixAnimation.Duration = TimeSpan.FromSeconds(5)
            matrixAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Set the animation's DoesRotateWithTangent property
            ' to true so that rotates the rectangle in addition
            ' to moving it.
            matrixAnimation.DoesRotateWithTangent = True

            ' Set the animation to target the Matrix property
            ' of the MatrixTransform named "ButtonMatrixTransform".
            Storyboard.SetTargetName(matrixAnimation, "ButtonMatrixTransform")
            Storyboard.SetTargetProperty(matrixAnimation, New PropertyPath(MatrixTransform.MatrixProperty))

            ' Create a Storyboard to contain and apply the animation.
            Dim pathAnimationStoryboard As New Storyboard()
            pathAnimationStoryboard.Children.Add(matrixAnimation)

            ' Start the storyboard when the button is loaded.
            AddHandler aButton.Loaded, Sub(sender As Object, e As RoutedEventArgs) pathAnimationStoryboard.Begin(Me)



        End Sub
    End Class
End Namespace

XAML örneğinde kullanılan yol söz dizimi hakkında daha fazla bilgi için bkz. Yol Biçimlendirme Söz Dizimi'ne genel bakış. Tam örnek için bkz. Yol Animasyonu Örneği.

XAML'de ve kodda veya kodda yöntemini kullanarak bir Storyboard özelliğine yol BeginAnimation animasyonu uygulayabilirsiniz. Ayrıca bir yol animasyonu kullanarak bir oluşturabilir ve AnimationClock bunu bir veya daha fazla özele uygulayabilirsiniz. Animasyonları uygulamanın farklı yöntemleri hakkında daha fazla bilgi için bkz. Özellik Animasyon Tekniklerine Genel Bakış.

Yol Animasyon Türleri

Animasyonlar özellik değerleri oluştura olduğundan, farklı özellik türleri için farklı animasyon türleri vardır. alan bir özelle (örneğin, bir özelliğini) animasyona animasyonu oluşturmak Double için değer üreten bir animasyon XTranslateTransformDouble kullanırsınız. alan bir özelle animasyonu oluşturmak için değer üreten bir animasyon kullanırsınız ve Point bu şekilde devam Point edersiniz.

Yol animasyon sınıfları ad alanına System.Windows.Media.Animation aittir ve aşağıdaki adlandırma kuralını kullanır:

Türü>AnimationUsingPath

Burada Tür, > sınıfın animasyona kat katarak değer t değeridir.

WPF aşağıdaki yol animasyon sınıflarını sağlar.

Özellik türü İlgili yol animasyon sınıfı Örnek
Double DoubleAnimationUsingPath Bir Nesnenin Yol Üzerinde Animasyonunu Oluşturma (Çift Animasyon)
Matrix MatrixAnimationUsingPath Bir Nesnenin Yol Üzerinde Animasyonunu Oluşturma (Matris Animasyonu)
Point PointAnimationUsingPath Bir Nesnenin Yol Üzerinde Animasyonunu Oluşturma (İşaret Etme Animasyonu)

bir MatrixAnimationUsingPath , Matrix 'den değerler PathGeometry üretir. , ile birlikte MatrixTransformMatrixAnimationUsingPath kullanılırken, bir nesneyi yol üzerinde hareket ettirebilirsiniz. özelliğini olarak DoesRotateWithTangentMatrixAnimationUsingPath ayarsanız, true nesneyi yolun eğrileri boyunca da döndürebilir.

, PointAnimationUsingPath x ve y Point koordinatlarından değerleri PathGeometry üretir. Değerleri alan PointAnimationUsingPath bir özelle animasyonu yapmak için kullanarak nesneyi bir yol üzerinde hareket Point ettirebilirsiniz. Bir PointAnimationUsingPath nesneleri döndüremez.

bir DoubleAnimationUsingPath , Double 'den değerler PathGeometry üretir. özelliğini ayarerek çıkışı olarak yolun Source x koordinatını, y koordinatını mı yoksa açısını mı DoubleAnimationUsingPath kullandığını belirtebilirsiniz. Bir nesneyi döndürmek veya x ekseni veya y ekseni üzerinde DoubleAnimationUsingPath taşımak için kullanabilirsiniz.

Yol Animasyonu Girişi

Her yol animasyon sınıfı, girişini PathGeometry belirtmek için bir özellik sağlar. Yol animasyonu, çıkış PathGeometry değerlerini oluşturmak için kullanır. sınıfı, PathGeometry yaylardan, eğrilerden ve çizgilerden oluşan birden çok karmaşık rakamları açıklamaya olanak sağlar.

bir 'nin merkezinde bir nesne koleksiyonu vardır; her şekil içinde ayrık bir şekil açık olduğundan bu PathGeometryPathFigure nesneler bu şekilde PathGeometry adlandırılmıştır. Her PathFigure biri bir veya daha fazla PathSegment nesneden oluşur ve her biri şekilde bir segmenti açıklar.

Birçok segment türü vardır.

Segment Türü Açıklama
ArcSegment İki nokta arasında eliptik bir yay oluşturur.
BezierSegment İki nokta arasında küskün Bir Taner eğrisi oluşturur.
LineSegment İki nokta arasında bir çizgi oluşturur.
PolyBezierSegment Bir dizi küskün Olarakİleri eğriler oluşturur.
PolyLineSegment Bir dizi satır oluşturur.
PolyQuadraticBezierSegment Bir dizi İkinci derecedenSinir eğrisi oluşturur.
QuadraticBezierSegment İkinci dereceden Bireyi eğrisi oluşturur.

'daki segmentler, bir sonraki segmentin başlangıç noktası olarak bir segmentin uç noktasını kullanan tek bir PathFigure geometrik şekilde birleştirilmiştir. StartPointözelliği, PathFigure ilk kesimin çekilecek noktasını belirtir. Sonraki her segment, önceki segmentin bitiş noktasında başlar. Örneğin, özelliği olarak ayarlandığı ve özelliği ayarıyla bir oluşturarak ile arasında 10,5010,150 bir dikey çizgi StartPoint10,50LineSegmentPoint10,150 tanımlanabilir.

Nesneler hakkında daha fazla PathGeometry bilgi için bkz. PathGeometry

XAML'de, özelliğini ayarlamak için özel bir kısaltılmış söz Figures dizimi de PathGeometry kullanabilirsiniz. Daha fazla bilgi için bkz. Yol Biçimlendirme Söz Dizimi'ne genel bakış.

XAML örneğinde kullanılan yol söz dizimi hakkında daha fazla bilgi için bkz. Yol Biçimlendirme Söz Dizimi'ne genel bakış.

Ayrıca bkz.