|
1 |
| -## Disclaimer ## |
2 |
| -Version 1.1.3 is archived in master branch and is no longer maintained. |
3 |
| -All new implementations are done in develop branch. |
4 |
| - |
5 | 1 | # LottieSharp
|
6 | 2 |
|
7 | 3 | |  | Play [LottieFiles](https://lottiefiles.com/) in your WPF application |
|
8 | 4 | |--|--|
|
9 | 5 |
|
10 |
| -**News** |
| 6 | +LottieSharp is built for WPF applications only. It targets .NET 6 and is built using [SkiaSharp](https://github.com/mono/SkiaSharp) and [Skottie](https://skia.org/docs/user/modules/skottie/). |
| 7 | + |
| 8 | +### What can I do with LottieSharp? |
| 9 | +You can load [lottie animations](https://lottiefiles.com/) and play them in your applications, creating beautiful UIs. |
| 10 | + |
| 11 | + |
| 12 | + |
| 13 | +PS.: Screen cast by: http://recordit.co/ |
| 14 | + |
| 15 | +### How to start? |
| 16 | + |
| 17 | + |
| 18 | +Add LottieSharp to your application: |
| 19 | + |
| 20 | +```PM> Install-Package LottieSharp -Version 2.0.0``` |
| 21 | + |
| 22 | +Reference LottieSharp in your XAML Window/Page/UserControl: |
| 23 | + |
| 24 | +```xmlns:lottie="clr-namespace:LottieSharp.WPF;assembly=LottieSharp.WPF"``` |
| 25 | + |
| 26 | +Add a LottieAnimationView control. Set properties as you wish: |
| 27 | +``` |
| 28 | +<lottie:LottieAnimationView |
| 29 | + Width="200" |
| 30 | + Height="300" |
| 31 | + HorizontalAlignment="Center" |
| 32 | + VerticalAlignment="Center" |
| 33 | + AutoPlay="True" |
| 34 | + FileName="{Binding Path=SelectedAsset.FilePath}" |
| 35 | + RepeatCount="-1" /> |
| 36 | +``` |
| 37 | + |
| 38 | + |
| 39 | +### Properties, Methods and Events |
| 40 | + |
| 41 | +| Properties | Values | Description | |
| 42 | +| --- | --- | --- | |
| 43 | +| AutoPlay | True, False | When true, the animation file is automatically played and it is loaded | |
| 44 | +| FileName | string | Path to the Lottie file. This property can be used in databind (see demo app) | |
| 45 | +| 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. | |
| 46 | +| IsPlaying | True, False | Represents the current aninaation status. | |
| 47 | + |
| 48 | + |
| 49 | +| Events | Description | |
| 50 | +| --- | --- | |
| 51 | +| EventHandler OnStop | It's triggered when animation stops, however if RepeatCount is forever this event isn't triggered. | |
| 52 | + |
| 53 | + |
| 54 | +| Methods | Description | |
| 55 | +| --- | --- | |
| 56 | +| PlayAnimation() | Starts the animation | |
| 57 | +| StopAnimation() | Stops the animation | |
| 58 | + |
| 59 | +### Next steps |
| 60 | +This is the first release with basic features but very functional. For next releases I want to: |
| 61 | +- Improve player mechanism |
| 62 | +- Add reverse mode |
| 63 | + |
| 64 | + |
| 65 | +### Questions? |
| 66 | +>### Why Lottie? |
| 67 | +>Lottie enables us to easily include beautiful and performant vector animations in applications. Since Lottie animations are exported as JSON files, file sizes remain >small and animations can easily be resized and looped with without losing quality. So, no more heavy videos or gifs! |
| 68 | +
|
| 69 | +>### Where do I find lottie animations? |
| 70 | +>There are many **FREE** files you can use. Visit [LottieFiles](https://lottiefiles.com/) website, there are a huge community for lottie! |
| 71 | +
|
| 72 | +>### How do I create my own animations? |
| 73 | +> 1. Adober effects, see [this post](https://uxdesign.cc/creating-lottie-animations-with-after-effects-e5124feb8a9c) |
| 74 | +> 2. [Framer](https://www.framer.com/plugins/lottie/) |
| 75 | +> 3. And others... see [this post](https://github.com/LottieFiles/awesome-lottie) |
| 76 | +
|
11 | 77 |
|
12 |
| -Watch this repository, a new release is coming! |
| 78 | +### Disclaimer |
| 79 | +> Version 1.1.3 is archived in master branch and is no longer maintained. |
| 80 | +> All new implementations are done in develop branch. |
0 commit comments