LottieAnimation QML Type

The following example shows a simple usage of the LottieAnimation type

LottieAnimation {
    loops: 2
    quality: LottieAnimation.MediumQuality
    source: "animation.json"
    autoPlay: false
    onStatusChanged: {
        if (status === LottieAnimation.Ready) {
            // any acvities needed before
            // playing starts go here
            gotoAndPlay(startFrame);
        }
    }
    onFinished: {
        console.log("Finished playing")
    }
}

Internally, the rendered frame data is cached to improve performance. You can control the memory usage by setting the QLOTTIE_RENDER_CACHE_SIZE environment variable (default value is 2).

You can monitor the rendering performance by turning on two logging categories:

• qt.lottieqt.bodymovin.render - Provides information how the animation is rendered

• qt.lottieqt.bodymovin.render.thread - Provides information how the rendering process proceeds.

Specifically, you can monitor does the frame cache gets constantly full, or does the rendering process have to wait for frames to become ready. The first case implies that the animation is too complex, and the rendering cannot keep up the pace. Try making the animation simpler, or optimize the QML scene.

Defines whether the player will start playing animation automatically after the animation file has been loaded.

The default value is true.

This property holds the direction of rendering.

Frame number of the end of the animation. The value is available after the animation has been loaded and ready to play.

This property holds the frame rate value of the Bodymovin animation.

frameRate changes after the asset has been loaded. Changing the frame rate does not have effect before that, as the value defined in the asset overrides the value. To change the frame rate, you can write:

LottieAnimation {
    source: "animation.json"
    onStatusChanged: {
        if (status === LottieAnimation.Ready)
            frameRate = 60;
    }

This property holds the number of loops the player will repeat. The value LottieAnimation.Infinite means that the the player repeats the animation continuously.

The default value is 1.

Speficies the rendering quality of the bodymovin player. If LowQuality is selected the rendering will happen into a frame buffer object, whereas with other options, the rendering will be done onto QImage (which in turn will be rendered on the screen).

The source of the Bodymovin asset that LottieAnimation plays.

LottieAnimation can handle any URL scheme supported by Qt. The URL may be absolute, or relative to the URL of the component.

Setting the source property starts loading the animation asynchronously. To monitor progress of loading, connect to the status change signal.

Frame number of the start of the animation. The value is available after the animation has been loaded and ready to play.

This property holds the current status of the LottieAnimation element.

For example, you could implement onStatusChanged signal handler to monitor progress of loading an animation as follows:

LottieAnimation {
    source: "animation.json"
    autoPlay: false
    onStatusChanged: {
        if (status === LottieAnimation.Ready)
            start();
    }

This signal is emitted when the player has finished playing. In case of looping, the signal is emitted when the last loop has been finished.

Returns the duration of the currently playing asset.

If a given inFrames is true, the return value is the duration in number of frames. Otherwise, returns the duration in seconds.

Plays the asset from the given frame.

Plays the asset from the frame that has a marker with the given frameMarker. Returns true if the frameMarker was found, false otherwise.

Moves the playhead to the given frame and stops.

Moves the playhead to the given marker and stops. Returns true if frameMarker was found, false otherwise.

Pauses the playback.

Starts or continues playing from the current position.

Starts playing the animation from the beginning.

Stops the playback and returns to startFrame.

Toggles the status of player between playing and paused states.