Modern icons animations (lottie)

[iFinn]

Hello Everyone!

What is lottie?

A Lottie is a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation.

Lottie parses Adobe After Effects animations exported as JSON files through an open-source After Effects extension called Bodymovin and renders.

I will not publish the library source with my edits to render it, but if you are interested in seeing the lottie code, you can find it in this repository:

You must be registered to see links

I implemented all the backend directly in the library, including the system to advance frame in animations, so it can be reused outside of widgets easily if you have some knowledge and want to do something custom / render it in-game too, in dynamic positions.

Support is not 100% with all lottie features, you can find the table of what is supported in the repository above.

It is worth noting here that the interaction with lottie has not been implemented, so you will not be able to trigger actions in lottie, but there is nothing to stop you from implementing it either, as it is not hard.

If you have difficulties, you can find the edited code in my repo forked from jetman:

You must be registered to see links

Remember, you need to edit the GUNZ project properties and add the include and lib

How i can do it?

Right click in Gunz(not is the solution)in project list -> Properties -> C/C++ -> Additional Include Directories and add: ../sdk/lottie/include;
Then Linker tab -> Input -> Additional Dependencies and add: ../sdk/lottie/lib/rlottie.lib;


View attachment lottie support for gunz.zip
Password: Finn

You can find free ready to use animations here:

You must be registered to see links

Example is included, but you can use like this:

<LOTTIE item="TEST" parent="LoginFrame">
 <BOUNDS>
  <X>0</X>
  <Y>25</Y>
  <W>200</W>
  <H>180</H>
 </BOUNDS>
 <FILE>test/loading.json</FILE>
</LOTTIE>

Demo:


Possible bugs: Changing resolution may compromise quality.
You can solve it by rebuilding an instance animation.reset(rlottie::Animation::loadFromData(buffer, path, path)); After resize the widget
Or wait until I make a change to recreate a texture internally and expose a function for the widget.

 

[sharpshot]

Great, thanks for this release!

 

[ilmar18]

Thank you finn

 

[NesuxGxx]

Very good congratulations this is very good, with a little more code it should be possible to make new GUI, such as HP bars and other things since according to the documentation that I am reading, the information can be modified live, all based on layers and setvalue, I hope I can do something with this and if it works out to share it with you, thank you very much for your contribution, sweetheart xd



This is the viewer, so you can see the .json
https://mega.nz/file/9E5GBRRC#_LcGB5yxC_s_EN7jmkOx7-_EWOkfvj2BdB0nJ0b4

 

[iFinn]

You can preview lottie files in web too:

You must be registered to see links

You can interact with the elements, you can make the variable std::unique_ptr animation public or do a function to return its instance

Basic example (u can find in rlottie repo)

animation->setValue<Property>("KeyPath", value)

A KeyPath is used to target a specific content or a set of contents that will be updated. A KeyPath is specified by a list of strings that correspond to the hierarchy of After Effects contents in the original animation. KeyPaths can include the specific name of the contents or wildcards:

• Wildcard *
  • Wildcards match any single content name in its position in the keypath.
• Globstar **
  • Globstars match zero or more layers.

List of Property

enum class Property {
  FillColor, /*!< Color property of Fill object , value type is rlottie::Color */
  FillOpacity, /*!< Opacity property of Fill object , value type is float [ 0 .. 100] */
  StrokeColor, /*!< Color property of Stroke object , value type is rlottie::Color */
  StrokeOpacity, /*!< Opacity property of Stroke object , value type is float [ 0 .. 100] */
  StrokeWidth, /*!< stroke with property of Stroke object , value type is float */
  TrAnchor, /*!< Transform Anchor property of Layer and Group object , value type is rlottie::Point */
  TrPosition, /*!< Transform Position property of Layer and Group object , value type is rlottie::Point */
  TrScale, /*!< Transform Scale property of Layer and Group object , value type is rlottie::Size. range[0 ..100] */
  TrRotation, /*!< Transform Scale property of Layer and Group object , value type is float. range[0 .. 360] in degrees*/
  TrOpacity /*!< Transform Opacity property of Layer and Group object , value type is float [ 0 .. 100] */
};

like:

animation->setValue<rlottie::Property::FillColor>("**",rlottie::Color(0, 1, 0));

Or you can use function in value
Let's suppose our animation has 30 frames, we want what is below frame 15 to be green, otherwise it is red

animation->setValue<rlottie::Property::FillColor>("Layer1.Box 1.Fill1",
    [](const rlottie::FrameInfo& info) {
         if (info.curFrame() < 15 )
             return rlottie::Color(0, 1, 0);
         else {
             return rlottie::Color(1, 0, 0);
         }
     });

 

[Wootziee]

What this does?

Since u already include a compiled static library. Wich i can't use without change my toolset.

        static bool SetDX9Ptr(void* dx9, DX9Type type);
        static void StartElapsedTime();
        static double GetElapsedTime();

 

[iFinn]

What these functions do is described in the code usage comment

You must be registered to see links

Sorry, i use VS 2019, compiled with toolset 142