(一)引言
以前在餓了麼上面訂餐的時候,曾經看到過這麼一個特效,就是將商品加入訂單時,會有一個小球呈拋物線狀落入購物車中,然後購物車中的數量會改變。具體的效果如下圖。
效果很簡單 ,就是一個拋物線的動畫,那麼我們應該用什麼技術來實現呢?想了想,動畫層是不個錯的選擇!下面開始分析及實現
(二)分析
當點擊購買按鈕的時候,我們在佈局上加入一個動畫層,然後讓小球在動畫層上做拋物線運動,就可實現上圖中的效果了。
說到做拋物線運動,當然需要數學上的一點小知識。 拋物線的原理很簡單,其實就是X軸方向保持勻速線性運動,而Y軸做加速度運動就好了。
在android的動畫中,可以設置Interpolator屬性。 Interpolator 被用來修飾動畫效果,定義動畫的變化率,可以使存在的動畫效果accelerated(加速),decelerated(減速),repeated(重複),bounced(彈跳)等。而我們需要用到的就是LinearInterpolator線性勻速運動和AccelerateInterpolator加速度運動效果。
所以我們只要給小球分別設置X和Y方向上的TranslateAnimation平移動畫,在設置相應的Interpolator ,即可實現拋物線效果。
(三)代碼實現
關於佈局文件和ListView就不必多說了 在最後提供的源碼中都可以看到,我們這裏主要講解在動畫層上實現拋物線動畫的功能。
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);// 開始執行動畫
}
});
這段代碼很簡單,就是設置小球的初始座標,然後開始執行動畫。
下面是執行動畫的函數。
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和微信上都能看到這玩意。
下面是將小球添加到動畫層的代碼
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;
}
主要的實現就是這樣了。大家也可以根據這個案例做一些改進,就可以做出其他的效果。
各位如果喜歡的話,可以留個言 點個贊~!