如何使用 Glide 避免图像闪烁

Question

我正在我的应用程序上进行类似 youtube/netflix 的预览。

为此，我得到了sprite of thumbnail（一张大图，由许多对应于时间范围的小图组成）。使用Glide 和Custom Transformation，我设法隔离了这些时间范围并将它们显示在我的progressbar 上方的框架中。

即使我在第一次显示拇指时预先加载并创建了拇指，图像之间的过渡也会使它们闪烁。

我创建了一个 imgur 来向您展示行为：Example in video

我一直在看stackoverflow，发现this post和Glide issues发现是由于：

闪烁是由于您将图像连续快速加载到同一视图中引起的。

我不知道如何改进当前的行为，所有的拇指都是在 exoplayer 开始播放之前创建的，而 Glide 只需要显示它们。

这是我的代码：

自定义转换：

private const val MAX_LINES = 7
private const val MAX_COLUMNS = 7
private const val THUMBNAILS_EACH = 5000 // milliseconds

class GlideThumbnailTransformationFull(position: Long) : BitmapTransformation() {

    private val x: Int
    private val y: Int

    init {
        val square = position.toInt() / THUMBNAILS_EACH
        y = square / MAX_COLUMNS
        x = square % MAX_COLUMNS
    }

    override fun transform(pool: BitmapPool, toTransform: Bitmap, outWidth: Int, outHeight: Int): Bitmap {
        val width = toTransform.width / MAX_COLUMNS
        val height = toTransform.height / MAX_LINES

        return Bitmap.createBitmap(toTransform, x * width, y * height, width, height)
    }

    override fun updateDiskCacheKey(messageDigest: MessageDigest) {
        val data: ByteArray = ByteBuffer.allocate(8).putInt(x).putInt(y).array()
        messageDigest.update(data)
    }

    override fun hashCode(): Int {
        return (x.toString() + y.toString()).hashCode()
    }

    override fun equals(other: Any?): Boolean {
        if (other !is GlideThumbnailTransformationFull) {
            return false
        }
        return other.x == x && other.y == y
    }
}

加载我使用的图片

GlideApp.with(imageView)
            .load(thumbnailsUrl)
            .dontAnimate()
            .skipMemoryCache(false)
            .override(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL)
            .transform(GlideThumbnailTransformationFull(currentPosition))
            .into(imageView)

Answer 1

https://futurestud.io/tutorials/glide-caching-basics 看看这个。这给出了一个关于缓存和滑翔中其他东西的详细想法

Glide.with(imageView)
    .load(url)
    .transition(withCrossFade(factory))
    .apply(RequestOptions().placeholder(placeholder))
    .apply(RequestOptions.diskCacheStrategyOf(DiskCacheStrategy.ALL))
    .into(imageView)