Animation Manager for Xaml
Moved to GitHub
https://github.com/brainoffline/AnimationManagerAnimation 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.
- Declarative in XAML
- Call built in animations from code
- Define your own animations
Declarative Animation in XAML
There are three staging for declaring animations
- When a page loads
- When a page closes
- 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 ItemsHere 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 TransitionsLots 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();