欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android實(shí)現(xiàn)購物車添加商品特效

 更新時(shí)間：2018年06月30日 16:25:09   作者：a253664942  
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)購物車添加商品特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一、引言

以前在餓了么上面訂餐的時(shí)候，曾經(jīng)看到過這么一個(gè)特效，就是將商品加入訂單時(shí)，會(huì)有一個(gè)小球呈拋物線狀落入購物車中，然后購物車中的數(shù)量會(huì)改變。具體的效果如下圖。

效果很簡單，就是一個(gè)拋物線的動(dòng)畫，那么我們應(yīng)該用什么技術(shù)來實(shí)現(xiàn)呢？想了想，動(dòng)畫層是不個(gè)錯(cuò)的選擇！下面開始分析及實(shí)現(xiàn)

二、分析

當(dāng)點(diǎn)擊購買按鈕的時(shí)候，我們在布局上加入一個(gè)動(dòng)畫層，然后讓小球在動(dòng)畫層上做拋物線運(yùn)動(dòng)，就可實(shí)現(xiàn)上圖中的效果了。
說到做拋物線運(yùn)動(dòng)，當(dāng)然需要數(shù)學(xué)上的一點(diǎn)小知識(shí)。 拋物線的原理很簡單，其實(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)畫
  }
});

這段代碼很簡單，就是設(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)購物車添加商品特效

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論