TextView fade in and fade out effect

Often see some applications inside TextView will have fade effect, give a person a bright feeling, such as:

This article briefly describes the implementation of its code.

First of all, this animation can be decomposed into two parts, that is, fade in and fade out, fade in, from the bottom to the center point of movement, the process of movement, the text becomes more clear;

When you fade out, move from the center point to the top, and the text becomes blurred as you move. This involves two properties: Translationy (the distance the control moves vertically), alpha (control opacity)

This chapter uses property animations to achieve its effects.

First, look at the fade out implementation:

Privateobjectanimator Mfadeoutobjectanimator;//as the fade out, is moved upward, the coordinates are negative, here set up to move up to 150 pixelsMfadeoutobjectanimator = Objectanimator.offloat (Mfadeinouttv, "Translationy", 0, 150);//animation execution time set to 500 millisecondsMfadeoutobjectanimator.setduration (500); Mfadeoutobjectanimator.addupdatelistener (NewValueanimator.animatorupdatelistener () {@Override Public voidonanimationupdate (valueanimator animation) {//animation value of the current animation point in time, between 0 and 150                floatValue = (float) Animation.getanimatedvalue (); //because the opacity value is 0-1, divide the value of 150,value/150 from 1 to 0Mfadeinouttv.setalpha (1 + value/150); }}); Mfadeoutobjectanimator.addlistener (NewAnimator.animatorlistener () {@Override Public voidOnanimationstart (Animator animation) {} @Override Public voidonanimationend (Animator animation) {//Modify the value of the TextView after the animation has finished executingMfadeinouttv.settext ("124"); } @Override Public voidOnanimationcancel (Animator animation) {} @Override Public voidonanimationrepeat (Animator animation) {}});

Mfadeoutobjectanimator.start ();

The above code is probably meant to move the TextView up from the center point upward by 150 pixels, while the opacity of TextView from 1 to 0, to achieve the effect of textview fade out. Effects such as:

Let's take a look at the fade-in implementation:

Privateobjectanimator Mfadeinobjectanimator;//Moves from the bottom to the center point because it is fading, moving 150 pixelsMfadeinobjectanimator = Objectanimator.offloat (Mfadeinouttv, "Translationy", 150, 0);//animation execution time set to 500 millisecondsMfadeinobjectanimator.setduration (500);//animation deferred 100 milliseconds executionMfadeinobjectanimator.setstartdelay (100); Mfadeinobjectanimator.addupdatelistener (NewValueanimator.animatorupdatelistener () {@Override Public voidonanimationupdate (valueanimator animation) {//animation value of the current animation point in time                floatValue = (float) Animation.getanimatedvalue (); //The animated values change between 150-0, and alpha changes between 0-1, so alue/150Mfadeinouttv.setalpha (1-value/150); }        });
Mfadeinobjectanimator.start ();

The above code is roughly meant to move the textview from the bottom to the center point in a certain regularity, while the opacity of the TextView from 0 to 1, reaching the TextView fade-in effect. Effects such as:

Well, now fade in, fade out two animations are implemented, as long as the combination of execution can be, the following code:

// Animatorset is a class that allows several animations to be combined to execute together Private  New  animatorset (); // fade in and fade out first Manimatorset.play (Mfadeoutobjectanimator). before (Mfadeinobjectanimator); Manimatorset.start ();

：

Source:

Https://github.com/taothreeyears/TextViewFadeInOut

TextView fade in and fade out effect