Android Glitter Font effect

Facebook Open source has a load effect tool shimmer, can achieve the glittering effect of the font, the effect of such as the following

The link address is https://github.com/facebook/Shimmer here, just for iOS development. Looked under did not understand (have not made object-c, embarrassed ZR), so conveniently searched shimmer Android, actually someone did, here https://github.com/RomainPiel/ Shimmer-android, here is

The core of the implementation is the use of linear gradient lineargradient, and then paint the gradual shift of the gradient to achieve a flashing effect, the control of the translation of the use of property animation. Think about this part can also control themselves, the following to do a simple transformation:

public class Mytextview extends TextView {private lineargradient mlineargradient;private Matrix mgradientmatrix;private Paint mpaint;private int mviewwidth = 0;private int mtranslate = 0;private Boolean manimating = True;public Mytextview (Con Text context, AttributeSet attrs) {Super (context, attrs);} @Overrideprotected void onsizechanged (int w, int h, int oldw, int oldh) {super.onsizechanged (W, H, OLDW, OLDH); if (MVIEWWI DTH = = 0) {mviewwidth = Getmeasuredwidth (); if (Mviewwidth > 0) {mpaint = Getpaint (); mlineargradient = new Lineargradien T (-mviewwidth, 0, 0, 0,new int[] {0x33ffffff, 0xFFFFFFFF, 0x33ffffff},new float[] {0, 0.5f, 1}, Shader.TileMode.CLAMP) ; Mpaint.setshader (mlineargradient); Mgradientmatrix = new Matrix ();}}} @Overrideprotected void OnDraw (canvas canvas) {super.ondraw (canvas); if (manimating && Mgradientmatrix! = null) { Mtranslate + = Mviewwidth/10;if (Mtranslate > 2 * mviewwidth) {mtranslate =-mviewwidth;} Mgradientmatrix.settranslate (mtranslate, 0); MlineargRadient.setlocalmatrix (Mgradientmatrix);p ostinvalidatedelayed (50);}} 

Inherit a textview, because the gradient of the translation needs the width of the view, so in the onsizechanged to the various elements required to initialize. In LinearGradient, the color and color change position of the gradient is defined, and then the paint used by the paint is set.

The OnDraw () method controls the calculation of the offset, where each frame is plotted in 1/10,postinvalidatedelay () each time it is moved, which is the speed at which the flashing is controlled. Effects such as the following

The comments suggest the effects from the middle to the sides

From the middle to the sides need a symmetrical transformation, here is the middle of the spot gradually expanded to cover the entire text. or use the lineargradient. It's just that the motion changes from panning to zooming. The first thought was that two spots were moving from the middle to the left. But a paint is used when drawing. In the paint to set the corresponding shader, with such a way to achieve symmetry on both sides of the transformation, try not to achieve good results. There is no better way to think of the temporary. Welcome to the various suggestions.

Code for the following changes

public class Mytextview extends TextView {private lineargradient mlineargradient;private Matrix mgradientmatrix;private Paint mpaint;private int mviewwidth = 0;private float Mscale = 0.1f;private Boolean manimating = True;public Mytextview (Co ntext context, AttributeSet attrs) {Super (context, attrs);} @Overrideprotected void onsizechanged (int w, int h, int oldw, int oldh) {super.onsizechanged (W, H, OLDW, OLDH); if (MVIEWWI DTH = = 0) {mviewwidth = Getmeasuredwidth (); if (Mviewwidth > 0) {mpaint = Getpaint (); mlineargradient = new Lineargradien T (0, 0, mviewwidth, 0,new int[] {0x33ffffff, 0xFFFFFFFF, 0x33ffffff},new float[] {0.0f, 0.5f, 1.0f}, shader.tilemode.c LAMP); Mpaint.setshader (mlineargradient); Mgradientmatrix = new Matrix ();}}} @Overrideprotected void OnDraw (canvas canvas) {super.ondraw (canvas); if (manimating && Mgradientmatrix! = null) { Mscale + = 0.1f;if (Mscale > 1.2f) {mscale = 0.1f;} Mgradientmatrix.setscale (Mscale, Mscale, MVIEWWIDTH/2, 0); Mlineargradient.setlocalmaTrix (Mgradientmatrix);p ostinvalidatedelayed (100);}} 

Demo Sample Download: http://download.csdn.net/detail/xu_fu/7254849

2015.03.10 Update:

Facebook has also achieved shimmer effects on Android. Can be targeted for all the view. Address: Http://facebook.github.io/shimmer-android/

Android Glitter Font effect