Assembly: PresentationCore (in presentationcore.dll)
XML Namespace: http://schemas.microsoft.com/winfx/2006/xaml/presentation
An animation updates the value of a property over a period of time. An animation effect can be subtle, such as moving a Shape a few pixels left and right, or dramatic, such as enlarging an object to 200 times its original size while spinning it and changing its color. To create an animation in Windows Presentation Foundation (WPF), you associate an animation with an object's property value.
The DoubleAnimation class creates a transition between two target values. To set its target values, use its From, To, and By properties. The following table summarizes how the From, To, and By properties may be used together or separately to determine an animation's target values.
The animation progresses from the value specified by the From property to the base value of the property being animated or to a previous animation's output value, depending on how the previous animation is configured.
From and To
The animation progresses from the value specified by the From property to the value specified by the To property.
From and By
The animation progresses from the value specified by the From property to the value specified by the sum of the From and By properties.
The animation progresses from the animated property's base value or a previous animation's output value to the value specified by the To property.
The animation progresses from the base value of the property being animated or a previous animation's output value to the sum of that value and the value specified by the By property.
If you set both the To and By properties, the To property takes precedence and the By property is ignored.
To use other interpolation methods or animate between more than two target values, use a DoubleAnimationUsingKeyFrames object.
Because the DoubleAnimation class inherits from Freezable, DoubleAnimation objects gain several special features, which include the following: they can be declared as resources, shared among multiple objects, made read-only to improve performance, cloned, and made thread-safe. For more information about the different features provided by Freezable objects, see the Freezable Objects Overview.
To make a framework element fade in and out of view, you can animate its Opacity property or you can animate the Opacity property of the Brush (or brushes) used to paint it. Animating the element's opacity makes it and its children fade in and out of view, but animating the brush used to paint the element enables you to be more selective about which portion of the element fades. For example, you could animate the opacity of a brush used to paint a button's background. This would cause the button's background to fade in and out of view, while leaving its text fully opaque.
In the following example, two buttons are animated so that they fade in and out of view. The Opacity of the first Button is animated from 1.0 to 0.0 over a Duration of five seconds. The second button is also animated, but the Opacity of the SolidColorBrush used to paint its Background is animated rather than the opacity of the entire button. When the example is run, the first button completely fades in and out of view, while only the background of the second button fades in and out of view. Its text and border remain fully opaque.
<!-- OpacityAnimationExample.xaml This example shows how to animate the opacity of objects, making them fade in and out of view. --> <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" WindowTitle="Opacity Animation Example" Background="White"> <StackPanel Margin="20"> <!-- Clicking this button animates its opacity. --> <Button Name="opacityAnimatedButton"> A Button <Button.Triggers> <EventTrigger RoutedEvent="Button.Click"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="opacityAnimatedButton" Storyboard.TargetProperty="(Button.Opacity)" From="1" To="0" Duration="0:0:5" AutoReverse="True" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Button.Triggers> </Button> <!-- Clicking this button animates the opacity of the brush used to paint its background. --> <Button> A Button <Button.Background> <SolidColorBrush x:Name="MyAnimatedBrush" Color="Orange" /> </Button.Background> <Button.Triggers> <EventTrigger RoutedEvent="Button.Click"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="MyAnimatedBrush" Storyboard.TargetProperty="(Brush.Opacity)" From="1" To="0" Duration="0:0:5" AutoReverse="True" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Button.Triggers> </Button> </StackPanel> </Page>
Code has been omitted from this example. The full sample also shows how to animate the opacity of a Color within a LinearGradientBrush. For the full sample, see the Animating the Opacity of an Element Sample.
|How to: Animate the Size of a FrameworkElement|
|How to: Animate a Property Without Using a Storyboard|| |
This example shows one way to apply an animation to a property without using a Storyboard.
|How to: Animate a Property by Using a Storyboard|| |
This example shows how to use a Storyboard to animate properties. To animate a property by using a Storyboard, create an animation for each property that you want to animate and also create a Storyboard to contain the animations.
Windows 98, Windows Server 2000 SP4, Windows CE, Windows Millennium Edition, Windows Mobile for Pocket PC, Windows Mobile for Smartphone, Windows Server 2003, Windows XP Media Center Edition, Windows XP Professional x64 Edition, Windows XP SP2, Windows XP Starter EditionThe Microsoft .NET Framework 3.0 is supported on Windows Vista, Microsoft Windows XP SP2, and Windows Server 2003 SP1.