Přehled animace od/komu/kým
Toto téma popisuje, jak pomocí animací From/To/By animací animovat vlastnosti závislosti. Animace From/To/By vytvoří přechod mezi dvěma hodnotami.
Předpoklady
Abyste pochopili toto téma, měli byste být obeznámeni s funkcemi animací WPF. Úvod k animačním funkcím najdete v přehledu animací.
Co je animace from/to/by animation?
Animace From/To/By je typ AnimationTimeline , který vytvoří přechod mezi počáteční a koncovou hodnotou. Doba, po kterou přechod trvá, je určena animací Duration .
Animaci From/To/By můžete použít u vlastnosti pomocí Storyboard značek a kódu nebo pomocí BeginAnimation metody v kódu. K vytvoření AnimationClock a použití na jedné nebo více vlastností můžete použít také animaci Od/Do/Podle. Další informace o různých metodách použití animací naleznete v tématu Přehled technik animace vlastností.
Animace from/To/By nesmí obsahovat více než dvě cílové hodnoty. Pokud potřebujete animaci s více než dvěma cílovými hodnotami, použijte animaci s klíčem. Animace snímků klíčů jsou popsány v přehledu animací s klíčovými snímky.
Z/do/podle typů animací
Protože animace generují hodnoty vlastností, existují různé typy animací pro různé typy vlastností. Chcete-li animovat vlastnost, která přebírá Double, například Width vlastnost elementu, použijte animaci, která vytváří Double hodnoty. Chcete-li animovat vlastnost, která přebírá Point, použijte animaci, která vytváří Point hodnoty atd.
Třídy animace From/To/By patří do System.Windows.Media.Animation oboru názvů a používají následující zásady vytváření názvů:
<Typ>Animation
Where <Type> je typ hodnoty, kterou třída animuje.
WPF poskytuje následující třídy animace from/to/by.
Cílové hodnoty
Animace From/To/By vytvoří přechod mezi dvěma cílovými hodnotami. Je běžné zadat počáteční hodnotu (nastavit ji pomocí From vlastnosti) a koncovou hodnotu (nastavit ji pomocí To vlastnosti). Můžete ale také zadat pouze počáteční hodnotu, cílovou hodnotu nebo hodnotu posunu. V těchto případech animace získá chybějící cílovou hodnotu z vlastnosti, která je animované. Následující seznam popisuje různé způsoby určení cílových hodnot animace.
Počáteční hodnota
From Vlastnost použijte, pokud chcete explicitně zadat počáteční hodnotu animace. Tuto vlastnost můžete použít From samostatně nebo s To vlastností.By Pokud zadáte pouze From vlastnost, animace přejde z této hodnoty na základní hodnotu animované vlastnosti.
Koncová hodnota
Chcete-li zadat koncovou hodnotu animace, použijte její To vlastnost. Pokud tuto vlastnost použijete To samostatně, animace získá počáteční hodnotu z vlastnosti, která je animované nebo z výstupu jiné animace použité na stejnou vlastnost. Vlastnost můžete použít To společně s From vlastností k explicitní zadání počátečních a koncových hodnot animace.
Hodnota posunu
Vlastnost By umožňuje zadat posun místo explicitní počáteční nebo koncové hodnoty animace. Vlastnost By animace určuje, kolik animace změní hodnotu v průběhu jeho trvání. Tuto vlastnost můžete použít By samostatně nebo s From vlastností. Pokud zadáte pouze By vlastnost, animace přidá hodnotu posunu k základní hodnotě vlastnosti nebo k výstupu jiné animace.
Použití hodnot from/to/by
Následující části popisují, jak používat From, Toa By vlastnosti společně nebo samostatně.
Příklady v této části používají DoubleAnimationk animaci Width vlastnosti Rectangle 10 nezávislých pixelů 10 pixelů s vysokým a 100 nezávislými pixely na zařízení.
I když každý příklad používá DoubleAnimationvlastnosti From, To a By všech animací From/To/By se chovají identicky. I když každý z těchto příkladů používá Storyboard, můžete použít animace From/To/By jinými způsoby. Další informace naleznete v tématu Přehled technik animace vlastností.
Z/Do
Když nastavíte From hodnoty a To hodnoty společně, animace pokračuje z hodnoty, která je určena From vlastností, na hodnotu, která je určena To vlastností.
Následující příklad nastaví From vlastnost DoubleAnimation 50 a jeho To vlastnost na 300. Výsledkem WidthRectangle je animace 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)
To
Když nastavíte pouze To vlastnost, animace postupuje ze základní hodnoty animované vlastnosti nebo z výstupu při vytváření animace, která byla dříve použita na stejnou vlastnost, na hodnotu, která je určena To vlastností.
("Psaní animace" odkazuje na ActiveFilling animaci, která byla dříve použita na stejnou vlastnost, která se stále projeví, když byla aktuální animace použita pomocí Compose chování předání.)
Následující příklad nastaví pouze To vlastnost DoubleAnimation 300. Vzhledem k tomu, že nebyla zadána žádná počáteční hodnota, DoubleAnimation použije jako počáteční hodnotu základní hodnotu vlastnosti (100 Width ). Animace WidthRectangle z 100 na cílovou hodnotu animace 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)
Od společnosti
Když nastavíte pouze By vlastnost animace, animace postupuje od základní hodnoty vlastnosti, která je animace, nebo z výstupu při psaní animace na součet této hodnoty a hodnoty, která je určena By vlastností.
Následující příklad nastaví pouze By vlastnost DoubleAnimation 300. Vzhledem k tomu, že v příkladu není zadána počáteční hodnota, DoubleAnimation používá základní hodnotu Width vlastnosti 100 jako počáteční hodnotu. Koncová hodnota je určena přidáním By hodnoty animace 300 do počáteční hodnoty 100: 400. Výsledkem WidthRectangle je animace 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/od
Když nastavíte From animaci a By vlastnosti, animace pokračuje z hodnoty, která je určena From vlastností, na hodnotu, která je určena součtem From vlastností a By vlastnosti.
Následující příklad nastaví From vlastnost DoubleAnimation 50 a jeho By vlastnost na 300. Koncová hodnota se určuje přidáním By hodnoty animace 300 do počáteční hodnoty 50: 350. Výsledkem WidthRectangle je animace 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)
From
Když zadáte pouze From hodnotu animace, animace pokračuje z hodnoty, která je určena From vlastností, na základní hodnotu vlastnosti, která je animované, nebo na výstup vytvářené animace.
Následující příklad nastaví pouze From vlastnost DoubleAnimation 50. Vzhledem k tomu, že nebyla zadána žádná koncová hodnota, DoubleAnimation používá jako koncovou hodnotu základní hodnotu Width vlastnosti 100. The Width of the Rectangle is animated from 50 to the base value of the Width property, 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/Podle
Pokud nastavíte animace i ToBy vlastnosti animace, By bude tato vlastnost ignorována.
Další typy animací
Animace From/To/By nejsou jediným typem animací, které WPF poskytuje: poskytuje také animace s klíčovým snímkem a animace cest.
Animace snímků klíčů se animuje podle libovolného počtu cílových hodnot popsaných pomocí klíčových snímků. Další informace najdete v přehledu animací klíčových snímků.
Animace cesty generuje výstupní hodnoty z objektu PathGeometry. Další informace najdete v přehledu animací cesty.
WPF také umožňuje vytvářet vlastní typy animací. Další informace najdete v přehledu vlastních animací.
Viz také
.NET Desktop feedback
Váš názor
Připravujeme: V průběhu roku 2024 budeme postupně vyřazovat problémy z GitHub coby mechanismus zpětné vazby pro obsah a nahrazovat ho novým systémem zpětné vazby. Další informace naleznete v tématu: https://aka.ms/ContentUserFeedback.
Odeslat a zobrazit názory pro