Lottie Animations : Add cool animations to your apps

New Lottie Animation extension
:partying_face:

About Lottie
Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

Blocks




image

Documentation
image
Event Triggered once animation is cancelled

image
Event Triggered when Lottie Animation View Is Clicked

image
Event triggered when animation is composition is loaded

image
Event Triggered when Animation ended

image
Event Triggered when animation is paused

image
Event Triggered when Animation is Repeated

image
Event triggered after a specific task is completed, dispatches ((Object)) Result

image
Event Triggered when animation is resumed

image
Event Triggered when animation is started

image
Method to Cancel Animation

image
Disables Use of Extra Scale Mode for XY

image
Initializes Lottie and adds it in a view

image
Pauses Lottie Animation

image
Resumes Lottie Animation

image
Reverses Animation Speed

image
Sets Animation for Lottie from Json, you need to pass json in text form

image
Sets Animation for Lottie from Url
Demo Blocks


*U need to pass json as text in AnimationFromJson block

Demo

Thanks to:
@oseamiya for the idea :relaxed:
and all community members

Notice
Aix wont work in Companion

Download Aix
LottieAnimations.aix (524.9 KB)
LottieCore.aix (2.3 MB)
Use LottieAnimations Aix for functionality and simply drag and drop LottieCore aix because it fulfils sdk

19 Likes

Then its hard to work with it...
:confounded:

1 Like

Amazing work @Know_About_IT .
Keep it up :+1:

1 Like

Its not aix's issue, Lottie components in Kodular, Niotron etc.... builders doesnt work in companion too :wink:

2 Likes

When I tested the extension in (kodular), it had just worked fine for me.

2 Likes

Ya, but in companion it may not :slight_smile:

1 Like

You made it possible Anshuman... Great job :metal::+1:

4 Likes
a very small update

Added Set from File Property

image
image

LottieAnim (5).aix (524.9 KB)

3 Likes

Extension is now Open Source :slightly_smiling_face:

lottieanim.txt (7.6 KB)

2 Likes

I will soon update my Lottie Component for Appinventor PR :slight_smile:

just hoping Ai2 team will approve it : )

In the AnimationFromUrl block should I set the link to
this :point_down:
https://lottiefiles.com/xxxx-disconnected
or this :point_down: ?
https://assets5.lottiefiles.com/packages/lf20_gri178xx.json

(I changed the links, the actual link are real)

is this code for

LottieAnimations or LottieCore?

Lottie core just implements 2 libraries, i seprated from main to reduce size

You will need libs : Kotlin-stdlib.jar, Okio

MVN Links
https://mvnrepository.com/artifact/com.airbnb.android/lottie/4.2.0
https://mvnrepository.com/artifact/com.squareup.okio/okio/3.0.0
https://mvnrepository.com/artifact/org.jetbrains.kotlin/kotlin-stdlib-common/1.6.0-RC2

1 Like