1. Generate the list of known parsing and translation issues as an html page (builds from the source)
2. Host the resulting page in this repo
3. Update uri in LottieViewer's Issues section with the correct link
4. Update store submission to reflect this change

What do I need to do?

This builds upon #118 to enable LottieVisualSource to parse an image file. We need to ensure access to the asset folder: this feature may involve adding a new set of APIs that allows a developer to speciy the URI or source from where the assets may be retrieved.

The library has some issues with the rendering order for this animation.
Tried with a few other libraries (iOS, Android, Qt, Skia, Web) and they all process it correctly.
Tried quite hard to fix this by myself but I didn't succeed at all 😁

Json file here:
test_animation.json

Expected result:

Actual result:

The Lottie Viewer app crashes and certain animations throw exceptions on Windows 10 Insider Preview 18272 or greater.

The underlying cause is a regression in the Windows.UI.Composition Animation APIs: the issue has been fixed, and should make its way to Insider Preview builds soon.

I can't download from the Microsoft Store any chance you can upload it somewhere else?

Regression in Windows.UI.Composition Animation APIs. Awaiting fix to make it to an Insider build soon.

As the title says.
Should also include the licenses for each library that was used.

While building the code I this repo I noticed there are several “shared files” projects being used - can you explain why you chose to do that?

I discovered Lottie-Windows yesterday and the tutorial only works high-level and lets the XML file handle it.

I don't need to work with XML files nor show anything on the screen.
I want to import the .json file and be able to process the image frame by frame.

How can I render Lottie and save the Current Frame in order to process it further?

Some of our animations resulted in generated code that does not compile. The RootVisual property returns '_root' which does not exist, and the constructor calls Root() without assigning it to anything. For example;

ref class AnimatedVisual sealed : public Microsoft::UI::Xaml::Controls::IAnimatedVisual
{
const int64_t c_durationTicks = 20000000L;
Compositor^ const _c;
ExpressionAnimation^ const _reusableExpressionAnimation;

// The root of the composition.
ContainerVisual^ Root()
{
    auto result = _c->CreateContainerVisual();
    auto propertySet = result->Properties;
    propertySet->InsertScalar("Progress", 0);
    auto children = result->Children;
    children->InsertAtTop(ShapeVisual());
    return result;
}

ShapeVisual^ ShapeVisual()
{
    auto result = _c->CreateShapeVisual();
    result->Size = { 40, 40 };
    return result;
}

public:
AnimatedVisual(Compositor^ compositor)
: _c(compositor)
, _reusableExpressionAnimation(compositor->CreateExpressionAnimation())
{
Root();
}

virtual ~AnimatedVisual() { }

property TimeSpan Duration
{
    virtual TimeSpan get() { return { c_durationTicks }; }
}

property Visual^ RootVisual
{
    virtual Visual^ get() { return _root; }
}

property float2 Size
{
    virtual float2 get() { return { 40, 40 }; }
}

};
} // end namespace

Microsoft::UI::Xaml::Controls::IAnimatedVisual^ AnimatedVisuals::Circle_spinner::TryCreateAnimatedVisual(
Compositor^ compositor,
Object^* diagnostics)
{
diagnostics = nullptr;
if (!IsRuntimeCompatible())
{
return nullptr;
}
return ref new AnimatedVisual(compositor);
}

Meaning as this one:
https://github.com/airbnb/lottie-android
https://play.google.com/store/apps/details?id=com.airbnb.lottie

Determine expected behavior for the LottieVisualSource when its Lottie animation requires OS features from SDK > 17763. For instance, #58 uses new VisualSurface APIs to add support for Mattes and Masks.

• Should the LottieVisualSource fail and cause the AVP to its Fallback case?
• Should there animation be rendered anyway, with random results?
• If so, how do we present failure at run-time / use Warnings? Should there be an option for codegen and JSON which allows users to decide the desired behavior?

All the buttons in the app aren't readable by Narrator.

Do you have any plan to support gradients in the near future?

Allows to trim/crop the animation and export to a new file.

The Android and iOS SDKs for Lottie have support for replacing colors in an animation. Would be nice to get the same functionality for the Windows SDK. One use case would be if you want to use the same animation in several different apps with distinct branding and colors.

Thanks!

Are you aware that somebody put the lottie viewer in the Microsoft Store? Is it official?

Could be nice to do it by using mouse wheel too.
Also please show the scale number.

Running LottieGen on a few of our animations yielded this code, which doesn't pull in wrl.h:

//------------------------------------------------------------------------------
//
// This code was generated by a tool.
//
// Changes to this file may cause incorrect behavior and will be lost if
// the code is regenerated.
//
//------------------------------------------------------------------------------
#include "pch.h"
#include "circle_spinner.h"
#include "WindowsNumerics.h"

using namespace Microsoft::WRL;
using namespace Windows::Foundation;
using namespace Windows::Foundation::Numerics;
using namespace Windows::Graphics;
using namespace Windows::UI;
using namespace Windows::UI::Composition;

namespace
{
static bool IsRuntimeCompatible()
{
if (!Windows::Foundation::Metadata::ApiInformation::IsTypePresent("Windows.UI.Composition.CompositionGeometricClip"))
{
return false;
}
return true;
}

ref class AnimatedVisual sealed : public Microsoft::UI::Xaml::Controls::IAnimatedVisual
{
const int64_t c_durationTicks = 20000000L;
Compositor^ const _c;
ExpressionAnimation^ const _reusableExpressionAnimation;

// The root of the composition.
ContainerVisual^ Root()
{
    auto result = _c->CreateContainerVisual();
    auto propertySet = result->Properties;
    propertySet->InsertScalar("Progress", 0);
    auto children = result->Children;
    children->InsertAtTop(ShapeVisual());
    return result;
}

ShapeVisual^ ShapeVisual()
{
    auto result = _c->CreateShapeVisual();
    result->Size = { 40, 40 };
    return result;
}

public:
AnimatedVisual(Compositor^ compositor)
: _c(compositor)
, _reusableExpressionAnimation(compositor->CreateExpressionAnimation())
{
Root();
}

virtual ~AnimatedVisual() { }

property TimeSpan Duration
{
    virtual TimeSpan get() { return { c_durationTicks }; }
}

property Visual^ RootVisual
{
    virtual Visual^ get() { return _root; }
}

property float2 Size
{
    virtual float2 get() { return { 40, 40 }; }
}

};
} // end namespace

Microsoft::UI::Xaml::Controls::IAnimatedVisual^ AnimatedVisuals::Circle_spinner::TryCreateAnimatedVisual(
Compositor^ compositor,
Object^* diagnostics)
{
diagnostics = nullptr;
if (!IsRuntimeCompatible())
{
return nullptr;
}
return ref new AnimatedVisual(compositor);
}

Please give an option to set RepeatCount. Currently I am not able to stop looping animation. Currently the port gives an option to do just that : Lottie Port GitHub. Since this is the official version there should be a similar option as well.

Hi.
My last submission to the store failed because of a WACK failure. The issue seems to be related to the Microsoft.Toolkit.UWP.UI.Lottie package. Previous submission referenced this package and had no problem, though this is my first submission targeting 1903 and min version 1809. Here is the error they sent me:

Parameter value of method add_AnimatedVisualInvalidated of type Microsoft.Toolkit.Uwp.UI.Lottie.ILottieVisualSourceClass in file Microsoft.Toolkit.Uwp.UI.Lottie.winmd references the non-Windows Runtime type Microsoft.UI.Xaml.Controls.IDynamicAnimatedVisualSource. Windows Runtime types can reference only Windows Runtime types.
The type Microsoft.UI.Xaml.Controls.IAnimatedVisual referenced by type Microsoft.Toolkit.Uwp.UI.Lottie.ILottieVisualSourceClass in file Microsoft.Toolkit.Uwp.UI.Lottie.winmd was not found. All types referenced in metadata files must be discoverable.
Parameter value of method add_AnimatedVisualInvalidated of type Microsoft.Toolkit.Uwp.UI.Lottie.LottieVisualSource in file Microsoft.Toolkit.Uwp.UI.Lottie.winmd references the non-Windows Runtime type Microsoft.UI.Xaml.Controls.IDynamicAnimatedVisualSource. Windows Runtime types can reference only Windows Runtime types.
The type Microsoft.UI.Xaml.Controls.IAnimatedVisual referenced by type Microsoft.Toolkit.Uwp.UI.Lottie.LottieVisualSource in file Microsoft.Toolkit.Uwp.UI.Lottie.winmd was not found. All types referenced in metadata files must be discoverable.

Lottie currently parses image layers but does no more. Add support to render images for cases exported by Bodymovin:

• Base64 encoded embedded images
• External .png or .jpg files

Maybe show as gallery.

... or version should be displayed when you run LottieGen -Help.

The only other way to know the version of LottieGen is when you run dotnet tool list -g.

#115 adds support for Fills; this builds upon that to add support for Stokes.

Installing Lottie 5.1.0 from nuget.org results in NU1202 when minVersion < 17763 even if targetVersion is 17763

Now that we have a 5.1.1 release, the VERSION_HISTORY.md file needs to be updated. @sohchatt

The title says it all.

If a user builds LottieViewer with the latest Windows SDK but deploys to an older version of Windows and tries to use a feature in the latest Windows SDK, Lottie Windows should detect this scenario and log an issue which LottieViewer can then display.

Implementations of lottie from other platforms allow playing animations based on a segment of the progress or a segment of frames. If LottieVisualSource had a FrameCount property we could at least convert frame based animations to progress based animations when using Lottie-Windows in a cross platform project.

to show how well the animation plays, and how it affects performance.

As the title says.
It will make it easier to understand the content of the files.

I mean that it will view Lottie files as thumbnails, something like this one that works for SVG:
https://www.maketecheasier.com/view-svg-thumbnails-windows-explorer/

The readme is a little sparse at the moment. It should have more details on how to use the library. For instance:

• Link to the Lottie Viewer app to install
• Tell me the nuget package I need (have the command I can copy and paste to add it to my project)
• Show me a snippet of XAML that I can copy and paste in and modify the source uri

If I installed .NET Core 3.0 and Visual Studio Code on a MacOS system, can I also use it to debug lottie-windows?

• consume .zip files to have access bundled assets
• default behavior for image layer with inaccessible asset
• generate appropriate warnings about file paths / permissions if necessary

LottieGen uses CurrentCulture which in some countries generates invalid code. It should use InvariantCulture

Hello, as title, could you provide a WPF based viewer example project? Thanks.

There's a good use case for having a Visual Studio extension that replicates the functionality that the command line tool and LottieViewer can do so additional tooling isn't required in order to import a Lottie file into your Visual Studio project.

Looking at how this extension might look, it feels like the best user experience would be a right-click -> add where you would choose the JSON file and the output file would be automatically added to your project, ready to use.

You can install LottieGen without the 2.2.0 .Net Core framework installed, but when trying to run it, it won't.

>lottiegen
It was not possible to find any compatible framework version
The specified framework 'Microsoft.NETCore.App', version '2.2.0' was not found.
  - Check application dependencies and target a framework version installed at:
      C:\Program Files\dotnet
  - Installing .NET Core prerequisites might help resolve this problem:
      http://go.microsoft.com/fwlink/?LinkID=798306&clcid=0x409
  - The .NET Core framework and SDK can be installed from:
      https://aka.ms/dotnet-download
  - The following versions are installed:
.....

• Lottie v5.1.1 w/ support for new Bodymovin schema
• Fix Privacy link
• Fix Issues links to point to docs.microsoft.com
• Update screenshots, add banner
• Improve description + links to repo, docs, and lottiefiles

I can run Lottie-Viewer which is based on Universal Windows;

I have a .NET framework based C# project, can I import dlls(under dlls folder) of this library to render lottie animations?

Thanks.

Can it run on Version 1803 (OS build 17134) ? Some devices get update way later. Just a thought. Any suggestion ?

once Issues md files are published on docs.microsoft.com, update the link in lottie/docs/windows/troubleshooting.md to reflect the change.

When running LottieGenCorpus on the corpus files it does not seem to complete. It does seem to complete when running as a single thread in the debugger.

It'd be nice if there was a toggle button next to the time slider to control if the animation looped (this could modify the generated code as well).

Lottiegen currently exports to C# and C++/CX. Add support for winrtcpp. #64