Easy Win — Adding Connected Animations to a Modern App

The Connected Animations feature is one of the most exciting aspects of Modern Windows 10 App development. The animation types help maintain context between different views, including popups or flyouts. In a connected animation, the contextual element animates to appear as if it flows between two views during a change in the UI; such as transitioning from a master list to a detail view.

Figure 1

Most out-of-the-box Windows 10 controls already deliver smooth, intuitive transitions and animations for actions such as taps, mouse movements and page navigations, however connected animations add an additional level of continuity and professionalism to a user experience, seamlessly blending content through the transition from one view to the next.

There are several methods to add connected animations to a modern Windows app ranging from simple to complex.

The Basics of Connected Animations

The key to creating connected animations is remembering that animations are prepared on the source page, but started on the destination page. This two-step process is time sensitive; if the animation isn’t started within three seconds, it will be disposed and subsequent calls to start it will fail.

Preparing the animation on the source page can be done in most cases with a simple one-line call to the ConnectedAnimationService instance by calling ConnectedAnimationService.GetForCurrentView(), and calling the PrepareToAnimate() method passing a reference to a unique key for the animation and the UI element to use in the transition. The key is necessary for the destination page to retrieve and start the animation. Since time is of the essence, developers should immediately navigate to the destination after preparing the animation (usually called in response to some user interaction such as a mouse click):

ConnectedAnimationService.GetForCurrentView().PrepareToAnimate(“key1”, SourceImage);
Frame.Navigate(typeof(TargetPage));

The destination page starts the animation by obtaining a reference to the previously created animation by calling the GetAnimation() method on the instance of the ConnectedAnimationService and passing in a reference to the unique key. If the animation is returned, the TryStart() method can be called with a reference to the destination element. Overriding the OnNavigatedTo event handler would be best place to start the animation:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
var animation = ConnectedAnimationService.GetForCurrentView().GetAnimation(“key1”);
if (animation != null)
{
animation.TryStart(TargetImage);
}
}

Note, however, that this animation is unidirectional; pressing the back button will result in returning to the source page without animation. To add bidirectional connection animations, simply prepare another connected animation with a new key in the target page, and start it in the source page’s OnNavigatedTo event handler.

Figure 2

Connected Animations with Lists

In many scenarios, developers will need to create connection animations to or from controls containing collections of items; such as ListViews or GridViews. Fortunately, any control derived from the ListViewBase class contains two new methods, PrepareConnectedAnimation() and TryStartConnectedAnimationAsync(), facilitating the two-step process of creating connected animations.

As with the basic scenario outlined above, the animation must be prepared on the source page and finished on the destination page. The animation should be prepared when responding to some action, such as when the user clicks on an item. The actual event developers would handle may vary case to case, but the SelectionChanged or ItemClick events would be suitable candidates.

One difference when calling the PrepareConnectionAnimation() method from the previous example is the inclusion of a third parameter, the item itself.

private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
var control = sender as ListView;
var item = control.SelectedItem;
MyListControl.PrepareConnectedAnimation(“key2”, item, “SourceImage”);
}

The destination page would be handled as before.

However, when the ListViewBase-derived control is the destination of a connected animation; such as when navigating back from the original destination page, some additional work is necessary. Instead of the OnNavigatedTo event handler, start the animation after the data for the control is loaded; for example, in the Loaded event handler for the control.

private async void OnLoaded(object sender, RoutedEventArgs e)
{
// The source item participating in the connection animation needs to be persisted.
// Most likely, the item can be passed to the source page from the destination page
// via the NavigationEventArgs in the OnNavigateTo event handler.
var item = GetSourceItem();
if (item == null) return;
MyListControl.ScrollIntoView(item);
var animation = ConnectedAnimationService.GetForCurrentView(“key2”);
if (animation == null) return;
await MyListControl.TryStartConnectedAnimationAsync(animation, item, “SourceImage”);
}

Keep in mind that TryStartConnectedAnimationAsync() will wait to start until the corresponding item container has been created by the ListViewBase control.

Figure 3

Add More Flair with Coordinated Animations

Coordinated animations are animations that work in conjunction with a connected animation. Where a connected animation transitions a single contextual element across two separate view, a coordinated animation may animate additional elements for extra effect.

Coordinated animations are simple to create, developers only need to provide an array of additional elements to the TryStart() method of the animation:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
var animation = ConnectedAnimationService.GetForCurrentView().GetAnimation(“key1”);
if (animation != null)
{
animation.TryStart(TargetImage, new[] { TargetElement1, TargetElement2 });
}
}

Both the TargetElement1 and TargetElement2 elements will travel alongside the connected animation target to their final locations during the entrance animation.

Figure 4

Next Steps

Connected animations are a quick and effortless way to add motion to modern Windows 10 apps. It doesn’t end there; take them to the next level with customized transitions, special effects, key framing, and other animation techniques.

Head over to the Fluent Design System Connected Animation documentation and learn how to seamlessly blend and transition content between views.

Learn more here!