Plugin to play Lottie animations.
v:1.0

Based on:
https://github.com/airbnb/lottie-web

 Description

The neoLottie plugin for VisualNEO Web enables developers to incorporate animated Lottie JSON files into applications, enhancing visual engagement with lightweight, scalable animations. This plugin is perfect for adding dynamic, interactive elements such as animated icons, loading indicators, or other visual cues within applications.

Loading and Displaying Lottie Animations

The primary command, neoLottieLoad, allows developers to load and display Lottie JSON animations in a container, ensuring smooth, high-quality animations across devices without compromising performance.

    • Command: neoLottieLoad
    • Syntax: neoLottieLoad "containerId" "jsonUrl" loop autoplay
      • containerId: The ID of the container where the animation will appear.
      • jsonUrl: URL or path to the Lottie JSON file.
      • loop: (Optional) Specifies whether the animation should loop continuously (true or false).
      • autoplay: (Optional) Determines if the animation starts playing automatically (true or false).

Example:

neoLottieLoad "animationContainer" "path/to/animation.json" true true

This command loads an animation that will start automatically and loop continuously.

Controlling Playback

The plugin supports several commands to control the animation, allowing developers to pause, play, or stop it based on user interactions or app events.

    • Commands:
      • neoLottiePlay: Starts or resumes the animation.
      • neoLottiePause: Pauses the animation at the current frame.
      • neoLottieStop: Stops the animation and resets it to the beginning.

Example:

neoLottiePlay "animationContainer"

This command resumes the animation in the specified container.

Customization Options

For additional flexibility, the plugin allows customization of animation properties, including speed adjustments and playback direction, enabling nuanced control over how animations interact with users.

    • Commands:
      • neoLottieSetSpeed: Changes the speed of the animation (e.g., 1 for normal speed, 0.5 for half-speed).
      • neoLottieSetDirection: Sets the direction (1 for forward, -1 for reverse).

Example:

neoLottieSetSpeed "animationContainer" 0.5

This sets the animation to play at half speed, ideal for creating subtle effects.

Practical Applications

The neoLottie plugin is ideal for:

    • UI Enhancements: Integrating animated icons or buttons to enhance user interface interactions.
    • Loading Indicators: Displaying custom animations to indicate loading or processing.
    • Storytelling Elements: Adding animated illustrations in educational apps or storytelling interfaces.

By leveraging scalable, vector-based Lottie animations, this plugin enables lightweight, visually rich animations for enhanced user engagement in VisualNEO Web applications​.

neoLottieLoadFile

Purpose:

Load a Lottie animation file in JSON format

Category:

neoLottie

Syntax:

neoLottieLoadFile "objId" theLoop theAutoplay theRenderer theFile

 

objId

Container object

theLoop

Loop animation?

theAutoplay

Autoplay animation?

theRenderer

Render as

theFile

Lottie animation JSON file

 

neoLottieLoadData

Purpose:

Load a Lottie animation from JSON data

Category:

neoLottie

Syntax:

neoLottieLoadData "objId" theLoop theAutoplay theRenderer [theData]

 

objId

Container object

theLoop

Loop animation?

theAutoplay

Autoplay animation?

theRenderer

Render as

theData

Lottie JSON data

 

neoLottieStop

Purpose:

Stop a Lottie animaton

Category:

neoLottie

Syntax:

neoLottieStop "objId"

 

objId

Select a Container object

 

neoLottiePlay

Purpose:

Play a Lottie animation

Category:

neoLottie

Syntax:

neoLottiePlay "objId"

 

objId

Container object

 

neoLottiePlaySegment

Purpose:

Play an animation segment

Category:

neoLottie

Syntax:

neoLottiePlaySegment "objId" firstFrame lastFrame

 

objId

Container object

firstFrame

First frame number

lastFrame

Last frame number

 

neoLottiePause

Purpose:

Pause a Lottie animation

Category:

neoLottie

Syntax:

neoLottiePause "objId"

 

objId

Container object

 

neoLottieSetSpeed

Purpose:

Set animation speed. 1 = normal speed

Category:

neoLottie

Syntax:

neoLottieSetSpeed "objId" theSpeed

 

objId

Container object

theSpeed

Speed (1 = normal speed). Float.

 

neoLottieSetDirection

Purpose:

Set animation direction

Category:

neoLottie

Syntax:

neoLottieSetDirection "objId" theDirection

 

objId

Container object

theDirection

Animation direction

 

neoLottieGoToAndStop

Purpose:

Go to a given frame and stops the animation

Category:

neoLottie

Syntax:

neoLottieGoToAndStop "objId" frameNumber

 

objId

Container object

frameNumber

Frame number

 

neoLottieGoToAndPlay

Purpose:

Go to a given frame and plays the animation

Category:

neoLottie

Syntax:

neoLottieGoToAndPlay "objId" frameNumber

 

objId

Container object

frameNumber

Frame number

 

neoLottieGetFrames

Purpose:

Returns the animation duration in frames

Category:

neoLottie

Syntax:

neoLottieGetFrames "objId" varName

 

objId

Container object

varName

Variable to store result

 

neoLottieDestroy

Purpose:

Destroy animation and release resources. The Container will be emptied

Category:

neoLottie

Syntax:

neoLottieDestroy "objId"

 

objId

Container object

 

neoLottieSetEvent

Purpose:

Create an animation event

Category:

neoLottie

Syntax:

neoLottieSetEvent "objId" eventName callback

 

objId

Container object

eventName

Select event

callback

Callback subroutine

 

neoLottieRemoveEvent

Purpose:

Remove a previously defined event

Category:

neoLottie

Syntax:

neoLottieRemoveEvent "objId" eventName callback

 

objId

Container object

eventName

Select event

callback

Callback subroutine

Created with the Personal Edition of HelpNDoc: Save time and frustration with HelpNDoc's WinHelp HLP to CHM conversion feature