一、引言
以前在餓了么上面訂餐的時候，曾經看到過這么一個特效，就是將商品加入訂單時，會有一個小球呈拋物線狀落入購物車中，然后購物車中的數量會改變。具體的效果如下圖。
效果很簡單，就是一個拋物線的動畫，那么我們應該用什么技術來實現呢？想了想，動畫層是不個錯的選擇！下面開始分析及實現
二、分析
當點擊購買按鈕的時候，我們在布局上加入一個動畫層，然后讓小球在動畫層上做拋物線運動，就可實現上圖中的效果了。
說到做拋物線運動，當然需要數學上的一點小知識。 拋物線的原理很簡單，其實就是X軸方向保持勻速線性運動，而Y軸做加速度運動就好了。
在android的動畫中，可以設置Interpolator屬性。 Interpolator 被用來修飾動畫效果，定義動畫的變化率，可以使存在的動畫效果accelerated(加速)，decelerated(減速),repeated(重復),bounced(彈跳)等。而我們需要用到的就是LinearInterpolator線性勻速運動和AccelerateInterpolator加速度運動效果。
所以我們只要給小球分別設置X和Y方向上的TranslateAnimation平移動畫，在設置相應的Interpolator ，即可實現拋物線效果。
三、代碼實現
關于布局文件和ListView就不必多說了 在最后提供的源碼中都可以看到，我們這里主要講解在動畫層上實現拋物線動畫的功能。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
holder.buyBtn.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) {// 用來存儲按鈕的在屏幕的X、Y坐標 int[] startLocation = new int[2];// 獲取購買按鈕的在屏幕的X、Y坐標（這也是動畫開始的坐標） v.getLocationInWindow(startLocation);//設置小球的圖片 ball = new ImageView(mContext); ball.setImageResource(R.drawable.sign); setAnim(ball, startLocation);// 開始執行動畫 }}); |
這段代碼很簡單，就是設置小球的初始坐標，然后開始執行動畫。
下面是執行動畫的函數。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
private void setAnim(final View v, int[] startLocation) { anim_mask_layout = null; //創建動畫層 anim_mask_layout = createAnimLayout(); //把動畫小球添加到動畫層 anim_mask_layout.addView(v); final View view = addViewToAnimLayout(anim_mask_layout, v,startLocation); // 存儲動畫結束位置的X、Y坐標 int[] endLocation = new int[2]; // shopCart是購物車 shopCart.getLocationInWindow(endLocation); // 計算位移 // 動畫位移的X坐標 int endX = 0 - startLocation[0] + 40; // 動畫位移的y坐標 int endY = endLocation[1] - startLocation[1]; //設置X方向上的平移動畫 TranslateAnimation translateAnimationX = new TranslateAnimation(0, endX, 0, 0); translateAnimationX.setInterpolator(new LinearInterpolator()); // 動畫重復執行的次數 translateAnimationX.setRepeatCount(0); translateAnimationX.setFillAfter(true); //設置Y方向上的平移動畫 TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0, 0, endY); translateAnimationY.setInterpolator(new AccelerateInterpolator()); // 動畫重復執行的次數 translateAnimationY.setRepeatCount(0); translateAnimationX.setFillAfter(true); AnimationSet set = new AnimationSet(false); set.setFillAfter(false); set.addAnimation(translateAnimationY); set.addAnimation(translateAnimationX); set.setDuration(800);// 動畫的執行時間 view.startAnimation(set); // 動畫監聽事件 set.setAnimationListener(new AnimationListener() { // 動畫的開始 @Override public void onAnimationStart(Animation animation) { v.setVisibility(View.VISIBLE); } @Override public void onAnimationRepeat(Animation animation) { // TODO Auto-generated method stub } // 動畫的結束 @Override public void onAnimationEnd(Animation animation) { v.setVisibility(View.GONE); buyNum++;//讓購買數量加1 buyNumView.setText(buyNum + "");// buyNumView.setBadgePosition(BadgeView.POSITION_TOP_RIGHT); buyNumView.show(); } });} |
buyNumView是github上的一個組件BadgeView.就是那個購物車右上角顯示數字的標簽，在QQ和微信上都能看到這玩意。
下面是將小球添加到動畫層的代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
|
private View addViewToAnimLayout(final ViewGroup parent, final View view, int[] location) { int x = location[0]; int y = location[1]; LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); lp.leftMargin = x; lp.topMargin = y; view.setLayoutParams(lp); return view; } |
主要的實現就是這樣了。大家也可以根據這個案例做一些改進，就可以做出其他的效果。
源碼送上：Android實現購物車添加商品特效
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/a253664942/article/details/45157103
