Animated component

This UI Component is used for displaying and interacting with something called Lottie JSON Files.

Lottie JSON files may for example be downloaded from lottiefiles.com. Once downloaded, you may add the file as a Resource File in Appfarm Create, and connect it to your Animated Component.

The Animated Component has a few settings:

• Source: This is where you select the Lottie JSON file

• Play: The default value is true meaning that the animation will play automatically. However you may e.g. bind this property to an App Variable (e.g. App variables.Play animation, a bool variable) and toggle this variable with a Play/Pause button.

• Loop: You may select true in this property to make the animation loop forever.

• Speed: The default value is 1, meaning play the animation at default speed. You may increase or decrease the speed with this property.

A full example setup of Animated Component is available in our Showroom! You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register here.

There are two event handlers, On Load and On Complete. On Load is often used to display a loader when content has not yet loaded, by toggling a value when the component has loaded, e.g. On View Load set "loaded = true", then On Load set "loaded = false". The event will trigger after the content has loaded.

On Complete does not trigger for animations that loop.