如何实现＆QUOT;加载图片＆QUOT;从谷歌的新材料设计指导模式（不透明度，曝光和饱和度） [英] How to implement "Loading images" pattern (Opacity, Exposure and Saturation) from Google's new Material design guidelines

问题描述

有没有人看着贯彻加载图像从谷歌的最新材料设计导向模式

Has anyone looked into implementing the Loading images pattern from Google's latest Material Design guide.

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

It's a recommended way that "illustrations and photographs may load and transition in three phases at staggered durations". Those being Opacity, Exposure and Saturation:

我目前使用的排球NetworkImageView（实际上是一个从这个派生类）。

I'm currently using the Volley NetworkImageView (actually a derived class from this).

我敢肯定，它必须是了这个问题的答案。我只是不知道应该使用这两个所描述的饱和度和动画曲线哪些类/ code。

I'm sure it's got to be some variant of the answer to this question. I'm just not sure which classes/code to use for both the saturation and animation curves that are described.

推荐答案

感谢@mttmllns！ previous回答。的

由于previous答案显示C＃编写的一个例子，我很好奇，我将它移植到Java。 完成GitHub的例子

Since the previous answer shows an example written in C# and I was curious, I ported it to java. Complete GitHub Example

它概述了3步的过程，其中的不透明度，对比度/亮度和饱和度的组合用于演唱会，以帮助拯救我们可怜的用户的视力。

It outlines a 3-steps process where a combination of opacity, contrast/luminosity and saturation is used in concert to help salvage our poor users eyesight.

有关详细说明，请参阅本文

For a detailed explanation read this article.

见，优秀的答案通过@DavidCrawford提供的。

See, the excellent answer provided by @DavidCrawford.

BTW：我固定链接GitHubProject支持pre-棒棒糖设备。 （由于API等级11）

BTW: I fixed the linked GitHubProject to support pre-Lollipop devices. (Since API Level 11)

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();

这是结果：

And here is the result:

这篇关于如何实现＆QUOT;加载图片＆QUOT;从谷歌的新材料设计指导模式（不透明度，曝光和饱和度）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！