UWP Connected Animations updates with Windows Creators release

Context is one of the most important things that helps us understand what is going on, without context things become crazy and prone to interpretation. Think about it if you were writing a piece of code where you have to show something on the screen you will need context to get the right information or to understand what information to get. If a friend of yours start to talk about moon travel and how great experience it was for him, you will definitely stop him right there as ask for some context to make sense of it all.

Dictionary definition for context:

The set of circumstances or facts that surround a particular event, situation, etc.

Similarly in UX when user navigates from one page to another to consume more information about a specific topic or item they require some context to help them be comfortable in their new surroundings and to make sense of it. ConnectedAnimationService provide a rich set of APIs for Windows UWP developers to create beautiful and engaging experiences which help users maintain context as they navigate to consume content. Some easy UX wins that you can achieve by using this API are

  1. Help user understand their action better, this helps user be more confident in your app and not lost. This helps “Time to action” which is a KPI to track user experience success.
  2. You can manage where should user focus when they land on the page, what is the most important thing that user should see first and start from as they start consuming content
  3. Remove any seams from your app. With this API you can absolutely remove all the flashes from your app navigation. It will feel like one cohesive and immersive experience
  4. Users experience a playful app which is keeping them engaged and informed during the most critical navigation.

What does a connected experience look like?

Here the user is navigating from a master to detail page to consume more information about the Item.

 

Connected Animations

XAML released a new API in Anniversary Update named ConnectedAnimationService. This API lets you create experiences like above with simple API calls. Basically the API is divided into 4 parts

  1. Identify the source element that you want to animate with navigation and provide an ID
  2. Identify the destination element that source will animate to.
  3. Prepare the animation on source page right before navigation
  4. On the destination page when the target element has _loaded get the animation with the ID then start the animation with destination element as target.

This is what the APIs look like

On your source page identify the element that you want to animate when it is clicked and results into navigation In your click handler

ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ID", SourceImage);
Frame.Navigate(typeof(DestinationPage));

Use Unique ID as you can have more than one element animating from source to destination page.

On destination page: using OnNavigatedTo of page or in case of Image use ImageOpened event handler perform the following code to get the animation associated with the ID that you identified on the source page and TryStart the same animation on the destination page’s element which you want to connect.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    ConnectedAnimation imageAnimation = 
        ConnectedAnimationService.GetForCurrentView().GetAnimation("ID");
    if (imageAnimation != null)
    {
        imageAnimation.TryStart(DestinationImage);
    }
}

Custom Animations

Before Creators update ConnectedAnimationService provided only a default animation which meant your app navigation will look the same as everyone else. Creators update adds this much needed ability for developers to provide custom animations to have beautiful transitions that differentiate your app from others.

There are 4 components that you can customize

  1. Crossfade – Let’s you to customize how elements crossfade as source element reaches destination
  2. OffsetX – Let’s you customize the X channel of Offset.
  3. OffsetY – Let’s you customize the Y channel of Offset.
  4. Scale – Let’s you customize scale of the element as it animates

Customize X channel of your Offset

 

//OffsetX Custom Animation

 var customXAnimation = _compositor.CreateScalarKeyFrameAnimation();
 customXAnimation.InsertExpressionKeyFrame(0.5f, "FinalValue - 25f"); //You can also use StartingValue in case you need to use starting value to customize animation.
 customXAnimation.InsertExpressionKeyFrame(1f, "FinalValue");

ConnectedAnimationService.GetForCurrentView().GetAnimation("ID").SetAnimationComponent(ConnectedAnimationComponent.OffsetX, customXAnimation);

 

Customize Y channel of your Offset animation

//OffsetY Custom Animation

var customYAnimation = _compositor.CreateScalarKeyFrameAnimation();
customYAnimation.InsertExpressionKeyFrame(0.5f, "FinalValue - 25f"); //You can also use StartingValue in case you need to use starting value to customize animation.
customYAnimation.InsertExpressionKeyFrame(1f, "FinalValue");

ConnectedAnimationService.GetForCurrentView().GetAnimation("ID").SetAnimationComponent(ConnectedAnimationComponent.OffsetY, customYAnimation);

Simlarly you can also provide custom animations to define your crossfade and Scale to accomplish your scenario.

//CrossFade Custom Animation
 ConnectedAnimationService.GetForCurrentView().GetAnimation("ID").SetAnimationComponent(ConnectedAnimationComponent.CrossFade, scalarKeyFrameAnimation);
 
//Scale Custom Animation
ConnectedAnimationService.GetForCurrentView().GetAnimation("ID").SetAnimationComponent(ConnectedAnimationComponent.Scale, scalarKeyFrameAnimation);
 

Coordinate Animations across pages

Connected animations help you connect different pages together with context that animates across pages. Destination page where the element is animating to will have more information about object that user selected to help connect the dots between 2 different pages and with the element animating creators update released a new functionality with ConnectedAnimationService which lets you coordinate elements on the destination page with the animating element. E.g. In the sample below the text on the right is animating with the incoming image where as the text is on the destination page. If item which was clicked was on the right side then text seems to come from right whereas if the image is coming from left the text also animates in from left.

The text panel is only on the destination page and not on source page. Text block on your destination page in XAML looks like this

<StackPanel x:Name="DescriptionRoot" Grid.Column="1" Margin="0,80">
 <TextBlock Foreground="White" FontSize="18">Caption Text</TextBlock>
 <TextBlock Margin="0,10,0,0" Foreground="White" HorizontalAlignment="Left" FontSize="14" MaxWidth="500" TextWrapping="Wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lobortis nulla sit amet aliquet viverra. Etiam gravida luctus orci, at egestas leo auctor sed.</TextBlock>
 </StackPanel>

Now on your Destination page’s onNavigatedTo Event where you perform TryStart(…) with the incoming animation you provide list of elements that you want to coordinate as parameter and framework will do the work of coordinating animations across pages.

protected override void OnNavigatedTo(NavigationEventArgs e)
 {
 base.OnNavigatedTo(e);
 ConnectedAnimationService
 .GetForCurrentView()
 .GetAnimation("BorderSource")
 .TryStart(DestinationElement, new[] { DescriptionRoot });

 }

Image Interpolation

Sometimes we have different sized images across pages i.e. a square image performs a connected animation to destination where the image is defined as rectangle. With Creators update you don’t have to think about it a bit, platform performs the magic to automatically interpolation between image sizes. Just make sure you TryStart(..) the ConnectedAnimationService in your image control which has defined size _loaded event.

Conclusion

Connected animations provides your users a delightful and seamless experience which also makes them feel in control. Users don’t feel lost as they jump from one page to another. With the new updates in Creators release you can make connected animations your own and have a differentiated experience which delights your users and gets you that 5 star rating.

Resources

You can look at a running sample from Windows UI Sample Gallery – Navigation Flow For Show/Hide and Page transitions in this sample please refer to this post.

Complete Sample Gallery – Windows UI Samples

 

Let me know in the comments section if this was helpful and what else would you want to talk about.

Thanks!