Animation Manager for Xaml

AnimatedHead.gif

Moved to GitHub

https://github.com/brainoffline/AnimationManager

Animation Manager is designed to animate xaml controls in a very very easy way. These animations work the same way on both Windows 8 as well as Windows Phone 8.

There are a number of pain points when animating Xaml controls.
  • If it ain't easy, it ain't gonna get done
  • It is more often just left out as not seen as important
  • There is no design language for animation (Windows 8 has made a good start). You are most often given images straight out of Photoshop
  • Animations start behind the splash screen and are often missed.
  • MVVM implementations often complicate the separation of view and model. View models make animation difficult. MVCB may be a better approach.

Animation Manager attempt to address some of these issues.
  • Simple is best, but drop down to the next level to do something more powerful

Three Levels

There are three different approaches to using the Animation Manager.
  1. Declarative in XAML
  2. Call built in animations from code
  3. Define your own animations

Declarative Animation in XAML

There are three staging for declaring animations
  1. When a page loads
  2. When a page closes
  3. When idling

Here is an example of animating a button
<Button Content="Hello, World" >
    <bam:ObjectAnimation.Open>
        <bam:BounceInUpAnimation Delay="0.3"/>
    </bam:ObjectAnimation.Open>
    <bam:ObjectAnimation.Idle>
        <bam:PulseAnimation Duration="4.0"/>
    </bam:ObjectAnimation.Idle>
    <bam:ObjectAnimation.Close>
        <bam:BounceOutUpAnimation/>
    </bam:ObjectAnimation.Close>
</Button>


The default animations are simple and quick and quickly add to the polish of an app.
For the above button, it will bounce in when the screen is loaded, slowly pulsate while the screen is displayed, then bounce out as the screen closes.

Animate ListBox Items
Here is an example of animating a ListBox
<Page.Resources>
	<bam:FadeInUpAnimation x:Key="ListBoxAnimation1" Delay="0.03" Duration="0.3" Distance="150" />
</Page.Resources>

<ListBox ItemsSource="{Binding ExperimentTitleList}" 
    bam:ListAnimation.LoadItem="{StaticResource ListBoxAnimation1}" 
    bam:ListAnimation.LoadItemDelay="0.1" />


Splash Screen Aware Animations do not start until the splash screen has been dismissed.

Navigating can be a pain if you want to make it pretty. You want your animations to finish before navigating away from current screen.
This is not yet automatic and planned for the 1.0 release.

Page Transitions
Lots of cool page transitions.


Animations from Code

Async rocks for animation. This next bit of code awaits for all animations to finish, before navigating to the next screen.
        private async void HelloButton_OnClick(object sender, RoutedEventArgs e)
        {
            await Task.WhenAll(
                ObjectAnimation.AnimateClose(),
                HelloButton.AnimateAsync(new FlipAnimation()),
                HelloButton.AnimateAsync(new BounceOutDownAnimation()),
                SponsorText.AnimateAsync(new LightSpeedOutLeftAnimation())
            );

            NavigationService.Navigate(new Uri("/MenuPage.xaml", UriKind.Relative));
        }


Full Control over animations

For those control freaks out there, there is also great control over animations
var sb = new Storyboard();
var a1 = grid.AnimateProperty<DoubleAnimationUsingKeyFrames>(
         "(UIElement.Projection).(PlaneProjection.RotationY)")
         .AddEasingKeyFrame(0, 0)
         .AddEasingKeyFrame(0.3, -90)
         .AddEasingKeyFrame(0.6, 0, new CubicEase { EasingMode = EasingMode.EaseOut});
sb.Children.Add(a1);
sb.Completed += (s, a) => { };
sb.Begin();

Last edited Apr 7, 2014 at 4:00 PM by BrianDonovanSmith, version 11