SushiAnimation

A composable component for displaying animations in the Sushi design system. Supports Lottie animations from various sources with customizable playback behavior.

SushiAnimation provides a convenient way to integrate Lottie animations into your application, with support for animations from different sources:

• Assets directory
• File system
• JSON strings
• Android resources
• URLs
• Pre-loaded Lottie compositions

Example

The SushiAnimation component is used to display Lottie animations with various configurations.

// Auto-play animation from asset file
val autoPlayProps by rememberSushiAnimationProps(
    source = LottieAssetSource("animation.json"),
    playback = SushiAnimationPlayback.AutoPlay(
        isPlaying = true,
        restartOnPlay = true,
        reverseOnRepeat = false,
        speed = 1f,
        iterations = -1  // Infinite loop
    )
)

SushiAnimation(
    props = autoPlayProps,
    modifier = Modifier
        .width(200.dp)
        .height(200.dp)
)

// Manual control of animation progress
val composition = rememberLottieComposition(LottieCompositionSpec.Asset("animation.json"))
var progress by remember { mutableStateOf(0f) }

val manualControlProps by rememberSushiAnimationProps(
    source = LottieCompositionSource(composition.value),
    playback = SushiAnimationPlayback.Progress { progress }
)

SushiAnimation(props = manualControlProps)

// Update progress with a slider
Slider(
    value = progress,
    onValueChange = { progress = it },
    valueRange = 0f..1f
)

Component API

SushiAnimation

Parameter	Description
source	The animation source to be displayed
playback	The playback configuration controlling how the animation plays
width	Optional explicit width for the animation
height	Optional explicit height for the animation
aspectRatio	Optional aspect ratio to maintain (width:height)
bgColor	Background color for the animation container

Animation Sources

The component supports various sources for Lottie animations:

Source Type	Description
LottieAssetSource	Animation from the app's assets directory
LottieFileSource	Animation from a file in the file system
LottieJsonSource	Animation from a JSON string
LottieResourceIdSource	Animation from an Android resource
LottieUrlSource	Animation loaded from a URL
LottieCompositionSource	Pre-loaded Lottie composition

Animation Playback

Controls how the animation plays:

Playback Type	Description
AutoPlay	Automatically plays the animation with options for looping, speed, etc.
Progress	Manually control animation progress with a value provider function