Lottie animations

Use day-piece-lottie for animated illustrations, loading sequences, and motion graphics exported as Lottie JSON. It plays a bundled animation in a Day layout and provides a separate model API for inspecting animation metadata without opening a player.

Add to your app

Add day-piece-lottie to your app’s Cargo dependencies:

[dependencies]
day-piece-lottie = "0.4.4"

Crate · API reference · Source. Build with the Day CLI, which selects the toolkit integration and stages the native player dependencies and web player assets.

Place an animation at resource/assets/hello.json. The generated res::assets::hello_json constant identifies that file; do not maintain a second literal path in UI code. This component belongs in an app with generated resources:

use day::prelude::*;
use day_piece_lottie::lottie;

pub fn animation_panel() -> impl Piece {
    let speed = Signal::new(1.0);
    let animation = res::assets::hello_json.as_str().to_owned();
    lottie(animation).speed(speed).frame(220.0, 220.0)
}

lottie() accepts a name, a string signal, or a closure. The generated asset name includes the .json extension, which the player accepts. Give the piece an explicit size or a container that sizes it.

Playback behavior

Looping and autoplay are construction-time options. This release has no public seek command, completion callback, or separate play/pause trigger. Removing the piece removes its player. A web-backed player also has page-loading latency before its first animation frame.

Platform support

Reactive animation and speed updates in the web player depend on JavaScript evaluation support. A target without evaluation uses the initial values until the piece is rebuilt. Check the actual web-view capability and installed engine rather than assuming every desktop integration behaves identically.

On UIKit, avoid sending speed changes more often than a display frame. Check the intended animation on each player: Lottie exporters and players support different effects, fonts, and image arrangements. Honor the app’s reduced-motion policy; a static illustration or a construction-time paused alternative can be more appropriate.

Inspect an animation

The LottieModel API parses a JSON document without creating a player. This helper accepts caller-provided text:

use day_piece_lottie::{LottieError, LottieModel};

pub fn animation_duration(json: &str) -> Result<f64, LottieError> {
    let model = LottieModel::parse(json)?;
    Ok(model.duration_secs())
}

verify() reports selected document problems. An empty issue list does not establish complete player compatibility. For a bundled document, open it through its generated asset constant and day::resource.

Examples

Add an animation playground to an app without copying the example JSON files. day-piece-lottie-gallery bundles the Lottie demo’s pages, animations, and translations.

Add the example library

[dependencies]
day-piece-lottie-gallery = "0.1"

Crate · API reference · Source. The Day CLI stages the library’s animation assets and selects the underlying player’s toolkit features.

Show the playground

use day::prelude::*;
use day_piece_lottie_gallery::{LottiePage, gallery};

pub fn animation_examples() -> impl Piece {
    gallery(Signal::new(LottiePage::PinJump))
}

gallery() shows a picker and the selected page. Use pages() for a list of Entry values when building your own sidebar, or page() to mount a specific LottiePage. Titles and descriptions come from the library’s catalogs and follow the app locale.

The animations belong to the library’s resource bundle. Your app does not need to reconstruct their internal paths or declare copies under its own assets. If extracting or redistributing sample artwork independently, preserve the upstream licenses and attribution recorded with the animation sources.

Platform behavior

The pages use the same native iOS/Android players and web-view player on other toolkits. Web-engine availability, playback latency, and reactive-update limits are the same as for the underlying piece. The gallery is a set of sample pages, not a general animation editor.

Try the browser demo, or see Chart examples for another embeddable example library.

Related documentation

• Animation animates values in ordinary Day controls.
• Web views describes the web-engine requirements for desktop playback.