一、引言
以前在餓了么上面訂餐的時(shí)候，曾經(jīng)看到過這么一個(gè)特效，就是將商品加入訂單時(shí)，會有一個(gè)小球呈拋物線狀落入購物車中，然后購物車中的數(shù)量會改變。具體的效果如下圖。
效果很簡單，就是一個(gè)拋物線的動畫，那么我們應(yīng)該用什么技術(shù)來實(shí)現(xiàn)呢？想了想，動畫層是不個(gè)錯(cuò)的選擇！下面開始分析及實(shí)現(xiàn)
二、分析
當(dāng)點(diǎn)擊購買按鈕的時(shí)候，我們在布局上加入一個(gè)動畫層，然后讓小球在動畫層上做拋物線運(yùn)動，就可實(shí)現(xiàn)上圖中的效果了。
說到做拋物線運(yùn)動，當(dāng)然需要數(shù)學(xué)上的一點(diǎn)小知識。 拋物線的原理很簡單，其實(shí)就是X軸方向保持勻速線性運(yùn)動，而Y軸做加速度運(yùn)動就好了。
在android的動畫中，可以設(shè)置Interpolator屬性。 Interpolator 被用來修飾動畫效果，定義動畫的變化率，可以使存在的動畫效果accelerated(加速)，decelerated(減速),repeated(重復(fù)),bounced(彈跳)等。而我們需要用到的就是LinearInterpolator線性勻速運(yùn)動和AccelerateInterpolator加速度運(yùn)動效果。
所以我們只要給小球分別設(shè)置X和Y方向上的TranslateAnimation平移動畫，在設(shè)置相應(yīng)的Interpolator ，即可實(shí)現(xiàn)拋物線效果。
三、代碼實(shí)現(xiàn)
關(guān)于布局文件和ListView就不必多說了 在最后提供的源碼中都可以看到，我們這里主要講解在動畫層上實(shí)現(xiàn)拋物線動畫的功能。
|
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坐標(biāo) int[] startLocation = new int[2];// 獲取購買按鈕的在屏幕的X、Y坐標(biāo)（這也是動畫開始的坐標(biāo)） v.getLocationInWindow(startLocation);//設(shè)置小球的圖片 ball = new ImageView(mContext); ball.setImageResource(R.drawable.sign); setAnim(ball, startLocation);// 開始執(zhí)行動畫 }}); |
這段代碼很簡單，就是設(shè)置小球的初始坐標(biāo)，然后開始執(zhí)行動畫。
下面是執(zhí)行動畫的函數(shù)。
|
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; //創(chuàng)建動畫層 anim_mask_layout = createAnimLayout(); //把動畫小球添加到動畫層 anim_mask_layout.addView(v); final View view = addViewToAnimLayout(anim_mask_layout, v,startLocation); // 存儲動畫結(jié)束位置的X、Y坐標(biāo) int[] endLocation = new int[2]; // shopCart是購物車 shopCart.getLocationInWindow(endLocation); // 計(jì)算位移 // 動畫位移的X坐標(biāo) int endX = 0 - startLocation[0] + 40; // 動畫位移的y坐標(biāo) int endY = endLocation[1] - startLocation[1]; //設(shè)置X方向上的平移動畫 TranslateAnimation translateAnimationX = new TranslateAnimation(0, endX, 0, 0); translateAnimationX.setInterpolator(new LinearInterpolator()); // 動畫重復(fù)執(zhí)行的次數(shù) translateAnimationX.setRepeatCount(0); translateAnimationX.setFillAfter(true); //設(shè)置Y方向上的平移動畫 TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0, 0, endY); translateAnimationY.setInterpolator(new AccelerateInterpolator()); // 動畫重復(fù)執(zhí)行的次數(shù) translateAnimationY.setRepeatCount(0); translateAnimationX.setFillAfter(true); AnimationSet set = new AnimationSet(false); set.setFillAfter(false); set.addAnimation(translateAnimationY); set.addAnimation(translateAnimationX); set.setDuration(800);// 動畫的執(zhí)行時(shí)間 view.startAnimation(set); // 動畫監(jiān)聽事件 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 } // 動畫的結(jié)束 @Override public void onAnimationEnd(Animation animation) { v.setVisibility(View.GONE); buyNum++;//讓購買數(shù)量加1 buyNumView.setText(buyNum + "");// buyNumView.setBadgePosition(BadgeView.POSITION_TOP_RIGHT); buyNumView.show(); } });} |
buyNumView是github上的一個(gè)組件BadgeView.就是那個(gè)購物車右上角顯示數(shù)字的標(biāo)簽，在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; } |
主要的實(shí)現(xiàn)就是這樣了。大家也可以根據(jù)這個(gè)案例做一些改進(jìn)，就可以做出其他的效果。
源碼送上：Android實(shí)現(xiàn)購物車添加商品特效
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/a253664942/article/details/45157103
