使用Glide，我如何像位图一样遍历GifDrawable的每一帧? [英] Using Glide, how can I go over each frame of GifDrawable, as Bitmap?
问题描述
在动态壁纸中，我有一个Canvas实例，希望将GIF/WEBP内容绘制到其中，该实例是通过Glide加载的.
In a live wallpaper, I have a Canvas instance that I wish to draw GIF/WEBP content into, which was loaded via Glide.
我希望使用Glide这样做的原因是，相对于我过去为同一件事找到的解决方案("> 此处 ):
The reason I wish to do it with Glide, is that it provides some advantages over a solution I've found in the past for the same thing (here , repository here) :
- 电影的使用将我限制为GIF.借助Glide，我还可以支持WEBP动画
- 电影的用法似乎效率低下，因为它没有告诉我在两帧之间等待的时间，因此我必须选择希望尝试使用的FPS.在Android P上也已弃用.
- Glide可能能够简化各种缩放比例的处理.
- Glide可能不会像原始代码那样崩溃，并且可能会更好地控制该机制.
问题
Glide似乎已经过优化，只能与普通UI(视图)一起使用.它具有一些基本功能，但是对于我想做的最重要的功能似乎是私有的.
The problem
Glide seems to be optimized to work only with normal UI (Views). It has some basic functions, but the most important ones for what I'm trying to do seems to be private.
我将官方 Glide库 (v 3.8.0)用于GIF加载，以及 GlideWebpDecoder 用于WEBP加载(具有相同版本).
I use official Glide library (v 3.8.0) for GIF loading, and GlideWebpDecoder for WEBP loading (with same version).
加载其中每一个的基本调用如下:
The basic call to load each of those, is as such:
GIF:
GlideApp.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>?) {
//example of usage:
imageView.setImageDrawable(resource)
resource.start()
}
})
WEBP:
GlideApp.with(this).asDrawable()
.load("https://res.cloudinary.com/demo/image/upload/fl_awebp/bored_animation.webp")
// .optionalTransform(WebpDrawable::class.java, WebpDrawableTransformation(CircleCrop()))
.into(object : SimpleTarget<Drawable>() {
override fun onResourceReady(resource: Drawable, transition: Transition<in Drawable>?) {
//example of usage:
imageView.setImageDrawable(resource)
if (resource is Animatable) {
(resource as Animatable).start()
}
}
})
现在，请记住我并没有真正的ImageView，而是只有一个Canvas，可以通过surfaceHolder.lockCanvas()调用获得.
Now, remember I don't really have an ImageView, and instead I only have a Canvas, which I get via surfaceHolder.lockCanvas() call.
resource.callback = object : Drawable.Callback {
override fun invalidateDrawable(who: Drawable) {
Log.d("AppLog", "frame ${resource.frameIndex}/${resource.frameCount}")
}
}
但是，当我尝试获取要用于当前帧的位图时，我找不到正确的功能.
However, when I try to fetch the Bitmap to be used for the current frame, I fail to find the correct function.
例如，我尝试过此操作(这只是一个示例，看它是否可以在画布上使用):
I tried this for example (and this is only an example, to see if it can work with canvas):
val bitmap = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888)
val canvas = Canvas(bitmap)
...
resource.draw(canvas)
但是它似乎没有将内容绘制到位图中，我认为这是因为其draw函数具有以下代码行:
But it doesn't seem to draw the content into the bitmap, and I think it's because its draw function has these lines of code:
@Override
public void draw(@NonNull Canvas canvas) {
if (isRecycled) {
return;
}
if (applyGravity) {
Gravity.apply(GRAVITY, getIntrinsicWidth(), getIntrinsicHeight(), getBounds(), getDestRect());
applyGravity = false;
}
Bitmap currentFrame = state.frameLoader.getCurrentFrame();
canvas.drawBitmap(currentFrame, null, getDestRect(), getPaint());
}
但是getDestRect()返回一个0尺寸的矩形，我找不到如何修改的矩形:它也是私有的，并且看不到有任何改变的矩形.
Yet the getDestRect() returns a 0-sized rectangle, which I can't find how to modify : it's also private, and I don't see anything that changes it.
-
假设我要使用Drawable(GIF/WEBP)，如何获取它可以产生的每个帧(而不仅仅是第一帧)，然后将其绘制到画布中(使用正确的帧间时间，当然)?
Suppose I got the Drawable I wish to use (GIF/WEBP), how can I get each of the frames it can produce (and not just the first frame), and draw it into a canvas (with the right amount of time between frames, of course) ?
我是否还可以像在ImageView上一样设置缩放类型(居中裁剪，适合居中，居中居中...)?
Can I also set the scaling type somehow, just like on ImageView (center-crop, fit-center, center-inside...) ?
也许有更好的替代方法吗?也许假设我有一个GIF/WEBP动画文件，Glide是否允许我只使用其解码器?在
Is there perhaps a better alternative to this? Maybe suppose I have a GIF/WEBP animation file, does Glide allow me to just use its decoder? Something like on this library ?
我找到了一个不错的替代库，该库允许一个接一个地加载GIF， 这里 .似乎逐帧加载效率不高，但是它是开源的，可以轻松修改以更好地工作.
I've found a nice alternative library, that allows to load the GIF one frame after another, here. It doesn't seem as efficient in loading the frame-by-frame, but it's open sourced and can easily be modified to work better.
在Glide上仍然可以做得更好，因为它也支持缩放和WEBP加载.
Still could be much nicer to do it on Glide, as it supports scaling and WEBP loading too.
我已经进行了POC(链接 此处 )表明它确实可以逐帧运行，等待它们之间的正确时间.如果有人成功完成了与我完全相同的操作，但是在Glide(当然是Glide的最新版本)上，我将接受答案并给予悬赏.这是代码:
I've made a POC (link here) that shows that it can indeed go frame-by-frame, waiting for the right time between them. If anyone succeeds doing the exact same as I did, but on Glide (latest version of Glide, of course), I will accept the answer and grant the bounty. Here's the code:
** GifPlayer.kt，基于NsGifPlayer.java **
**GifPlayer.kt , based on NsGifPlayer.java **
open class GifPlayer {
companion object {
const val ENABLE_CACHING = false
const val MEM_CACHE_SIZE_PERCENT = 0.8
fun calculateMemCacheSize(percent: Double): Long {
if (percent < 0.05f || percent > 0.8f) {
throw IllegalArgumentException("setMemCacheSizePercent - percent must be " + "between 0.05 and 0.8 (inclusive)")
}
val maxMem = Runtime.getRuntime().maxMemory()
// Log.d("AppLog", "max mem :$maxMem")
return Math.round(percent * maxMem)
}
}
private val uiHandler = Handler(Looper.getMainLooper())
private var playerHandlerThread: HandlerThread? = null
private var playerHandler: Handler? = null
private val gifDecoder: GifDecoder = GifDecoder()
private var currentFrame: Int = -1
var listener: GifListener? = null
var state: State = State.IDLE
private set
private val playRunnable: Runnable
private val frames = HashMap<Int, AnimationFrame>()
private var currentUsedMemByCache = 0L
class AnimationFrame(val bitmap: Bitmap, val duration: Long)
enum class State {
IDLE, PAUSED, PLAYING, RECYCLED, ERROR
}
interface GifListener {
fun onGotFrame(bitmap: Bitmap, frame: Int, frameCount: Int)
fun onError()
}
init {
val memCacheSize = if (ENABLE_CACHING) calculateMemCacheSize(MEM_CACHE_SIZE_PERCENT) else 0L
// Log.d("AppLog", "memCacheSize:$memCacheSize = ${memCacheSize / 1024L} MB")
playRunnable = object : Runnable {
override fun run() {
val frameCount = gifDecoder.frameCount
gifDecoder.setCurIndex(currentFrame)
currentFrame = (currentFrame + 1) % frameCount
val animationFrame = if (ENABLE_CACHING) frames[currentFrame] else null
if (animationFrame != null) {
// Log.d("AppLog", "cache hit - $currentFrame")
val bitmap = animationFrame.bitmap
val delay = animationFrame.duration
uiHandler.post {
listener?.onGotFrame(bitmap, currentFrame, frameCount)
if (state == State.PLAYING)
playerHandler!!.postDelayed(this, delay)
}
} else {
// Log.d("AppLog", "cache miss - $currentFrame fill:${frames.size}/$frameCount")
val bitmap = gifDecoder.bitmap
val delay = gifDecoder.decodeNextFrame().toLong()
if (ENABLE_CACHING) {
val bitmapSize = BitmapCompat.getAllocationByteCount(bitmap)
if (bitmapSize + currentUsedMemByCache < memCacheSize) {
val cacheBitmap = Bitmap.createBitmap(bitmap)
frames[currentFrame] = AnimationFrame(cacheBitmap, delay)
currentUsedMemByCache += bitmapSize
}
}
uiHandler.post {
listener?.onGotFrame(bitmap, currentFrame, frameCount)
if (state == State.PLAYING)
playerHandler!!.postDelayed(this, delay)
}
}
}
}
}
@Suppress("unused")
protected fun finalize() {
stop()
}
@UiThread
fun start(filePath: String): Boolean {
if (state != State.IDLE && state != State.ERROR)
return false
currentFrame = -1
state = State.PLAYING
playerHandlerThread = HandlerThread("GifPlayer")
playerHandlerThread!!.start()
val looper = playerHandlerThread!!.looper
playerHandler = Handler(looper)
playerHandler!!.post {
try {
gifDecoder.load(filePath)
} catch (e: Exception) {
uiHandler.post {
state = State.ERROR
listener?.onError()
}
return@post
}
val bitmap = gifDecoder.bitmap
if (bitmap != null) {
playRunnable.run()
} else {
frames.clear()
gifDecoder.recycle()
uiHandler.post {
state = State.ERROR
listener?.onError()
}
return@post
}
}
return true
}
@UiThread
fun stop(): Boolean {
if (state == State.IDLE)
return false
state = State.IDLE
playerHandler!!.removeCallbacks(playRunnable)
playerHandlerThread!!.quit()
playerHandlerThread = null
playerHandler = null
return true
}
@UiThread
fun pause(): Boolean {
if (state != State.PLAYING)
return false
state = State.PAUSED
playerHandler?.removeCallbacks(playRunnable)
return true
}
@UiThread
fun resume(): Boolean {
if (state != State.PAUSED)
return false
state = State.PLAYING
playerHandler?.removeCallbacks(playRunnable)
playRunnable.run()
return true
}
@UiThread
fun toggle(): Boolean {
when (state) {
State.PLAYING -> pause()
State.PAUSED -> resume()
else -> return false
}
return true
}
}
MainActivity.kt
class MainActivity : AppCompatActivity() {
private lateinit var player: GifPlayer
@SuppressLint("StaticFieldLeak")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val file = File(this@MainActivity.filesDir, "file.gif")
object : AsyncTask<Void, Void, Void?>() {
override fun doInBackground(vararg params: Void?): Void? {
val inputStream = resources.openRawResource(R.raw.fast)
if (!file.exists()) {
file.parentFile.mkdirs()
val outputStream = FileOutputStream(file)
val buf = ByteArray(1024)
var len: Int
while (true) {
len = inputStream.read(buf)
if (len <= 0)
break
outputStream.write(buf, 0, len)
}
inputStream.close()
outputStream.close()
}
return null
}
override fun onPostExecute(result: Void?) {
super.onPostExecute(result)
player.setFilePath(file.absolutePath)
player.start()
}
}.execute()
player = GifPlayer(object : GifPlayer.GifListener {
override fun onGotFrame(bitmap: Bitmap, frame: Int, frameCount: Int) {
Log.d("AppLog", "onGotFrame $frame/$frameCount")
imageView.post {
imageView.setImageBitmap(bitmap)
}
}
override fun onError() {
Log.d("AppLog", "onError")
}
})
}
override fun onStart() {
super.onStart()
player.resume()
}
override fun onStop() {
super.onStop()
player.pause()
}
override fun onDestroy() {
super.onDestroy()
player.stop()
}
}
推荐答案
当在Glide中加载gif时要显示预览而不是动画时，我有类似的要求.
I had a similar requirement when I wanted to display a preview instead of the animation while loading a gif in Glide.
My solution was to take the first frame from the GifDrawable and to present this as the entire drawable. The same approach can be adapted to get the other frames to display (or to export etc.)
DrawableRequestBuilder builder = Glide.with(ctx).load(someUrl);
builder.listener(new RequestListener<String, GlideDrawable>() {
@Override
public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
return false;
}
@Override
public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
if (resource.isAnimated()) {
target.onResourceReady(new GlideBitmapDrawable(null, ((GifDrawable) resource).getFirstFrame()), null);
}
return handled;
}
});
builder.into(mImageView);
您可以通过直接访问GifDrawable附带的decoder来进行动画处理以获取关键帧，也可以在回调中通过索引获取关键帧.准备好后，也可以在可绘制对象上设置Callback(实际类名).它会被onFrameReady调用(每次都会在可绘制对象中为您提供当前帧). gif drawable类已经在管理位图池.
You can either progress the animation to get the keyframes or get them by index within the callback by directly accessing the decoder attached to GifDrawable. Alternatively set a Callback (actual class name) on the drawable when it is ready. It will be called by onFrameReady (Giving you the current frame in the drawable each time). The gif drawable class already manages the bitmap pool.
GifDrawable准备就绪后，请使用以下方法遍历框架:
GifDrawable gd = (GifDrawable) resource;
Bitmap b = gd.getDecoder().getNextFrame();
请注意，如果您使用的是解码器，则应该从上面提到的onResourceReady回调中真正执行此操作.尝试进行此操作时，我遇到了间歇性问题.
Note that if you are using the decoder you should really do it from the onResourceReady callback I mentioned above. I had intermittent issues when I tried to do it earlier.
如果让解码器自动运行，则可以获取帧的回调
gifDrawable.setCallback(new Drawable.Callback() {
@Override
public void invalidateDrawable(@NonNull Drawable who) {
//NOTE: this method is called each time the GifDrawable updates itself with a new frame
//who.draw(canvas); //if you already have a canvas
//https://stackoverflow.com/questions/3035692/how-to-convert-a-drawable-to-a-bitmap //if you really want a bitmap
}
@Override public void scheduleDrawable(@NonNull Drawable who, @NonNull Runnable what, long when) { /* ignore */ }
@Override public void unscheduleDrawable(@NonNull Drawable who, @NonNull Runnable what) { /* ignore */ }
});
当时，这是目前最好的方法.一年多来，我不能保证现在没有更有效的方法.
At the time this was the best approach available. As it has been over a year, I cannot guarantee there is not a more efficient way to do this now.
我使用的库版本是Glide 3.7.0.在最新的版本4.7.+中，访问受到限制，但是我不确定您需要多久才能使用我的方法.
The version of the library I use is Glide 3.7.0. Access is restricted in the latest version 4.7.+, but I'm not sure how far back you need to go to use my approach.
这篇关于使用Glide，我如何像位图一样遍历GifDrawable的每一帧?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
