Android實(shí)現(xiàn)購物車添加商品特效
一、引言
以前在餓了么上面訂餐的時(shí)候,曾經(jīng)看到過這么一個(gè)特效,就是將商品加入訂單時(shí),會(huì)有一個(gè)小球呈拋物線狀落入購物車中,然后購物車中的數(shù)量會(huì)改變。具體的效果如下圖。
效果很簡(jiǎn)單,就是一個(gè)拋物線的動(dòng)畫,那么我們應(yīng)該用什么技術(shù)來實(shí)現(xiàn)呢?想了想,動(dòng)畫層是不個(gè)錯(cuò)的選擇!下面開始分析及實(shí)現(xiàn)
二、分析
當(dāng)點(diǎn)擊購買按鈕的時(shí)候,我們?cè)诓季稚霞尤胍粋€(gè)動(dòng)畫層,然后讓小球在動(dòng)畫層上做拋物線運(yùn)動(dòng),就可實(shí)現(xiàn)上圖中的效果了。
說到做拋物線運(yùn)動(dòng),當(dāng)然需要數(shù)學(xué)上的一點(diǎn)小知識(shí)。 拋物線的原理很簡(jiǎn)單,其實(shí)就是X軸方向保持勻速線性運(yùn)動(dòng),而Y軸做加速度運(yùn)動(dòng)就好了。
在android的動(dòng)畫中,可以設(shè)置Interpolator屬性。 Interpolator 被用來修飾動(dòng)畫效果,定義動(dòng)畫的變化率,可以使存在的動(dòng)畫效果accelerated(加速),decelerated(減速),repeated(重復(fù)),bounced(彈跳)等。而我們需要用到的就是LinearInterpolator線性勻速運(yùn)動(dòng)和AccelerateInterpolator加速度運(yùn)動(dòng)效果。
所以我們只要給小球分別設(shè)置X和Y方向上的TranslateAnimation平移動(dòng)畫,在設(shè)置相應(yīng)的Interpolator ,即可實(shí)現(xiàn)拋物線效果。
三、代碼實(shí)現(xiàn)
關(guān)于布局文件和ListView就不必多說了 在最后提供的源碼中都可以看到,我們這里主要講解在動(dòng)畫層上實(shí)現(xiàn)拋物線動(dòng)畫的功能。
holder.buyBtn.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // 用來存儲(chǔ)按鈕的在屏幕的X、Y坐標(biāo) int[] startLocation = new int[2]; // 獲取購買按鈕的在屏幕的X、Y坐標(biāo)(這也是動(dòng)畫開始的坐標(biāo)) v.getLocationInWindow(startLocation); //設(shè)置小球的圖片 ball = new ImageView(mContext); ball.setImageResource(R.drawable.sign); setAnim(ball, startLocation);// 開始執(zhí)行動(dòng)畫 } });
這段代碼很簡(jiǎn)單,就是設(shè)置小球的初始坐標(biāo),然后開始執(zhí)行動(dòng)畫。
下面是執(zhí)行動(dòng)畫的函數(shù)。
private void setAnim(final View v, int[] startLocation) { anim_mask_layout = null; //創(chuàng)建動(dòng)畫層 anim_mask_layout = createAnimLayout(); //把動(dòng)畫小球添加到動(dòng)畫層 anim_mask_layout.addView(v); final View view = addViewToAnimLayout(anim_mask_layout, v,startLocation); // 存儲(chǔ)動(dòng)畫結(jié)束位置的X、Y坐標(biāo) int[] endLocation = new int[2]; // shopCart是購物車 shopCart.getLocationInWindow(endLocation); // 計(jì)算位移 // 動(dòng)畫位移的X坐標(biāo) int endX = 0 - startLocation[0] + 40; // 動(dòng)畫位移的y坐標(biāo) int endY = endLocation[1] - startLocation[1]; //設(shè)置X方向上的平移動(dòng)畫 TranslateAnimation translateAnimationX = new TranslateAnimation(0, endX, 0, 0); translateAnimationX.setInterpolator(new LinearInterpolator()); // 動(dòng)畫重復(fù)執(zhí)行的次數(shù) translateAnimationX.setRepeatCount(0); translateAnimationX.setFillAfter(true); //設(shè)置Y方向上的平移動(dòng)畫 TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0, 0, endY); translateAnimationY.setInterpolator(new AccelerateInterpolator()); // 動(dòng)畫重復(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);// 動(dòng)畫的執(zhí)行時(shí)間 view.startAnimation(set); // 動(dòng)畫監(jiān)聽事件 set.setAnimationListener(new AnimationListener() { // 動(dòng)畫的開始 @Override public void onAnimationStart(Animation animation) { v.setVisibility(View.VISIBLE); } @Override public void onAnimationRepeat(Animation animation) { // TODO Auto-generated method stub } // 動(dòng)畫的結(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和微信上都能看到這玩意。
下面是將小球添加到動(dòng)畫層的代碼
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)購物車添加商品特效
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android使用動(dòng)畫動(dòng)態(tài)添加商品進(jìn)購物車
- Android仿天貓商品拋物線加入購物車動(dòng)畫
- Android實(shí)現(xiàn)購物車添加商品動(dòng)畫
- Android實(shí)現(xiàn)添加商品到購物車動(dòng)畫效果
- Android把商品添加到購物車的動(dòng)畫效果(貝塞爾曲線)
- Android實(shí)現(xiàn)仿淘寶購物車增加和減少商品數(shù)量功能demo示例
- Android實(shí)現(xiàn)購物車功能
- Android實(shí)現(xiàn)的仿淘寶購物車demo示例
- Android中實(shí)現(xiàn)淘寶購物車RecyclerView或LIstView的嵌套選擇的邏輯
相關(guān)文章
Android中獲取sha1證書指紋數(shù)據(jù)的方法
大家都知道在Android開發(fā)中,經(jīng)常要獲取sha1證書指紋,所以這篇文章主要介紹在Android中如何使用命令獲取sha1證書指紋數(shù)據(jù)的方法,有需要的可以參考借鑒。2016-09-09Android入門之利用Spinner實(shí)現(xiàn)彈出選擇對(duì)話框
這篇文章主要為大家詳細(xì)介紹了Android里如何巧用Spinner做彈出選擇對(duì)話框,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解一下2022-11-11Android實(shí)現(xiàn)底部滾輪式選擇彈跳框
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)底部滾輪式選擇彈跳框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08Android提高之BLE開發(fā)Android手機(jī)搜索iBeacon基站
這篇文章主要介紹了BLE開發(fā)Android手機(jī)搜索iBeacon基站,需要的朋友可以參考下2014-08-08Android6.0藍(lán)牙出現(xiàn)無法掃描設(shè)備或閃退問題解決辦法
這篇文章主要介紹了Android6.0藍(lán)牙出現(xiàn)無法掃描設(shè)備或閃退問題解決辦法的相關(guān)資料,需要的朋友可以參考下2017-02-02Android ListView實(shí)現(xiàn)簡(jiǎn)單列表功能
這篇文章主要為大家詳細(xì)介紹了Android ListView實(shí)現(xiàn)簡(jiǎn)單列表功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08Android中手機(jī)錄屏并轉(zhuǎn)換GIF的兩種方式
本文主要介紹了android中手機(jī)錄屏并轉(zhuǎn)換GIF的兩種方式,具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01Android開發(fā) -- 狀態(tài)欄通知Notification、NotificationManager詳解
本文主要講解狀態(tài)欄通知Notification、NotificationManager,小編覺得非常詳細(xì),給大家一個(gè)參考,希望對(duì)大家學(xué)習(xí)有所幫助。2016-06-06