您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)Android如何實現(xiàn)購物車添加商品特效的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
一、引言
以前在餓了么上面訂餐的時候,曾經(jīng)看到過這么一個特效,就是將商品加入訂單時,會有一個小球呈拋物線狀落入購物車中,然后購物車中的數(shù)量會改變。具體的效果如下圖。
效果很簡單,就是一個拋物線的動畫,那么我們應(yīng)該用什么技術(shù)來實現(xiàn)呢?想了想,動畫層是不個錯的選擇!下面開始分析及實現(xiàn)
二、分析
當點擊購買按鈕的時候,我們在布局上加入一個動畫層,然后讓小球在動畫層上做拋物線運動,就可實現(xiàn)上圖中的效果了。
說到做拋物線運動,當然需要數(shù)學(xué)上的一點小知識。 拋物線的原理很簡單,其實就是X軸方向保持勻速線性運動,而Y軸做加速度運動就好了。
在android的動畫中,可以設(shè)置Interpolator屬性。 Interpolator 被用來修飾動畫效果,定義動畫的變化率,可以使存在的動畫效果accelerated(加速),decelerated(減速),repeated(重復(fù)),bounced(彈跳)等。而我們需要用到的就是LinearInterpolator線性勻速運動和AccelerateInterpolator加速度運動效果。
所以我們只要給小球分別設(shè)置X和Y方向上的TranslateAnimation平移動畫,在設(shè)置相應(yīng)的Interpolator ,即可實現(xiàn)拋物線效果。
三、代碼實現(xiàn)
關(guān)于布局文件和ListView就不必多說了 在最后提供的源碼中都可以看到,我們這里主要講解在動畫層上實現(xiàn)拋物線動畫的功能。
holder.buyBtn.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // 用來存儲按鈕的在屏幕的X、Y坐標 int[] startLocation = new int[2]; // 獲取購買按鈕的在屏幕的X、Y坐標(這也是動畫開始的坐標) v.getLocationInWindow(startLocation); //設(shè)置小球的圖片 ball = new ImageView(mContext); ball.setImageResource(R.drawable.sign); setAnim(ball, startLocation);// 開始執(zhí)行動畫 } });
這段代碼很簡單,就是設(shè)置小球的初始坐標,然后開始執(zhí)行動畫。
下面是執(zhí)行動畫的函數(shù)。
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坐標 int[] endLocation = new int[2]; // shopCart是購物車 shopCart.getLocationInWindow(endLocation); // 計算位移 // 動畫位移的X坐標 int endX = 0 - startLocation[0] + 40; // 動畫位移的y坐標 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í)行時間 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上的一個組件BadgeView.就是那個購物車右上角顯示數(shù)字的標簽,在QQ和微信上都能看到這玩意。
下面是將小球添加到動畫層的代碼
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; }
主要的實現(xiàn)就是這樣了。大家也可以根據(jù)這個案例做一些改進,就可以做出其他的效果。
感謝各位的閱讀!關(guān)于“Android如何實現(xiàn)購物車添加商品特效”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。