Android uses two times Bezier curve to imitate shopping cart Add Item parabolic animation

Android uses two times Bezier curve to imitate shopping cart Add Item parabolic animation

0. First, give an effect GIF chart first.

1. Bessel curve principle and related formula reference: Http://www.jianshu.com/p/c0d7ad796cee Xu Fang.

2. Principle: Calculate the coordinates of the clicked view, shopping cart view, and their parent container relative to the screen.

3. In the Chant click View coordinates the parent container increases the imgview that need to complete the animation through AddView.

4. The custom estimator completes the point XY coordinate calculation on the parabolic path by two times the Bezier curve formula (2 data points, one control point).

5. Use the property animation + Custom Estimator to complete the parabolic animation Imgview inside the parent container.

6. Give the layout first, which contains a ListView, a ImageView, and a parent container that needs to be used.

<?xml version= "1.0" encoding= "Utf-8"? ><linearlayout xmlns:android= "http://schemas.android.com/apk/res/ Android "xmlns:tools=" Http://schemas.android.com/tools "android:layout_width=" Match_parent "android:layout_height = "Match_parent" android:background= "#00ffe1" android:orientation= "vertical" android:paddingbottom= "@dimen/activit Y_vertical_margin "android:paddingleft=" @dimen/activity_horizontal_margin "android:paddingright=" @dimen/activity _horizontal_margin "android:paddingtop=" @dimen/activity_vertical_margin "tools:context=".         Mainactivity "> <relativelayout android:id=" @+id/main_container "android:layout_width=" Match_parent " android:layout_height= "Match_parent" > <listview android:id= "@+id/main_lv" Andro            Id:layout_width= "Match_parent" android:layout_height= "match_parent" android:divider= "#0011ff" android:dividerheight= "2DP"/> <!--shop img--> <imageview android:id= "@+id/main_img" android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_alignparentbottom= "true" Android:layout_marginbo Ttom= "20DP" android:layout_marginleft= "20DP" android:src= "@mipmap/shop"/> </relativelayout& Gt;</linearlayout>

7. Give the ListView Item layout:

<?xml version= "1.0" encoding= "Utf-8"? ><relativelayout xmlns:android= "http://schemas.android.com/apk/res/ Android "                android:layout_width=" match_parent "                android:layout_height=" Wrap_content "                android: Background= "#FFF"                android:padding= "30DP" >    <textview        android:id= "@+id/item_text"        android: Layout_width= "Wrap_content"        android:layout_height= "wrap_content"        android:layout_centerinparent= "true"        android:textcolor= "#F00"        android:textsize= "20sp"/>    <imageview        android:id= "@+id/item_ IMG "        android:layout_width=" wrap_content "        android:layout_height=" wrap_content "        android:layout_ Alignparentright= "true"        android:layout_centervertical= "true"        android:src= "@mipmap/add"/></ Relativelayout>

8. Give the ListView adapter code simply by adding a callback interface when clicked:

public class Itemadapter extends Baseadapter implements View.onclicklistener {list<string> data = new arraylist&    Lt;> ();    Context Mcontext;        Public Itemadapter (Context context) {Mcontext = context;        for (int i = 0; i < i++) {Data.add ("item+" + i);    }} @Override public int getcount () {return data.size ();    } @Override public Object getItem (int position) {return data.get (position);    } @Override public long getitemid (int position) {return position; } @Override public View getView (int position, view Convertview, ViewGroup parent) {if (Convertview = = null)            {Convertview = Layoutinflater.from (Mcontext). Inflate (R.layout.item, parent, false);        Convertview.settag (New Viewh (Convertview));        } VIEWH holder = (VIEWH) convertview.gettag ();        Holder.tv.setText (Data.get (position));        Holder.img.setOnClickListener (this); Return ConveRtview;        } @Override public void OnClick (View v) {if (Mlistener! = null) {Mlistener.add (v);    }} private Addclicklistener Mlistener;    public void Setlistener (Addclicklistener listener) {Mlistener = listener;    public interface Addclicklistener {void Add (View v);        } public static class Viewh {private ImageView img;        Private TextView TV;            Public Viewh (view view) {img = ((ImageView) View.findviewbyid (r.id.item_img));        TV = ((TextView) View.findviewbyid (R.id.item_text)); }    }}

9. One of the custom Moveimageview is simply to add a set method to facilitate the property animation when the update is called.

public class Moveimageview extends ImageView {public    Moveimageview (context context) {        super (context);    }    public void setmpointf (PointF PointF) {        SetX (pointf.x);        Sety (POINTF.Y);    }}

10. Important implementations in the Activity section:

public class Mainactivity extends appcompatactivity implements Itemadapter.addclicklistener, Animator.animatorlistener {private ImageView shopimg;//shopping cart IMG private relativelayout container;//listview Shopping cart View    Parent layout private ListView ITEMLV;        @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);        Setcontentview (R.layout.activity_main);        Findviews ();    Initviews ();        private void Initviews () {Itemadapter adapter = new Itemadapter (this);        The current activity implements adapter internal Click Callback Adapter.setlistener (this);    Itemlv.setadapter (adapter); }/** * ListView + click callback method */@Override public void Add (View ADDV) {int[] childcoordinate = new in        T[2];        int[] parentcoordinate = new int[2];        int[] shopcoordinate = new int[2];        1. Get the coordinates xy of the clicked view, parent layout, shopping cart on the screen, respectively.        Addv.getlocationinwindow (childcoordinate); Container.getlocationinwindow (Parentcoordinate);        Shopimg.getlocationinwindow (shopcoordinate);        2. Custom ImageView inheritance ImageView moveimageview img = new Moveimageview (this);        Img.setimageresource (R.MIPMAP.HEART1);        3. Set the coordinate position of the IMG in the parent layout img.setx (Childcoordinate[0]-parentcoordinate[0]);        Img.sety (Childcoordinate[1]-parentcoordinate[1]);        4. The parent layout adds the IMG Container.addview (IMG);        5. The use of two Bezier curves requires the first calculation of the Moveimageview 2 data points and a control point PointF STARTP = new PointF ();        PointF ENDP = new PointF ();        PointF Controlp = new PointF ();        The starting data point coordinates are the coordinates of the ADDV startp.x = childcoordinate[0]-parentcoordinate[0];        STARTP.Y = childcoordinate[1]-parentcoordinate[1];        The end of the data point coordinates is SHOPIMG coordinates endp.x = shopcoordinate[0]-parentcoordinate[0];        ENDP.Y = shopcoordinate[1]-parentcoordinate[1];        Control point coordinates x equals the shopping cart x;y equals addv y controlp.x = endp.x;        CONTROLP.Y = STARTP.Y; Start Property animation Objectanimator animator = ObjectanimatOr.ofobject (IMG, "mpointf", New Pointftypeevaluator (CONTROLP), STARTP, ENDP);        Animator.setduration (1000);        Animator.addlistener (this);    Animator.start (); } @Override public void Onanimationstart (Animator animation) {} @Override public void Onanimationend (Anima        Tor animation) {//animation end stepfather Layout remove img Object target = ((objectanimator) animation). Gettarget ();        Container.removeview ((View) target);        Shopimg starts a magnified animation Animation Scaleanim = Animationutils.loadanimation (this, r.anim.shop_scale);    Shopimg.startanimation (Scaleanim); } @Override public void Onanimationcancel (Animator animation) {} @Override public void Onanimationrepeat (A Nimator animation) {}/** * Custom Estimator */public class Pointftypeevaluator implements Typeevaluator<point        f> {/** * Each estimator corresponds to an attribute animation, each property animation corresponds to only one control point */PointF control;     /** * Estimator return value */   PointF mpointf = new PointF ();        Public Pointftypeevaluator (PointF control) {This.control = control; } @Override Public PointF evaluate (float fraction, PointF startvalue, PointF endvalue) {return g        Etbezierpoint (Startvalue, Endvalue, control, fraction); }/** * Two Bezier curve formula * * @param start data point * @param end of data point * @para M control Control point * @param t float 0-1 * @return different t corresponding to PointF */private PointF Getbezier  Point (PointF start, PointF end, PointF control, float t) {mpointf.x = (1-t) * (1-t) * start.x + 2 * t * (1            -T) * control.x + t * t * END.X;            Mpointf.y = (1-t) * (1-t) * START.Y + 2 * t * (1-t) * control.y + t * t * END.Y;        return mpointf;        }} private void Findviews () {shopimg = (ImageView) Findviewbyid (r.id.main_img); container = (relativelayout) Findviewbyid (r.id.main_container);    ITEMLV = (ListView) Findviewbyid (R.ID.MAIN_LV); }}

11. The shopping cart has a scale motion tween:

<?xml version= "1.0" encoding= "Utf-8"? ><set xmlns:android= "Http://schemas.android.com/apk/res/android"     android:duration= "android:repeatcount="     1 "android:repeatmode="     Reverse ">    <scale        android:fromxscale= "1.0"        android:fromyscale= "1.0"        android:pivotx= "50%"        android:pivoty= "50%"        android:toxscale= "1.2"        android:toyscale= "1.2"/></set>

12. For reference ~ ~ ~

Android uses two times Bezier curve to imitate shopping cart Add Item parabolic animation