Przegląd Cechy animacji od/do/przez

W tym temacie opisano, jak używać animacji From/To/By do animowania właściwości zależności. Animacja From/To/By tworzy przejście między dwiema wartościami.

Wymagania wstępne

Aby zrozumieć ten temat, należy zapoznać się z funkcjami animacji WPF. Aby zapoznać się z wprowadzeniem do funkcji animacji, zobacz Omówienie animacji.

Co to jest animacja from/To/By?

Animacja Od/Do/Według jest typem AnimationTimeline , który tworzy przejście między wartością początkową a wartością końcową. Czas potrzebny na ukończenie przejścia jest określany przez Duration tę animację.

Możesz zastosować animację Od/Do/By do właściwości przy użyciu Storyboard znaczników i kodu lub przy użyciu BeginAnimation metody w kodzie. Możesz również użyć animacji od/do/w celu utworzenia obiektu AnimationClock i zastosowania go do co najmniej jednej właściwości. Aby uzyskać więcej informacji na temat różnych metod stosowania animacji, zobacz Omówienie technik animacji właściwości.

Animacje from/To/By nie mogą zawierać więcej niż dwóch wartości docelowych. Jeśli potrzebujesz animacji zawierającej więcej niż dwie wartości docelowe, użyj animacji klatek kluczowych. Animacje klatek kluczowych zostały opisane w sekcji Przegląd animacji klatek kluczowych.

Od/do/według typów animacji

Ponieważ animacje generują wartości właściwości, istnieją różne typy animacji dla różnych typów właściwości. Aby animować właściwość, która przyjmuje Doublewłaściwość , taką jak Width właściwość elementu, użyj animacji, która generuje Double wartości. Aby animować właściwość, która przyjmuje Pointelement , użyj animacji, która generuje Point wartości itd.

Klasy animacji Z/Do/Według należą do System.Windows.Media.Animation przestrzeni nazw i używają następującej konwencji nazewnictwa:

<Typ> Animation

Gdzie <Type> to typ wartości, którą animuje klasa.

WPF udostępnia następujące klasy animacji From/To/By.

Typ właściwości	Odpowiadająca z/Do/Według klasy animacji
Byte	ByteAnimation
Color	ColorAnimation
Decimal	DecimalAnimation
Double	DoubleAnimation
Int16	Int16Animation
Int32	Int32Animation
Int64	Int64Animation
Point	PointAnimation
Quaternion	QuaternionAnimation
Rect	RectAnimation
Rotation3D	Rotation3DAnimation
Single	SingleAnimation
Size	SizeAnimation
Thickness	ThicknessAnimation
Vector3D	Vector3DAnimation
Vector	VectorAnimation

Wartości docelowe

Animacja From/To/By tworzy przejście między dwiema wartościami docelowymi. Często określana jest wartość początkowa (ustawiana przy użyciu From właściwości) i wartość końcowa To (ustawiana przy użyciu właściwości). Można jednak również określić tylko wartość początkową, wartość docelową lub wartość przesunięcia. W takich przypadkach animacja uzyskuje brakującą wartość docelową z właściwości, która jest animowana. Na poniższej liście opisano różne sposoby określania wartości docelowych animacji.

• Wartość początkowa

  From Użyj właściwości , jeśli chcesz jawnie określić wartość początkową animacji. Właściwość można użyć From samodzielnie lub z właściwością To lub By . Jeśli określisz From tylko właściwość, animacja przechodzi z tej wartości na wartość podstawową animowanej właściwości.

• Wartość końcowa

  Aby określić wartość końcową animacji, użyj jej To właściwości. Jeśli używasz To samej właściwości, animacja uzyskuje jego wartość początkową z właściwości, która jest animowana lub z danych wyjściowych innej animacji, która jest stosowana do tej samej właściwości. Można użyć To właściwości razem z właściwością From , aby jawnie określić wartości początkowe i końcowe animacji.

• Wartość przesunięcia

  Właściwość By umożliwia określenie przesunięcia zamiast jawnej wartości początkowej lub końcowej animacji. Właściwość By animacji określa, ile animacja zmienia wartość w czasie jego trwania. Właściwość można użyć samodzielnie By lub z właściwością From . Jeśli określisz By tylko właściwość, animacja dodaje wartość przesunięcia do wartości podstawowej właściwości lub do danych wyjściowych innej animacji.

Używanie wartości z/do/według

W poniższych sekcjach opisano sposób używania Fromwłaściwości , Toi By razem lub oddzielnie.

W przykładach w tej sekcji każda z nich używa DoubleAnimationtypu od/do/w animacji , aby animować Width właściwość obiektu Rectangle o szerokości 10 niezależnych pikseli i 100 pikseli niezależnych od urządzenia.

Mimo że w każdym przykładzie użyto DoubleAnimationwłaściwości od, do i według wszystkich animacji From/To/By zachowują się identycznie. Chociaż każdy z tych przykładów używa elementu Storyboard, można użyć animacji Od/Do/By na inne sposoby. Aby uzyskać więcej informacji, zobacz Omówienie technik animacji właściwości.

Od/do

Po ustawieniu From wartości i To animacja przechodzi od wartości określonej przez From właściwość do wartości określonej przez To właściwość.

Poniższy przykład ustawia From właściwość DoubleAnimation na 50 i jej To właściwość na 300. W rezultacie element Width jest Rectangle animowany z zakresu od 50 do 300.

// Demonstrates the From and To properties used together.

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

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "fromToAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Black;

// Demonstrates the From and To properties used together.
// Animates the rectangle's Width property from 50 to 300 over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "fromToAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);
    };

' Demonstrates the From and To properties used together.

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

Dim myRectangle As New Rectangle()

' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("fromToAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.Black

' Demonstrates the From and To properties used together.
' Animates the rectangle's Width property from 50 to 300 over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 50
myDoubleAnimation.To = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

Storyboard.SetTargetName(myDoubleAnimation, "fromToAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)

Działanie

Po ustawieniu tylko To właściwości animacja przechodzi z wartości bazowej animowanej właściwości lub z danych wyjściowych animacji komponowania, która została wcześniej zastosowana do tej samej właściwości, do wartości określonej przez To właściwość.

("Tworzenie animacji" odnosi się do Active animacji lub Filling , która została wcześniej zastosowana do tej samej właściwości, która jest nadal obowiązująca, gdy bieżąca animacja została zastosowana przy użyciu Compose zachowania przekazywania).

Poniższy przykład ustawia tylko To właściwość DoubleAnimation 300. Ponieważ nie określono wartości początkowej, DoubleAnimation jako wartość początkową używa wartości bazowej Width (100). Rectangle Element Width jest animowany z 100 do wartości docelowej animacji 300.

// Demonstrates the use of the To property.

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

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "toAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Gray;

// Demonstrates the To property used by itself. Animates
// the Rectangle's Width property from its base value
// (100) to 300 over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "toAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);
    };

' Demonstrates the use of the To property.

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

Dim myRectangle As New Rectangle()

' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("toAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.Gray

' Demonstrates the To property used by itself. Animates
' the Rectangle's Width property from its base value
' (100) to 300 over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.To = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

Storyboard.SetTargetName(myDoubleAnimation, "toAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)

Przez

Po ustawieniu tylko By właściwości animacji animacja przechodzi z podstawowej wartości właściwości, która jest animowana, lub z danych wyjściowych animacji komponowania do sumy tej wartości i wartości określonej przez By właściwość.

Poniższy przykład ustawia tylko By właściwość DoubleAnimation 300. Ponieważ w przykładzie nie określono wartości początkowej, DoubleAnimation parametr używa wartości bazowej Width właściwości 100 jako wartości początkowej. Wartość końcowa jest określana przez dodanie By wartości animacji 300 do wartości początkowej 100: 400. W rezultacie element Width Rectangle jest animowany z zakresu od 100 do 400.

// Demonstrates the use of the By property.

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

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "byAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.RoyalBlue;

// Demonstrates the By property used by itself.
// Increments the Rectangle's Width property by 300 over 10 seconds.
// As a result, the Width property is animated from its base value
// (100) to 400 (100 + 300) over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.By = 300;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);
    };

' Demonstrates the use of the By property.

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

Dim myRectangle As New Rectangle()

' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("byAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.RoyalBlue

' Demonstrates the By property used by itself.
' Increments the Rectangle's Width property by 300 over 10 seconds.
' As a result, the Width property is animated from its base value
' (100) to 400 (100 + 300) over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.By = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)

Od/wg

Po ustawieniu From właściwości i By animacji animacja przechodzi z wartości określonej przez właściwość do wartości określonej przez From właściwość do wartości określonej przez sumę From właściwości i By .

Poniższy przykład ustawia From właściwość DoubleAnimation na 50 i jej By właściwość na 300. Wartość końcowa jest określana przez dodanie By wartości animacji 300 do wartości początkowej 50: 350. W rezultacie element Width Rectangle jest animowany z zakresu od 50 do 350.

// Demonstrates the use of the From and By properties.

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

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "byAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.BlueViolet;

// Demonstrates the From and By properties used together.
// Increments the Rectangle's Width property by 300 over 10 seconds.
// As a result, the Width property is animated from 50
// to 350 (50 + 300) over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.By = 300;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);
    };

' Demonstrates the use of the From and By properties.

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

Dim myRectangle As New Rectangle()

' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("byAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.BlueViolet

' Demonstrates the From and By properties used together.
' Increments the Rectangle's Width property by 300 over 10 seconds.
' As a result, the Width property is animated from 50
' to 350 (50 + 300) over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 50
myDoubleAnimation.By = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)

Źródło

Po określeniu tylko From wartości animacji animacja przechodzi z wartości określonej przez From właściwość do wartości podstawowej właściwości, która jest animowana lub do danych wyjściowych komponowanej animacji.

Poniższy przykład ustawia tylko From właściwość DoubleAnimation na 50. Ponieważ nie określono wartości końcowejWidth, DoubleAnimation parametr używa wartości podstawowej właściwości 100 jako wartości końcowej. Element Width jest Rectangle animowany z 50 do wartości podstawowej Width właściwości, 100.

// Demonstrates the use of the From property.

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

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "fromAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Purple;

// Demonstrates the From property used by itself. Animates the
// rectangle's Width property from 50 to its base value (100)
// over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "fromAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);
    };

' Demonstrates the use of the From property.

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

Dim myRectangle As New Rectangle()

' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("fromAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.Purple

' Demonstrates the From property used by itself. Animates the
' rectangle's Width property from 50 to its base value (100)
' over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 50
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

Storyboard.SetTargetName(myDoubleAnimation, "fromAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)

Do/Według

Jeśli ustawisz właściwości To i By animacji, By właściwość zostanie zignorowana.

Inne typy animacji

Animacje from/To/By nie są jedynym typem animacji zapewnianych przez WPF: udostępnia również animacje klatek kluczowych i animacje ścieżek.

• Animacja klatek kluczowych animuje dowolną liczbę wartości docelowych opisanych przy użyciu klatek kluczowych. Aby uzyskać więcej informacji, zobacz Omówienie animacji klatek kluczowych.

• Animacja ścieżki generuje wartości wyjściowe z elementu PathGeometry. Aby uzyskać więcej informacji, zobacz Omówienie animacji ścieżek.

WPF umożliwia również tworzenie własnych niestandardowych typów animacji. Aby uzyskać więcej informacji, zobacz Omówienie animacji niestandardowych.

Zobacz też

• Timeline
• Storyboard
• Animacja — przegląd
• Scenorysy — przegląd
• Animacje kluczowych klatek — przegląd
• Animacje ścieżki — przegląd
• Niestandardowe animacje — przegląd
• Od, do i według przykładowych wartości docelowych animacji