How to implement “Loading images” pattern (Opacity, Exposure and Saturation) from Google's new Material design guidelines

Question

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

Answer 1

Following up on rnrneverdies's excellent answer, I'd like to offer a small fix to this animation logic.

My problem with this implementation is when it comes to png images with transparency (for example, circular images, or custom shapes). For these images, the colour filter will draw the transparency of the image as black, rather than just leaving them transparent.

The problem is with this line:

elements [19] = (float)Math.round(alpha * 255);

What's happening here is that the colour matrix is telling the bitmap that the alpha value of each pixels is equal to the current phase of the alpha. This is obviously not perfect, since pixels which were already transparent will lose their transparency and appear as black.

To fix this, instead of applying the alpha of the "additive" alpha field in the colour matrix, apply it on the "multiplicative" field:

Rm | 0  | 0  | 0  | Ra
0  | Gm | 0  | 0  | Ga
0  | 0  | Bm | 0  | Ba
0  | 0  | 0  | Am | Aa

Xm = multiplicative field
Xa = additive field

So instead of applying the alpha value on the "Aa" field (elements[19]), apply it on the "Am" field (elements[18]), and use the 0-1 value rather than the 0-255 value:

//elements [19] = (float)Math.round(alpha * 255);
elements [18] = alpha;

Now the transition will multiply the original alpha value of the bitmap with the alpha phase of the animation and not force an alpha value when there shouldn't be one.

Hope this helps