Android to add goods to the shopping cart animation effect implementation (principle Bezier curve)

preface

Due to the addition of two new pages related to shopping cart and commodity purchase on the home page of the project, the effect of one page is as follows:

It was just a Toast message without adding an animation to the shopping cart. I felt something was missing. Before, I have seen many shopping apps, such as Ele. me, Meituan, JINGdong and Taobao. Some shopping apps will have an animation demonstration effect of adding goods to the shopping cart. Every time I look at myself, I think, if only I could achieve this effect. The opportunity came.

Think of here, can not help but let me think of a famous word of Guo Lin god here to borrow, and encourage together!

Achieve effects such as GIF:

Once upon a time by hand:

X3 and y3 represent x and y of the control point, namely P1 in the dynamic figure above; x2 and y2 represent x and y of the target point, namely P2 in the dynamic figure above. Drawing path trace has found the corresponding class and method, the next is the specific application in their own projects. The diagram below:

The first is the Path through which items are added to the cart, similar to a parabola, which Android already provides us with a related method — the Path class (which encapsulates the Bezier curve).

If you are still not sure, you can Google the concept of Bezier curve, or go to the Bezier curve drawing website to see the effect

Or open the link they try effect, enlightenment — — — — — — — — — — — — — — — — — — — — – Bessel curve practice site

Ideas:

		int[] parentLocation = new int[2];        
        parentView.getLocationInWindow(parentLocation);
Copy the code

		 Path path = new Path();        
         path.moveTo(startX, startY);
         path.quadTo((startX + toX) / 2, startY, toX, toY);
        
Copy the code

The encapsulated utility class is shared:

public final class AnimatorUtils { public static void doCartAnimator(Activity activity, ImageView imageView, View cartView, final ViewGroup parentView, final OnAnimatorListener Listener) {// First step: // Create the theme of the animation --imageView // code new imageView, the image resource is the image of the above imageView // (this image is the image of the animation, starting from the starting position, through a parabola (Bezier curve), Move to the shopping cart) if (activity = = null | | imageView = = null | | cartView = = null | | parentView = = null) return; final ImageView goods = new ImageView(activity); goods.setPadding(1, 1, 1, 1); / / picture cutting way goods. SetScaleType (ImageView. ScaleType. CENTER_CROP); SetImageDrawable (imageView.getDrawable())); / / setting RelativeLayout container (here must be set RelativeLayout animate LinearLayout expire) RelativeLayout. LayoutParams params = new RelativeLayout.LayoutParams(100, 100); Parentview. addView(goods, params); Int [] parentLocation = new int[2]; parentLocation = new int[2]; / / get the buy button on X, Y coordinates of the screen (the coordinates of the animation started) parentView. GetLocationInWindow (parentLocation); int startLoc[] = new int[2]; / / get product picture in the screen position imageView. The getLocationInWindow (startLoc); Int endLoc[] = new int[2]; int endLoc[] = new int[2]; cartView.getLocationInWindow(endLoc); // Step 3: // Start to calculate the start/end of the animation coordinates // start to drop goods starting point: Float startX = startLoc[0] - parentLocation[0] + ImageView.getwidth () / 2; // Float startY = startLoc[1] -parentLocation [1] + imageView.getheight () / 2; Float toX = endLoc[0] -parentLocation [0] + cartView.getwidth () /5; float toX = endLoc[0] -parentLocation [0] + cartView.getwidth () /5; float toY = endLoc[1] - parentLocation[1]; // Calculate the interpolation coordinates of the middle animation, draw the Bezier curve Path Path = new Path(); // moveTo the starting point (the starting point of the bezier curve) path.moveto (startX, startY); QuadTo ((startX + toX) / 2, startY, toX,toY) = path.quadTo((startX + toX) / 2); final PathMeasure pathMeasure = new PathMeasure(path, false); / / implementation animation specific blogs can reference Hon the great god of https://blog.csdn.net/lmj623565791/article/details/38067475 ValueAnimator ValueAnimator = ValueAnimator.ofFloat(0, pathMeasure.getLength()); / / set the animation time valueAnimator. SetDuration (700); //LinearInterpolator: Its main function is to control the change rate of animation, for example, to achieve a nonlinear motion animation effect. https://blog.csdn.net/guolin_blog/article/details/44171115 valueAnimator.setInterpolator(new LinearInterpolator()); valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void OnAnimationUpdate ValueAnimator (animation) {/ / update the animation float value = (float) animation. GetAnimatedValue (); float[] currentPosition = new float[2]; pathMeasure.getPosTan(value, currentPosition, null); goods.setTranslationX(currentPosition[0]); // Changed the ImageView's X position goods.setTranslationy (currentPosition[1]); // Change the ImageView Y position}}); // Start the animation valueanimator.start (); // Step 6: / / add in animation listening valueAnimator. AddListener (new Animator. AnimatorListener () {@ Override public void onAnimationStart (Animator Animation) {//onAnimationStart() will be called when the animation starts} //onAnimationEnd() will call @override public void when the animation ends OnAnimationEnd (Animator Animation) {// Remove the moving image imageView from the parent layout parentView.removeView(goods); if (listener ! = null) { listener.onAnimationEnd(animation); }} @override public void onAnimationCancel(Animator animation) {//onAnimationCancel() is called when the animation is cancelled Void onAnimationRepeat(Animator animation) {//onAnimationRepeat() calls}}); } public static void viewRotate(Context Context, View View) {if (View == null) return; . / / loading Animation Animation Animation = AnimationUtils loadAnimation (the context of state Richard armitage nim. Anim_round_rotate); //LinearInterpolator: Its main function is to control the change rate of animation, for example, to achieve a nonlinear motion animation effect. https://blog.csdn.net/guolin_blog/article/details/44171115 LinearInterpolator interpolator = new LinearInterpolator(); animation.setInterpolator(interpolator); // Set the animation view.startAnimation(animation); } public interface OnAnimatorListener { void onAnimationEnd(Animator animator); }}Copy the code

Tips

Tool usage:

@BindView(R.id.container) ConstraintLayout mConstraintLayout; @BindView(R.id.iv_shopping_cart) ImageView mIvShoppingCart; ImageView imageView = (ImageView) adapter.getViewByPosition(position + 1, R.id.iv_img); mPresenter.addToCart(1, goodsModel.getGoodsId(), true, false); / / this method is called after the interface data returned AnimatorUtils. DoCartAnimator (this imageView, mIvShoppingCart, mConstraintLayout, null);Copy the code

Conclusion:

Share with you

I want to work my way up

Fly forward on the blades at the highest point

Let the wind blow dry tears and sweat

I want to work my way up

Waiting for the sun to watch its face

Little days have big dreams

I have my day

Let the wind blow dry tears and sweat

One day I will have my day