如何实现 Google 新材料设计指南中的“加载图像”模式（不透明度、曝光度和饱和度）

有没有人研究过实施加载图像 https://material.io/archive/guidelines/patterns/loading-images.html来自谷歌最新的材料设计指南的模式。

这是一种推荐的方式，“插图和照片可以在交错的持续时间内分三个阶段加载和过渡”。不透明度、曝光度和饱和度：

我目前正在使用 Volley NetworkImageView （实际上是它的派生类）。

我确信它一定是某种变体这个问题的答案 https://stackoverflow.com/a/16936581/822164。我只是不确定使用哪些类/代码来描述饱和度和动画曲线。

感谢@mttmllns！以前的答案。

由于前面的答案显示了用 C# 编写的示例，并且我很好奇，因此我将其移植到 java。完整的 GitHub 示例 https://github.com/rnrneverdies/ImageLoadingPattern

它概述了一个三步过程，其中结合使用不透明度、对比度/亮度和饱和度来帮助挽救我们较差的用户视力。

有关详细说明，请阅读本文 http://blog.neteril.org/blog/2014/11/23/android-material-image-loading/.

EDIT:

瞧，优秀的answer https://stackoverflow.com/a/27301389/2573335由@DavidCrawford 提供。

顺便说一句：我修复了链接的 GitHubProject 以支持 Lollipop 之前的设备。 （自 API 级别 11 起）

The Code

AlphaSatColorMatrixEvaluator.java

import android.animation.TypeEvaluator;
import android.graphics.ColorMatrix;

public class AlphaSatColorMatrixEvaluator implements TypeEvaluator {
    private ColorMatrix colorMatrix;
    float[] elements = new float[20];

    public AlphaSatColorMatrixEvaluator() {
        colorMatrix = new ColorMatrix ();
    }

    public ColorMatrix getColorMatrix() {
        return colorMatrix;
    }

    @Override
    public Object evaluate(float fraction, Object startValue, Object endValue) {
        // There are 3 phases so we multiply fraction by that amount
        float phase = fraction * 3;

        // Compute the alpha change over period [0, 2]
        float alpha = Math.min(phase, 2f) / 2f;
        // elements [19] = (float)Math.round(alpha * 255);
        elements [18] = alpha;

        // We substract to make the picture look darker, it will automatically clamp
        // This is spread over period [0, 2.5]
        final int MaxBlacker = 100;
        float blackening = (float)Math.round((1 - Math.min(phase, 2.5f) / 2.5f) * MaxBlacker);
        elements [4] = elements [9] = elements [14] = -blackening;

        // Finally we desaturate over [0, 3], taken from ColorMatrix.SetSaturation
        float invSat = 1 - Math.max(0.2f, fraction);
        float R = 0.213f * invSat;
        float G = 0.715f * invSat;
        float B = 0.072f * invSat;

        elements[0] = R + fraction; elements[1] = G;            elements[2] = B;
        elements[5] = R;            elements[6] = G + fraction; elements[7] = B;
        elements[10] = R;           elements[11] = G;           elements[12] = B + fraction;

        colorMatrix.set(elements);
        return colorMatrix;
    }
}

设置方法如下：

ImageView imageView = (ImageView)findViewById(R.id.imageView);
final BitmapDrawable drawable = (BitmapDrawable) getResources().getDrawable(R.drawable.image);
imageView.setImageDrawable(drawable);
AlphaSatColorMatrixEvaluator evaluator = new AlphaSatColorMatrixEvaluator ();
final ColorMatrixColorFilter filter = new ColorMatrixColorFilter(evaluator.getColorMatrix());
drawable.setColorFilter(filter);

ObjectAnimator animator = ObjectAnimator.ofObject(filter, "colorMatrix", evaluator, evaluator.getColorMatrix());

animator.addUpdateListener( new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        drawable.setColorFilter (filter);
    }
});
animator.setDuration(1500);
animator.start();

这是结果：