Lottie-Noesis
Lottie-Noesis renders Adobe AfterEffects animations using NoesisGUI. Noesis now offers a Python script to import JSON animations derived from Bodymovin plugin for After Effects. It can be used on any platform compatible with NoesisGUI like desktop, mobile, consoles and web.
Click on Sample0 or Sample1 for realtime preview in XamlToy (Sample animations courtesy of lottiefiles.com)
Requirements
- NoesisGUI 3.0+ is needed
- Compatible with C++ SDK, C# SDK, Unity and Unreal Engine
- Python 3
- JSON files exported with Bodymovin 5.6.1+
Getting Started
Use the Python script to convert from .json to .xaml:
usage: json2xaml.py [-h] [--version] [--debug] [--viewbox] [--template <key>]
[--repeat <behavior>] json_file xaml_file
Converts from After Effects Bodymovin format to Noesis XAML
positional arguments:
json_file the JSON file to be converted from
xaml_file the XAML file to created
optional arguments:
-h, --help show this help message and exit
--version show program's version number and exit
--debug dump layers information
--viewbox use Viewbox as root element
--template <key> import lottie as a control template resource
--repeat <behavior> describe how the animation repeats
Usage
By default the script generates a XAML with a root Canvas. This is not very convenient if you need to use it from another XAML. For these cases, the argument '--template' can be used to generate a control template that can be used this way:
json2xaml.py --template lottie lottie.json lottie.xaml
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid.Resources>
<ResourceDictionary Source="lottie.xaml"/>
</Grid.Resources>
<Control Template="{StaticResource lottie}"/>
</Grid>
Features supported
| Shapes | Supported |
|---|---|
| Shape | 👍 |
| Ellipse | 👍 |
| Rectangle | 👍 |
| Rounded Rectangle | 👍 |
| Polystar | ⛔️ |
| Group | 👍 |
| Repeater | ⛔️ |
| Trim Path (individually) | 👍 |
| Trim Path (simultaneously) | ⛔️ |
| Fills | Supported |
| Color | 👍 |
| Opacity | 👍 |
| Fill Rule | 👍 |
| Radial Gradient | 👍 |
| Linear Gradient | 👍 |
| Strokes | Supported |
| Color | 👍 |
| Opacity | 👍 |
| Width | 👍 |
| Line Cap | 👍 |
| Line Join | 👍 |
| Miter Limit | 👍 |
| Dashes | 👍 |
| Gradient | 👍 |
| Transforms | Supported |
| Position | 👍 |
| Position (separated X/Y) | 👍 |
| Scale | 👍 |
| Rotation | 👍 |
| Anchor Point | 👍 |
| Opacity | 👍 |
| Parenting | 👍 |
| Auto Orient | ⛔️ |
| Skew | ⛔️ |
| Interpolation | Supported |
| Linear Interpolation | 👍 |
| Bezier Interpolation | 👍 |
| Hold Interpolation | 👍 |
| Spatial Bezier Interpolation | ⛔️ |
| Rove Across Time | ⛔️ |
| Masks | Supported |
| Mask Path | 👍 |
| Mask Opacity | ⛔️ |
| Add | 👍 |
| Subtract | ⛔️ |
| Intersect | ⛔️ |
| Lighten | ⛔️ |
| Darken | ⛔️ |
| Difference | ⛔️ |
| Expansion | ⛔️ |
| Feather | ⛔️ |
| Mattes | Supported |
| Alpha Matte | ⛔️ |
| Alpha Inverted Matte | ⛔️ |
| Luma Matte | ⛔️ |
| Luma Inverted Matte | ⛔️ |
| Merge Paths | Supported |
| Merge | ⛔️ |
| Add | ⛔️ |
| Subtract | ⛔️ |
| Intersect | ⛔️ |
| Exclude Intersection | ⛔️ |
| Layer Effects | Supported |
| Fill | ⛔️ |
| Stroke | ⛔️ |
| Tint | ⛔️ |
| Tritone | ⛔️ |
| Levels Individual Controls | ⛔️ |
| Text | Supported |
| Glyphs | 👍 |
| Fonts | 👍 |
| Transform | 👍 |
| Fill | 👍 |
| Stroke | 👍 |
| Tracking | 👍 |
| Anchor point grouping | ⛔️ |
| Text Path | ⛔️ |
| Per-character 3D | ⛔️ |
| Range selector (Units) | ⛔️ |
| Range selector (Based on) | ⛔️ |
| Range selector (Amount) | ⛔️ |
| Range selector (Shape) | ⛔️ |
| Range selector (Ease High) | ⛔️ |
| Range selector (Ease Low) | ⛔️ |
| Range selector (Randomize order) | ⛔️ |
| expression selector | ⛔️ |
| Other | Supported |
| Expressions | ⛔️ |
| Images | 👍 |
| Precomps | 👍 |
| Time Stretch | ⛔️ |
| Time remap | ⛔️ |
| Markers | ⛔️ |
Feedback
Please use our forums for bug reports and feature requests.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent