Android Development Imitation Guest gift effect _android

Here to write a link to the content of a small gift to give special effects, by the way to review the properties of animation, words do not say that first look at the effect of the picture.

Demand analysis

You can see that the whole animation has several parts, so we split each part out and divide and conquer.

1. What do you want to show the relationship between the content and the content?

You can see that we want to display the user avatar, nickname, gift icon, and quantity. So here I choose to use framelayout as the root layout.

2. What animations are needed and the order in which the animations are executed?

A. First is the whole from left to right to fly into and have a rebound (Translationx + overshootinterpolator)

B. Then the gift is flown from left to right and is a deceleration effect (Translationx + decelerateinterpolator)

C. The number of gifts is added in turn and accompanied by scaling (scale+repeat)

D. Subsequent particle effects (frame animation)

E. Overall upward translation and fading (Translationy + Alpha)

3. Gift-Giving area has two (a,b), how to allocate?

Because the number of user gifts is not fixed, so the duration of the animation is not necessarily. But we want these two areas to be fully used, that is, we need a queue to store these gift instances, A and b who are free, assigned to whom to deal with.

4. Does all of the above content use native space to achieve?

As the above analysis, we sometimes operate the whole, sometimes the operation of the Local. At this point we had better be able to customize a layout to inherit framelayout, in fact, is to encapsulate a layer, so that we can very good control of the entire layout. In addition, we notice that the number of gifts is a stroke, it seems that we need to customize the implementation.

function realization

The demand analysis is finished, next we talk about the realization of the function.

First of all, hit our overall layout.

<framelayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:app= "http://schemas.android.com
/apk/res-auto "android:layout_width=" match_parent "android:layout_height=" wrap_content "> <RelativeLayout Android:id= "@+id/animation_person_rl" android:layout_width= "wrap_content" android:layout_height= "39DP" Android: Layout_gravity= "left" android:layout_margintop= "22DP" android:background= "@drawable/bg_giftlayout" > < ImageView android:id= "@+id/gift_userheader_iv" android:layout_width= "39DP" android:layout_height= "39DP" Android: Layout_margin= "3DP" android:layout_alignparentleft= "true" android:layout_centervertical= "true" android:src= "@ Mipmap/ember "/> <textview android:id= @+id/gift_usernickname_tv" android:layout_width= "Wrap_content" Android : layout_height= "wrap_content" android:layout_marginleft= "6DP" android:layout_margintop= "4DP" Android:layout_ torightof= "@id/gift_userheader_iv" android:text= "Library Day" android:textcolor= "#ffffff" android:textsize= "12sp"/> &LT TextView android:id= "@+id/gift_usersign_tv" android:layout_width= wrap_content "android:layout_height=" Wrap_
Content "android:layout_alignleft=" @id/gift_usernickname_tv "android:layout_below=" @id/gift_usernickname_tv " android:layout_margintop= "4DP" android:ellipsize= "End" android:text= "send a Super Invincible" android:textcolor= "#ffea79" Android: Textsize= "11sp"/> <imageview android:id= "@+id/animation_gift" android:layout_width= "Wrap_content" Android: layout_height= "Wrap_content" android:layout_torightof= "@id/gift_usersign_tv" android:background= "@mipmap Diamond2x "/> </RelativeLayout> <imageview android:id=" @+id/animation_light "android:layout_width=" wrap _content "android:layout_height=" wrap_content "android:layout_marginleft=" 120DP "android:src=" @drawable/light_ Star_anim "/> <com.example.work.animationdemo.stroketextview android:id=" @+id/animation_num "Android:layout_" Width= "Wrap_content" android:layout_height= "wrap_content" android:layout_marginleft= "185DP" Android:layout_margintop= "12DP" android:text= "x 1" android:textcolor= "#0076ff" android:textsize= "24sp" app:innnercolor= "#ffffff" App:o Utercolor= "#0076ff"/> </FrameLayout>

Here is simpler to say, the key to look at the next stroketextview, with strokes of the textview, in fact, is to rewrite the OnDraw method first draw the outer layer, in the drawing of the inner layers.

@Override
protected void OnDraw (Canvas Canvas) {
if (m_bdrawsideline) {
//stroke outer
Settextcolorusereflection (Moutercolor);
M_textpaint.setstrokewidth (5);
M_textpaint.setstyle (Paint.Style.FILL_AND_STROKE);
Super.ondraw (canvas);
Strokes the inner layer, restores the original brush
settextcolorusereflection (minnercolor);
M_textpaint.setstrokewidth (0);
M_textpaint.setstyle (Paint.Style.FILL_AND_STROKE);
}
Super.ondraw (canvas);
}
/**
* Use the method of reflection to set the font color
* @param
color
/private void settextcolorusereflection (int color) {
Field Textcolorfield;
try {
Textcolorfield = TextView.class.getDeclaredField ("Mcurtextcolor");
Textcolorfield.setaccessible (true);
Textcolorfield.set (this, color);
Textcolorfield.setaccessible (false);
catch (Nosuchfieldexception e) {
e.printstacktrace ();
} catch (IllegalArgumentException e) {
E.printstacktrace ();
} catch (Illegalaccessexception e) {
e.printstacktrace ();
}
M_textpaint.setcolor (color);
}

Defining the entity class for a gift

public class Giftsendmodel {
private int giftcount;
Private String useravatarres;
Private String nickname;
Private String Sig;
private int giftres;
Private String gift_id;
private int star;
Public Giftsendmodel (int giftcount) {
this.giftcount = Giftcount;
}
public int Getgiftcount () {return
giftcount;
}
public void Setgiftcount (int giftcount) {
this.giftcount = Giftcount;
}
......

Package Overall layout

public class Giftframelayout extends Framelayout {private Layoutinflater minflater;
Relativelayout Anim_rl;
ImageView Anim_gift, Anim_light, Anim_header;
TextView Anim_nickname, Anim_sign;
Stroketextview Anim_num;
/** * The starting value of the number of gifts */int starnum = 1;
int repeatcount = 0;
Private Boolean isshowing = false; Public Giftframelayout {This (context, null);} public giftframelayout, AttributeSet att  RS) {Super (context, attrs); minflater = Layoutinflater.from (context); Initview ();} private void Initview () {View view =
Minflater.inflate (R.layout.animation, this, false);
ANIM_RL = (relativelayout) View.findviewbyid (R.ID.ANIMATION_PERSON_RL);
Anim_gift = (ImageView) View.findviewbyid (R.id.animation_gift);
Anim_light = (ImageView) View.findviewbyid (r.id.animation_light);
Anim_num = (Stroketextview) View.findviewbyid (r.id.animation_num);
Anim_header = (ImageView) View.findviewbyid (R.ID.GIFT_USERHEADER_IV); Anim_nickname = (TextView) View.findviewbyid (r.id.gift_useRNICKNAME_TV);
Anim_sign = (TextView) View.findviewbyid (R.ID.GIFT_USERSIGN_TV);
This.addview (view); public void Hideview () {anim_gift.setvisibility (invisible); anim_light.setvisibility (invisible); anim_
Num.setvisibility (invisible); public void Setmodel (Giftsendmodel model) {if (0!=model.getgiftcount ()) {This.repeatcount = Model.getgiftcount ();} if (! Textutils.isempty (Model.getnickname ())) {Anim_nickname.settext (Model.getnickname ());} if (!
Textutils.isempty (Model.getsig ())) {Anim_sign.settext (Model.getsig ());}} public Boolean isshowing () {return isshowing.} public Animatorset startanimation (final int repeatcount) {hideview ();// Layout fly into Objectanimator flyfromltor = Giftanimationutil.createflyfromltor (Anim_rl,-getwidth (), 0, 400,new
Overshootinterpolator ());
Flyfromltor.addlistener (New Animatorlisteneradapter () {@Override public void Onanimationstart (animator animation) {
Super.onanimationstart (animation);
GiftFrameLayout.this.setVisibility (view.visible); Giftframelayout.thiS.setalpha (1f);
Isshowing = true;
Anim_num.settext ("x" + 1);
LOG.I ("TAG", "Flyfromltor A start");
}
}); Gifts Fly into Objectanimator flyFromLtoR2 = Giftanimationutil.createflyfromltor (Anim_gift,-getwidth (), 0, 400,new
Decelerateinterpolator ());
Flyfromltor2.addlistener (New Animatorlisteneradapter () {@Override public void Onanimationstart (animator animation) {
Anim_gift.setvisibility (view.visible);
@Override public void Onanimationend (animator animation) {giftanimationutil.startanimationdrawable (anim_light);
Anim_num.setvisibility (view.visible);
}
});
Quantity increased Objectanimator Scalegiftnum = Giftanimationutil.scalegiftnum (Anim_num, repeatcount);
Scalegiftnum.addlistener (New Animatorlisteneradapter () {@Override public void Onanimationrepeat (animator animation) {
Anim_num.settext ("x" + (++starnum));});
Upward gradient disappears objectanimator Fadeanimator = giftanimationutil.createfadeanimator (giftframelayout.this, 0,-100, 300, 400); Fadeanimator.addlistener (New Animatorlisteneradapter () {@Override PublIC void Onanimationend (animator animation) {GiftFrameLayout.this.setVisibility (view.invisible);}});
Recovery Objectanimator FadeAnimator2 = giftanimationutil.createfadeanimator (giftframelayout.this, 100, 0, 20, 0); Animatorset Animatorset = giftanimationutil.startanimation (Flyfromltor, flyFromLtoR2, Scalegiftnum, FadeAnimator,
FADEANIMATOR2);
Animatorset.addlistener (New Animatorlisteneradapter () {@Override public void Onanimationend (animator animation) {
Starnum = 1;
Isshowing = false;
}
}); return animatorset;

We've written all the animation methods in Giftanimationutil for easy management

public class Giftanimationutil {/** * @param target * @param star animation start coordinate * @param end animation Termination coordinate * @param duration duration * @r  Eturn * Create a fly from left to right animation * gift fly into animation/public static Objectanimator Createflyfromltor (final View target, float star, float end, int duration, Timeinterpolator interpolator) {//1. Personal information first flew out objectanimator anim1 = objectanimator.offloat (target, "trans
Lationx ", star, end);
Anim1.setinterpolator (Interpolator);
Anim1.setduration (duration);
return anim1; /** * @param target * @return * Play frame animation/public static animationdrawable startanimationdrawable (ImageView target) {Anima
Tiondrawable animationdrawable = (animationdrawable) target.getdrawable (); if (animationdrawable!=null) {target.setvisibility (view.visible); Animationdrawable.start ();
animationdrawable; /** * @param target * @param drawable * Set frame animation/public static void Setanimationdrawable (ImageView target, Animationdraw
Able drawable) {target.setbackground (drawable);}/** * @param target * @param num * @return* Gift Number Change * * public static Objectanimator Scalegiftnum (final TextView target, int num) {Propertyvaluesholder anim4 = Prope
Rtyvaluesholder.offloat ("ScaleX", 1.7f, 0.8f,1f);
Propertyvaluesholder ANIM5 = propertyvaluesholder.offloat ("ScaleY", 1.7f, 0.8f,1f);
Propertyvaluesholder ANIM6 = propertyvaluesholder.offloat ("Alpha", 1.0f, 0f,1f);
Objectanimator animator = Objectanimator.ofpropertyvaluesholder (target, ANIM4, ANIM5, ANIM6). Setduration (480);
Animator.setrepeatcount (num);
return animator;  /** * @param target * @param star * @param end * @param duration * @param startdelay * @return * fly up and out/public static Objectanimator createfadeanimator (final View target, float star, float end, int duration, int startdelay) {propertyvalues
Holder translationy = propertyvaluesholder.offloat ("Translationy", star,end);
Propertyvaluesholder alpha = propertyvaluesholder.offloat ("Alpha", 1.0f,0f);
Objectanimator animator = Objectanimator.ofpropertyvaluesholder (target, translationy, Alpha); Animator.setStartdelay (Startdelay);
Animator.setduration (duration);
return animator; /** * @param animators * @return * play animation in sequence/public static Animatorset startanimation (Objectanimator animator1, objecta Nimator Animator2, Objectanimator Animator3, Objectanimator Animator4, Objectanimator animator5) {Animatorset Animset = n
EW Animatorset ();
Animset.playsequentially (animators);
Animset.play (Animator1). before (Animator2);
Animset.play (Animator3). After (Animator2);
Animset.play (ANIMATOR4). After (Animator3);
Animset.play (ANIMATOR5). After (ANIMATOR4);
Animset.start ();
return animset; }
}

All animation effects are animated with attributes, not only for individual animations, but also for combined animations. Property animation is useful and powerful!

Finally, the realization in the mainactivity

public class Mainactivity extends Appcompatactivity {private giftframelayout giftFrameLayout1; private Giftframelayout G
IftFrameLayout2;
list<giftsendmodel> giftsendmodellist = new arraylist<giftsendmodel> (); @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (
R.layout.activity_main);
GIFTFRAMELAYOUT1 = (giftframelayout) Findviewbyid (R.ID.GIFT_LAYOUT1);
GiftFrameLayout2 = (giftframelayout) Findviewbyid (R.ID.GIFT_LAYOUT2);
Findviewbyid (r.id.action). Setonclicklistener (New View.onclicklistener () {@Override public void OnClick (view view) {
Stargiftanimation (Creategiftsendmodel ());
}
}); Private Giftsendmodel Creategiftsendmodel () {return new Giftsendmodel ((int) (Math.random () *10));} private void Stargiftanimation (Giftsendmodel model) {if (!giftframelayout1.isshowing ()) {sendgiftanimation (GIFTFRAMELAYOUT1,
model); }else if (!giftframelayout2.isshowing ()) {sendgiftanimation (Giftframelayout2,model);} else{GIFTSENDMOdellist.add (model);
} private void Sendgiftanimation (final giftframelayout view, Giftsendmodel model) {View.setmodel (model);
Animatorset Animatorset = view.startanimation (Model.getgiftcount ());
Animatorset.addlistener (New Animatorlisteneradapter () {@Override public void Onanimationend (animator animation) {
Super.onanimationend (animation); Synchronized (giftsendmodellist) {if (giftsendmodellist.size () > 0) {view.startanimation (Giftsendmodellist.get (
Giftsendmodellist.size ()-1). Getgiftcount ());
Giftsendmodellist.remove (Giftsendmodellist.size ()-1);
}
}
}
}); @Override public boolean Oncreateoptionsmenu (Menu menu) {//Inflate the menu, this adds the items to the action bar if it I
s present.
Getmenuinflater (). Inflate (R.menu.menu_main, menu);
return true; @Override public boolean onoptionsitemselected (MenuItem Item) {//Handle Action Bar item clicks here. The action bar would//automatically handle clicks on the Home/up button, so long//as your specify a parent activity in a ndroidmanifest.xml. int id = item.getitemid (); Noinspection simplifiableifstatement if (id = = r.id.action_settings) {return true;} return super.onoptionsitemselecte
D (item); }
}

The strategy of the buffer cache can be customized according to the actual demand.

The above is a small set to introduce the Android development of the imitation of the customer to send gifts effect, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!