Monthly Archives: February 2018

An Extended Splash Screen with Lottie Animations in UWP

In this article we demonstrate how to use Lottie animations in the extended splash screen of a UWP application. A Lottie animation is a programmable animated graphic that can be rendered into your XAML.

Here’s how the companion sample app starts up, with its splash screen transitioning into an look-alike page that displays an animation, whilst executing some longer-running code:

AppStart

Creating an extended splash screen

Sometimes an app needs to execute some longer-running code on startup. Especially the very first time after an install or an upgrade, you may want to connect to the backend, create a user profile, populate a local SQLite database, and defeat the Klingons, the Sith and/or the Daleks.

The long-running code in my sample app is less ambitious:

await Task.Delay(10000);

It is common to handle this scenario with a so-called Extended Splash Screen. This is a page that looks like the native splash screen and that executes the longer-running code, before eventually navigating to the main page. Typically an extended splash screen is decorated with a progress ring to indicate that the app does not hang.

The nice official documentation for creating an extended the splash screen is right here. I started with a copy of the sample code from there, and replaced the progress ring by a Lottie animation.

In a nutshell, here’s the routine to create an extended splash screen:

  • get the position of the SplashScreen image from the LaunchActivatedEventArgs,
  • navigate to an extended splash screen page that displays the same image at the same location,
  • execute the long running code in the Dismissed event handler of the original splash screen, and finally
  • navigate to the ‘real’ homepage or shell.

Adding Lottie capabilities

Lottie is a library to render animations. It uses JSON files that were generated by the Bodymovin extension of Adobe After Effects, a Special Effects editor to create picture and SVG animations. Lottie has implementations for iOS, Android, and the Web (React Native). It is supported by a broad community and has won a number of awards as design and development tool. It seems fair to assume that Lottie is becoming one of the standards for stand-alone animations in apps.

For Native Windows developers, Lottie is now available as LottieUWP, a NuGet package written by Alexandre Chohfi. To look it up from Visual Studio, you need to check the ‘Include prerelease’ box in NuGet Package Manager:

LottieUWP_NuGet

Adding Lottie files

LottieFiles is a great resource to get some free JSON files to experiment with:

LottieFiles

That’s where I found the beer bubbles animation.

Add the downloaded JSON file(s) to your project, and don’t forget to change their Build Action to Content:

Json_Build_Action

Displaying Lottie animations

The best way to get some insight into LottieUWP and its API is viewing this #ifdef episode on Channel 9. For the sample app, I just added a LottieAnimationView in the extended splash screen, with an auto-played, infinite-looping animation, nicely positioned over the beer glass background:


That’s all that’s needed to host and run the animation. I just modified the Speed – programmatically, since assigning a value declaratively in XAML is not very well supported in the current LottieUWP version (after all it *is* a pre-release):

// Adjust the speed of the Lottie animation.
SplashScreenAnimation.Speed = 3;

The end-user may resize the window or rotate his device when the app is starting. So when the background image is repositioned we also have to update the size and location of the LottieAnimationView:

// Position the extended splash screen image in the same location as the system splash screen image.
private void PositionImage()
{
    extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
    extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
    extendedSplashImage.Height = splashImageRect.Height;
    extendedSplashImage.Width = splashImageRect.Width;

    // Position the Lottie animation.
    var factor = splashImageRect.Width / 620;
    SplashScreenAnimation.SetValue(Canvas.LeftProperty, splashImageRect.X + 100 * factor);
    SplashScreenAnimation.SetValue(Canvas.TopProperty, splashImageRect.Y + 150 * factor);
    SplashScreenAnimation.Width = 180 * factor;
}

Tweaking the JSON files

Visual Studio allows you to unminify the JSON file, this will reveal a structure of layers with the strokes and shapes and their use in animations and transformations. I assume that it’s unlikely that we’re going to apply changes manually in there. Nevertheless there are some ways to slightly tweak the files.

In LottieFile’s preview page you can visualize the selected JSON against different background colors. This helps you to reveal the color scheme that is used in the animation. Here you can see that the filter animation uses plain white to fill the circles – so they’re not transparent:

LottiePreview

The button in the top right corner launches the Lottie Editor:

LottieEditor

This page allows you to change the color of some elements. The corresponding changes to the JSON files are logged in the browser’s Console.

Other use cases

The main page of the sample app shows how to decorate a button with a (more or less) subtle animation to draw the user’s attention. This is how it looks like:

AppMain

Please note that the animated GIF on this page loops infinitely, unlike the animation in the UWP app.

Again, we used a LottieAnimationView, but we set the RepeatCount to 2 and the RepeatMode to Reverse to obtain a brief symmetric animation:


And again, we adjusted the speed programmatically:

// Adjust the speed of the animation.
// Does not work declaratively for now.
MainpageAnimation.Speed = 3F;

Use PlayAnimation to (re)play the Lottie animation:

// Replay the animation.
MainpageAnimation.PlayAnimation();

I just added this call to verify whether the button is still clickable when the animation is running on top of it. Fortunately this is the case.

if you want see more Lottie API examples, please check Corrado’s blog post on the subject.

GitHub Repo N° 50

The sample app lives here on GitHub in my 50th public repo.

Enjoy!

Advertisements

Creating human-friendly texts on UWP with Humanizer

This article highlights some of the many features of the Humanizer for .NET project which also runs in UWP. It’s a project from the .NET Foundation that comes with a lot of helper functions for generating human-readable strings from … well … less human-readable expressions, for multiple cultures. Here’s an overview of the functionality:

  • Humanize and dehumanize strings
  • Truncate strings
  • Format strings
  • Humanize and dehumanize enumerations
  • Humanize dates, times, and time spans
  • Pluralize and singularize
  • Transforming numbers to words
  • Transforming numbers to ordinal words
  • Transforming to and from Roman numerals
  • … and more

I used many features of this package in many apps in several .NET technologies (console apps, WPF, and WCF). I’m a huge fan of the relative date and time functions, because after all:

Your 3 books will be delivered in 10 minutes.” sounds a lot better than ‘”Item: book; Quantity:3; ETA 2018-06-18T13:45:30”.

This extremely useful functionality is available as source on GitHub and as a NuGet package. I created a small app to test the package in UWP.

All you need to do is include the namespace:

using Humanizer;

Then you can call the many functions in the package. Most of these are implemented as extension methods. Here’s an overview of some expressions and their result:

“Can_return_title_Case”.Humanize(LetterCasing.Title) Can Return Title Case
“Pascal case input string is turned into sentence”.Dehumanize() PascalCaseInputStringIsTurnedIntoSentence
“Long text to truncate”.Truncate(10) Long text…
DateTime.UtcNow.AddHours(-30).Humanize() yesterday
TimeSpan.FromMilliseconds(1299630020).Humanize(3, collectionSeparator: null) 2 weeks, 1 day, and 1 hour
“Man”.Pluralize() Men
“process”.ToQuantity(2) 2 processes
“dollar”.ToQuantity(2, “C2”, new CultureInfo(“en-US”)) $2.00 dollars
5.Ordinalize() 5th
3501.ToWords() three thousand five hundred and one
21.ToOrdinalWords() twenty-first
“MMXVIII”.FromRoman().ToString() 2018

Seeing is believing, so here’s how these calls look like in the sample UWP app:

Humanizer_HomePage

The main page of the sample app allows you to set a time using Dean Chalk’s radial UWP TimePicker control. It then displays the selected time, and its Humanized value:

Humanizer_MainPage

I’m not diving further into Humanizer’s features and code here, since it is well documented. My UWP sample app lives here on GitHub.

Enjoy!