Lottie animations

11 May 2021, 01:21

Hello,

We are making a native app and will be utilizing the Lottie plugin for our animations as found here: https://github.com/Noesis/Lottie-Noesis

Do we have more examples on how to export Xaml files for this with the parameters?

Is there a way to tell the animations to play / pause etc via code behind or xaml?

Thank you

11 May 2021, 22:03

Current version of the lottie plugin can generate two types of xaml files:

1. To generate a xaml with a root Canvas with a single Storyboard animation that is automatically fired when the Canvas is added to the UI tree (Loaded event).

json2xaml.py lottie.json lottie.xaml

2. To generate a xaml with a ResourceDictionary containing a ControlTemplate. The template contains also a single Storyboard animation that will be automatically fired when the template gets applied to a control.

json2xaml.py --template lottie lottie.json lottie.xaml

If you want to manually handle when animations will be launched you can use the first option, comment the EventTrigger, and find the Storyboard resource in the canvas root:

Storyboard* anims = canvas->FindResource<Storyboard>("Anims");

Then you can play/pause the animation whenever you want in code behind:

anims->Begin(canvas, true /*isControllable*/);
anims->Pause(canvas);
anims->Resume(canvas);
anims->Stop(canvas);

We have plans to improve the lottie plugin to allow After Effect animations to be labelled and generate xamls with different visual states that could be set from code-behind or xaml:

control->GoToState("Fire");

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity">
  <Grid.Resources>
    <ResourceDictionary Source="lottie.xaml"/>
  </Grid.Resources>
  <i:Interaction.Triggers>
    <i:EventTrigger EventName="Loaded">
      <i:GoToState StateName="Fire" TargetName="control"/>
    </i:EventTrigger>
  </i:Interaction.Triggers>
  <Control x:Name="control" Template="{StaticResource lottie}"/>
</Grid>

Lottie animations

Lottie animations

Re: Lottie animations

Who is online