question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support for animated gif images.

See original GitHub issue

Trying to display the following animated gif image displays only the first frame because it supports only the Bitmap.

Image(
     bitmap = imageFromResource("lottie-sample.gif"),
     modifier = Modifier.align(Alignment.BottomCenter).preferredSize(100.dp,100.dp)
)

lottie-sample

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:4
  • Comments:26 (10 by maintainers)

github_iconTop GitHub Comments

5reactions
Dominaezzzcommented, Jun 20, 2021

Slightly shorter.

import androidx.compose.animation.core.*
import androidx.compose.desktop.Window
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.unit.dp
import org.jetbrains.skija.*
import java.net.URL

fun main() = Window {
    val codec = remember {
        val bytes = URL(
            "https://raw.githubusercontent.com/JetBrains/skija/ccf303ebcf926e5ef000fc42d1a6b5b7f1e0b2b5/examples/scenes/images/codecs/animated.gif"
        ).readBytes()
        Codec.makeFromData(Data.makeFromBytes(bytes))
    }
    GifAnimation(codec, Modifier.size(100.dp))
}

@Composable
fun GifAnimation(codec: Codec, modifier: Modifier) {
    val transition = rememberInfiniteTransition()
    val frameIndex by transition.animateValue(
        initialValue = 0,
        targetValue = codec.frameCount - 1,
        Int.VectorConverter,
        animationSpec = infiniteRepeatable(
            animation = keyframes {
                durationMillis = 0
                for ((index, frame) in codec.framesInfo.withIndex()) {
                    index at durationMillis
                    durationMillis += frame.duration
                }
            }
        )
    )

    val bitmap = remember { Bitmap().apply { allocPixels(codec.imageInfo) } }
    Canvas(modifier) {
        codec.readPixels(bitmap, frameIndex)
        drawImage(bitmap.asImageBitmap())
    }
}
5reactions
Dominaezzzcommented, Dec 1, 2020

This is a sample of naive GIF rendering with compose.

https://gist.github.com/Dominaezzz/cd51f8821162a149ee2a5fb69a702e7f

(Can PR a sample if maintainers are interested)

Read more comments on GitHub >

github_iconTop Results From Across the Web

Support GIFs - Get the best GIF on GIPHY
Explore and share the best Support GIFs and most popular animated GIFs here on GIPHY. Find Funny GIFs, Cute GIFs, Reaction GIFs and...
Read more >
Animated GIFs in Email: Examples & How To's [Guide]
An email marketers guide to animated GIFs in email! Learn about the benefits, examples, how to create them, and email client support.
Read more >
GIF Support and GIF Fallbacks in Outlook Emails
In addition, animated GIF images are already supported in Outlook's mobile apps and their webmail client, Outlook.com.
Read more >
What alternatives to animated GIF are there? APNG, WebP ...
There are multiple competing animated image formats, and also some debate on ... It works similarly to GIF, supporting 24-bit images (allowing to...
Read more >
Animated GIF support
Animated GIF support ¶. Pillow, Wagtail's default image library, doesn't support animated GIFs. To get animated GIF support, you will have to install...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found