Animations

WPF itself contains robust support for many animations. These may be used in WPF Composites at-will.

WPF-CPS also adds onto this a handful of extra extension methods for convenience via the static class FasterWPF.AnimationExt.

These include four main methods for animating Dependency Properties. These are:
- DoubleAnimate
- ScaleAnimate
- TranslateAnimate
- ColorAnimatePanelBackground (only works with elements of type Panel, such as StackPanel)

For instance, here is an example of animating both the height and width of a rectangle, increasing both over the duration of three seconds:

rect.DoubleAnimate(Rectangle.WidthProperty, 50, 150, TimeSpan.FromSeconds(3.0), false, false);
rect.DoubleAnimate(Rectangle.HeightProperty, 50, 150, TimeSpan.FromSeconds(3.0), false, false);

Moreover, here is an example of animating the background color of a StackPanel over the duration of five seconds, changing it smoothly from its existing color to Black:

myStackPanel.SolidColorInPanelBackground(Colors.Black, 5);

The extension helper method in the above example leverages ColorAnimatePanelBackground internally. The name of the method is short for "Animate Solid Color In to the Panel's Background".

Other helper methods (following a naming convention of "In" or "Out") that leverage the four main methods include:
-FadeOut (this animates Opacity)
-FadeIn (this animates Opacity)
-FadeOutFadeIn (this animates Opacity, fading one element out and another in)
-ScaleOut (with Scale Type of BottomToTop or RightToLeft)
-ScaleIn (with Scale Type of BottomToTop or RightToLeft)
-ScaleOutScaleIn (with Scale Type of BottomToTop or RightToLeft on two elements simultaneously)
-TranslateIn (this is a Double Animation that moves an element along X or Y axis based on Scale Type)

These latter methods are meant primarily for Transition effects, like fading in a dialog or scaling in a stack panel to simulate a menu expanding, etc. To see more examples of these in action, see Visual State Manager

Last edited Mar 28, 2014 at 4:05 AM by stagathome0069, version 16

Comments

No comments yet.