Glide: How to load GIF animation as GIFDrawable ?

Created on 24 Aug 2018  路  6Comments  路  Source: bumptech/glide

I'm trying to load GIF animation, and when it's ready, I want to use the GIFDrawable to be viewed, either via an ImageView or even manually using a customized view.

I tried this:

    Glide.with(this).asGif()
            .load("https://res.cloudinary.com/demo/image/upload/bored_animation.gif")
            .into(object : SimpleTarget<GifDrawable>() {
                override fun onResourceReady(resource: GifDrawable, transition: Transition<in GifDrawable>?) {
                    imageView.setImageDrawable(resource)
                }
            })

and I tried this:

    Glide.with(this)
            .load("https://res.cloudinary.com/demo/image/upload/bored_animation.gif")
            .into(object : SimpleTarget<Drawable>() {
                override fun onResourceReady(resource: Drawable, transition: Transition<in Drawable>?) {
                    imageView.setImageDrawable(resource)
                }
            })

But all this does is to show the first frame of the GIF animation.

How come?
I've also tried to do the same with a library that adds WEBP support to Glide (here) , but got the same issue.

Can you please tell what's wrong?

Attached sample project.
AnimatedWebPTest.zip

question stale

Most helpful comment

@sjudd I see, so it's as such:

    GlideApp.with(this).asGif()
            .load("https://res.cloudinary.com/demo/image/upload/bored_animation.gif")
            .into(object : ImageViewTarget<GifDrawable>(imageView) {
                override fun setResource(resource: GifDrawable?) {
                    imageView.setImageDrawable(resource)
                }

Or:

    GlideApp.with(this).asGif()
            .load("https://res.cloudinary.com/demo/image/upload/bored_animation.gif")
            .into(object : CustomViewTarget<ImageView, GifDrawable>(imageView) {
                ...
                override fun onResourceReady(resource: GifDrawable, transition: Transition<in GifDrawable>?) {
                    imageView.setImageDrawable(resource)
                    resource.start()
                }
            })

But when I try to implement Target, it wants a lot of things, and it has to implement getRequest too, which returns Request .

Is there a way perhaps to just load a given GIF file (that I provide) , and that it will return me an object that I can get bitmaps out of it, one frame after another, using a background thread? This could be the best for showing into some generic Canvas.

All 6 comments

In general, avoid SimpleTarget if you can (it's now deprecated).

For your particular use case, you need to start the animated drawable. Only ImageViewTarget subclasses do so by default in Glide: https://github.com/bumptech/glide/blob/33d698d0dedfbd287d66642ada44b182b28294f4/library/src/main/java/com/bumptech/glide/request/target/ImageViewTarget.java#L112

So what should I use instead of SimpleTarget ? ImageViewTarget ?

Also, what if my target isn't an ImageView, as I wrote? I want to be able to view the frames of the GIF, one Bitmap after another, on a canvas, and each time there is a new frame that's ready, I get it and show it.

If you're loading into a View CustomViewTarget, if not, implement Target.

@sjudd I see, so it's as such:

    GlideApp.with(this).asGif()
            .load("https://res.cloudinary.com/demo/image/upload/bored_animation.gif")
            .into(object : ImageViewTarget<GifDrawable>(imageView) {
                override fun setResource(resource: GifDrawable?) {
                    imageView.setImageDrawable(resource)
                }

Or:

    GlideApp.with(this).asGif()
            .load("https://res.cloudinary.com/demo/image/upload/bored_animation.gif")
            .into(object : CustomViewTarget<ImageView, GifDrawable>(imageView) {
                ...
                override fun onResourceReady(resource: GifDrawable, transition: Transition<in GifDrawable>?) {
                    imageView.setImageDrawable(resource)
                    resource.start()
                }
            })

But when I try to implement Target, it wants a lot of things, and it has to implement getRequest too, which returns Request .

Is there a way perhaps to just load a given GIF file (that I provide) , and that it will return me an object that I can get bitmaps out of it, one frame after another, using a background thread? This could be the best for showing into some generic Canvas.

This issue has been automatically marked as stale because it has not had activity in the last seven days. It will be closed if no further activity occurs within the next seven days. Thank you for your contributions.

I did this with the following code.

Glide.with(context)
.load(_IMAGE_URL_)
.diskCacheStrategy(DiskCacheStrategy.DATA)
.thumbnail(Glide.with(context).load(_GIF_IMAGE_).centerCrop())
.transition(DrawableTransitionOptions.withCrossFade(300))
.override(300, 500)
.centerCrop()
.into(view_holder.imageview);

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Morteza-Rastgoo picture Morteza-Rastgoo  路  3Comments

technoir42 picture technoir42  路  3Comments

Tryking picture Tryking  路  3Comments

kenneth2008 picture kenneth2008  路  3Comments

StefMa picture StefMa  路  3Comments