Readme

LottieSharp

	Play LottieFiles in your WPF application

LottieSharp is built for WPF applications only. It targets .NET 6 and .NET Framework 4.7 and is built using SkiaSharp and Skottie.

What can I do with LottieSharp?

You can load lottie animations and play them in your applications, creating beautiful UIs.

demo in action

PS.: Screen cast by: http://recordit.co/

How to start?

Add LottieSharp to your application:

PM> Install-Package LottieSharp -Version 2.3.0

Reference LottieSharp in your XAML Window/Page/UserControl:

xmlns:lottie="clr-namespace:LottieSharp.WPF;assembly=LottieSharp"

Add a LottieAnimationView control. Set properties as you wish:

<lottie:LottieAnimationView
    Width="200"
    Height="300"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    AutoPlay="True"
    FileName="{Binding Path=SelectedAsset.FilePath}"
    RepeatCount="-1" />

With images/my-resource-animation.json Resource in the application project file:

<lottie:LottieAnimationView
    Width="200"
    Height="300"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    AutoPlay="True"
    ResourcePath="pack://application:,,,/images/my-resource-animation.json"
    RepeatCount="-1" />

When a lottie animation is small and you need it bigger, there's no need to edit the lottie file. Now we apply a scale to it.

<lottie:LottieAnimationView
    Width="200"
    Height="300"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    AutoPlay="True"
    ResourcePath="pack://application:,,,/images/my-resource-animation.json"
    RepeatCount="-1">
    <lottie:LottieAnimationView.AnimationScale>
          <transforms:CenterTransform ScaleX="1.5" ScaleY="1.5" />
    </lottie:LottieAnimationView.AnimationScale>
</lottie:LottieAnimationView>

Properties	Values	Description
AutoPlay	True, False	When true, the animation file is automatically played and it is loaded
FileName	string	Path to the Lottie file. This property can be used in databind (see demo app)
ResourcePath	string	Resource path to the Lottie file. This property can be used in databind (see demo app splash screen)
RepeatCount	-1..N	How many times the animation will repeat after once played. The default is 0, meaning it doesn't repeat. -1 means it repeats forever.
IsPlaying	True, False	Represents the current aninaation status.
AnimationScale	AnimationTransformBase	Applies a custom scale to the loaded lottie animation. See CenterTransform above

Methods	Description
PlayAnimation()	Starts the animation
StopAnimation()	Stops the animation

Quicoli/LottieSharpv2.3.0

Get Started

Readme

LottieSharp

What can I do with LottieSharp?

How to start?

Version 2.3.0

Version 2.2.0

Version 2.1.0

Version 2.0.1

Properties, Methods and Events

Next steps

Questions?

Why Lottie?

Where do I find lottie animations?

How do I create my own animations?

Disclaimer

Links

Keywords

Maintainers