Android adds a product to the shopping cart's animation effect (Bezier curve) _android

When we write mall-class items, there are usually the functions of adding a shopping cart, when you add a shopping cart there will be some parabolic animation, the specific code is as follows:

Implementation of the effect as shown in figure:

Ideas:

1. To determine the end point of an animation
2. Use a two-time Bezier curve between endpoints to fill points between endpoints
3. Set property animation, Valueanimator interpolation, get the coordinates of the middle point
4. Sets the x and Y coordinates of the control that executes the animation to the middle point coordinates obtained above
5. Turn on property animation
6. Action at the end of the animation

Difficulties:

The use of Pathmeasure
-GetLength ()
-Understanding of Boolean Getpostan (float distance, float[] pos, float[] tan)

The knowledge points involved:

How to get the absolute coordinates of a control on the screen

Gets the starting point coordinate of the parent layout (coordinates for the point at which the animation starts/ends)
  int[] parentlocation = new int[2];
  Rl.getlocationinwindow (parentlocation);

How to use Bezier curves and property animation interpolation Valueanimator

 Calculate the interpolation coordinates (Bezier curve) of the intermediate animation (in fact, the process of finishing the end with Bezier curve)//start to draw the Bezier curve path Path = new Path ();
    Move to the starting point (the beginning of the Bezier curve) Path.moveto (startx, starty);
    Use two times Sabert curve: Note that the larger the first starting coordinate, the greater the lateral distance of the Bezier curve, generally according to the following equation Path.quadto ((startx + ToX)/2, Starty, ToX, ToY);

    Mpathmeasure is used to calculate the curve length of the Bezier curve and the coordinates of the interpolation of the Bezier curve,//If the True,path will form a closed loop Mpathmeasure = new Pathmeasure (path, false); ★★★ Property Animation implementation (interpolation between 0 and the length of the Bezier curve to obtain the distance value of the intermediate process) Valueanimator valueanimator = valueanimator.offloat (0, Mpathmeasure.get
    Length ());
    Valueanimator.setduration (1000);
    Constant linear interpolation valueanimator.setinterpolator (new Linearinterpolator ()); Valueanimator.addupdatelistener (New Valueanimator.animatorupdatelistener () {@Override public void onanimation Update (Valueanimator animation) {//When interpolation calculation is carried out, get each value in the middle, where this value is the length of the curve in the middle process (the coordinates of the middle point are derived from this value below) Flo
        At value = (Float) animation.getanimatedvalue (); ★★★★★ gets the current point coordinates encapsulated into Mcurrentposition//Boolean Getpostan(float distance, float[] pos, float[] tan)://pass in a distance distance (0<=distance<=getlength ()), and then calculate the current distance//
        From the coordinates point and tangent, POS will automatically fill the coordinates, this method is very important. Mpathmeasure.getpostan (value, mcurrentposition, null);//mcurrentposition at this point is the coordinate value of the middle distance point//Moving merchandise picture (animated picture) coordinates set to the middle point of the sitting
        Standard Goods.settranslationx (mcurrentposition[0]);
      Goods.settranslationy (mcurrentposition[1]);
}
    });

 Start the execution of animation Valueanimator.start ();

All code:

Package cn.c.com.beziercurveanimater;
Import Android.animation.Animator;
Import Android.animation.ValueAnimator;
Import Android.graphics.Bitmap;
Import Android.graphics.BitmapFactory;
Import Android.graphics.Path;
Import Android.graphics.PathMeasure;
Import Android.os.Bundle;
Import android.support.v7.app.AppCompatActivity;
Import Android.support.v7.widget.LinearLayoutManager;
Import Android.support.v7.widget.RecyclerView;
Import Android.view.LayoutInflater;
Import Android.view.View;
Import Android.view.ViewGroup;
Import Android.view.animation.LinearInterpolator;
Import Android.widget.ImageView;
Import Android.widget.RelativeLayout;

Import Android.widget.TextView;

Import java.util.ArrayList;
  public class Mainactivity extends Appcompatactivity {private Recyclerview mrecyclerview;
  Private ImageView cart;
  Private arraylist<bitmap> bitmaplist = new arraylist<> ();
  Private Relativelayout RL;
  Private Pathmeasure mpathmeasure; /** * The coordinates of the point of the middle process of the Bezier curve * * PrivaTe float[] mcurrentposition = new float[2];
  Private TextView count;

  private int i = 0;
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
    Setcontentview (R.layout.activity_main);
    Initview ();
    Initimg ();
    Myadapter myadapter = new Myadapter (bitmaplist);
    Mrecyclerview.setadapter (Myadapter);
  Mrecyclerview.setlayoutmanager (New Linearlayoutmanager (Mainactivity.this));
    private void Initimg () {Bitmaplist.add (Bitmapfactory.decoderesource (Getresources (), r.drawable.coin));
    Bitmaplist.add (Bitmapfactory.decoderesource (Getresources (), r.drawable.coin1));
  Bitmaplist.add (Bitmapfactory.decoderesource (Getresources (), r.drawable.coin91));
    private void Initview () {Mrecyclerview = (Recyclerview) Findviewbyid (R.id.recyclerview);
    Cart = (ImageView) Findviewbyid (R.id.cart);
    RL = (relativelayout) Findviewbyid (R.ID.RL);
  Count = (TextView) Findviewbyid (R.id.count); } class MyadapteR extends recyclerview.adapter<myvh> {private arraylist<bitmap> bitmaplist;
    Public Myadapter (arraylist<bitmap> bitmaplist) {this.bitmaplist = bitmaplist; @Override public MYVH Oncreateviewholder (viewgroup parent, int viewtype) {Layoutinflater Inflater = Layo
      Utinflater.from (Mainactivity.this);
      View Itemview = Inflater.inflate (R.layout.item, parent, false);
      MYVH MYVH = new MYVH (Itemview);
    return MYVH; @Override public void Onbindviewholder (final MYVH holder, final int position) {Holder.iv.setImageBitmap (
      Bitmaplist.get (position));
          Holder.buy.setOnClickListener (New View.onclicklistener () {@Override public void OnClick (View v) {
        Addcart (HOLDER.IV);
    }
      });
    @Override public int GetItemCount () {return bitmaplist.size ();   }/** *★★★★★ Add the product to the shopping cart animation effect ★★★★★* @param IV * * private void Addcart (ImageView iv) {//First, create the theme of the animation---imageview//code new A ImageView, picture resources is the above ImageView picture//(this image is the animation of the picture, starting from the position, after a parabola (Bezier curve), moved to the shopping cart
    Final ImageView goods = new ImageView (mainactivity.this);
    Goods.setimagedrawable (Iv.getdrawable ());
    Relativelayout.layoutparams params = new Relativelayout.layoutparams (100, 100);

Rl.addview (goods, params);
    Second, the calculation of the animation start/end point coordinates preparation work//Get the parent layout of the starting point coordinates (used to help calculate the animation at the start/end point coordinates) int[] parentlocation = new int[2];

    Rl.getlocationinwindow (parentlocation);
    Get the coordinates of the merchandise picture (the coordinates used to calculate the start of the animation) int startloc[] = new INT[2];

    Iv.getlocationinwindow (Startloc);
    Get the coordinates of the shopping cart picture (used to compute the coordinates after the end of the animation) int endloc[] = new INT[2];


Cart.getlocationinwindow (Endloc); Third, the beginning of the beginning of the calculation of the animation/end of the coordinates//start to drop the start point: Product start point-parent layout starting point + the product picture of half float startx = startloc[0]-parentlocation[0] + IV.G
    Etwidth ()/2;

    float starty = startloc[1]-parentlocation[1] + iv.getheight ()/2; Goods fall behind the end of the coordinates: shopping cart starting point-parent layout starting point + shopping cart picture 1/5 float ToX = endloc[0]-parentlocation[0] +Cart.getwidth ()/5;

float ToY = endloc[1]-parentlocation[1];
    Calculate the interpolation coordinates (Bezier curve) of the intermediate animation (in fact, the process of finishing the end with Bezier curve)//start to draw the Bezier curve path Path = new Path ();
    Move to the starting point (the beginning of the Bezier curve) Path.moveto (startx, starty);
    Use two times Sabert curve: Note that the larger the first starting coordinate, the greater the lateral distance of the Bezier curve, generally according to the following equation Path.quadto ((startx + ToX)/2, Starty, ToX, ToY);

    Mpathmeasure is used to calculate the curve length of the Bezier curve and the coordinates of the interpolation of the Bezier curve,//If the True,path will form a closed loop Mpathmeasure = new Pathmeasure (path, false); ★★★ Property Animation implementation (interpolation between 0 and the length of the Bezier curve to obtain the distance value of the intermediate process) Valueanimator valueanimator = valueanimator.offloat (0, Mpathmeasure.get
    Length ());
    Valueanimator.setduration (1000);
    Constant linear interpolation valueanimator.setinterpolator (new Linearinterpolator ()); Valueanimator.addupdatelistener (New Valueanimator.animatorupdatelistener () {@Override public void onanimation Update (Valueanimator animation) {//When interpolation calculation is carried out, get each value in the middle, where this value is the length of the curve in the middle process (the coordinates of the middle point are derived from this value below) Flo
    At value = (Float) animation.getanimatedvalue ();    ★★★★★ get current point coordinates encapsulated into Mcurrentposition//Boolean Getpostan (float distance, float[] pos, float[] tan)://
        It is important to pass in a distance distance (0<=distance<=getlength ()), and then compute the coordinates and tangents of the current distance//away, and the POS will automatically populate the coordinates. Mpathmeasure.getpostan (value, mcurrentposition, null);//mcurrentposition at this point is the coordinate value of the middle distance point//Moving merchandise picture (animated picture) coordinates set to the middle point of the sitting
        Standard Goods.settranslationx (mcurrentposition[0]);
      Goods.settranslationy (mcurrentposition[1]);
}
    });

Start the execution of animation Valueanimator.start (); Vi. processing after animation Valueanimator.addlistener (new Animator.animatorlistener () {@Override public void Onanimat Ionstart (animator animation) {}//When animation ends: @Override public void Onanimationend (animator Animati
        ON) {//The number of shopping carts plus 1 i++;
        Count.settext (string.valueof (i));
      Remove the moving picture ImageView from the parent layout rl.removeview (goods);

   @Override public void Onanimationcancel (animator animation) {}   @Override public void Onanimationrepeat (animator animation) {}});
    Class MYVH extends Recyclerview.viewholder {private ImageView IV;

    Private TextView buy;
      Public MYVH (View Itemview) {super (Itemview);
      IV = (ImageView) Itemview.findviewbyid (R.ID.IV);
    Buy = (TextView) Itemview.findviewbyid (r.id.buy);

 }
  }


}

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.