Android仿天貓商品拋物線加入購物車動畫
本文實例為大家分享了Android仿天貓加入購物車的具體代碼,供大家參考,具體內(nèi)容如下
先上效果圖

實現(xiàn)思路:
首先,我們需要三個Imagview
第一個是原商品圖片, 這個圖片是布局文件中創(chuàng)建的 我們稱作A
第二個是做動畫的圖片 這個我們是在代碼中創(chuàng)建的 我們稱作B
第三個是購物車圖片 這個圖片是布局文件中創(chuàng)建的 我們稱作C
接著,我們需要將A圖片設(shè)置給B
A圖片一般是聯(lián)網(wǎng)獲取到的,給Imagview設(shè)置圖片有兩種方式
如果是通過setBackgroundDrawable 那么就通過getBackground()獲取到Drawable對象,設(shè)置給B
如果是通過setImageDrawable 那么就通過getDrawable()獲取到Drawable對象,設(shè)置給B
再接著 我們獲取到A的位置 作為動畫開始的位置 獲取到C的位置 作為動畫結(jié)束的位置
然后 創(chuàng)建動畫圖層,開始執(zhí)行動畫
這個動畫集合中,包括: 水平位移勻速平移 豎直方向加速平移 縮放動畫
最后 一定不要忘了 為我們的動畫集合添加監(jiān)聽set.setAnimationListener
動畫執(zhí)行前讓Imagview 可見 動畫執(zhí)行后讓Imagview 不可見
下邊是MainActivity中的代碼
public class MainActivity extends Activity {
private ImageView top;
private ImageView bottom;
private ImageView animImageView;
private ViewGroup anim_mask_layout;// 動畫層
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
top = (ImageView) findViewById(R.id.top);
bottom = (ImageView) findViewById(R.id.bottom);
}
public void startAnim(View view) {
// 記錄開始的位置
int[] startLocation = new int[2];// 一個整型數(shù)組,用來存儲按鈕的在屏幕的X、Y坐標(biāo)
top.getLocationInWindow(startLocation);// 這是獲取購買按鈕的在屏幕的X、Y坐標(biāo)(這也是動畫開始的坐標(biāo))
// 創(chuàng)建要做動畫的ImageView
animImageView = new ImageView(this);
// 設(shè)置animImageView的背景
Drawable background = top.getBackground();
Drawable zoomDrawable = zoomDrawable(background, dip2Px(this, 200),
dip2Px(this, 200));
animImageView.setBackgroundDrawable(zoomDrawable);
// 開始執(zhí)行動畫
setAnim(animImageView, startLocation, top);
}
/**
* 設(shè)置動畫
*
* @param v
* @param startLocation
* @param view
*/
private void setAnim(final View v, int[] startLocation, final View view) {
anim_mask_layout = null;
anim_mask_layout = createAnimLayout();
anim_mask_layout.addView(v);// 把動畫小球添加到動畫層
final View viewa = addViewToAnimLayout(anim_mask_layout, v,
startLocation);
int[] endLocation = new int[2];// 存儲動畫結(jié)束位置的X、Y坐標(biāo)
bottom.getLocationInWindow(endLocation);// shopCart是那個購物車
// 計算位移
int endX = endLocation[0] - startLocation[0];// 動畫位移的X坐標(biāo)
int endY = endLocation[1] - startLocation[1];// 動畫位移的y坐標(biāo)
TranslateAnimation translateAnimationX = new TranslateAnimation(0,
endX, 0, 0);
translateAnimationX.setInterpolator(new LinearInterpolator());
translateAnimationX.setRepeatCount(0);// 動畫重復(fù)執(zhí)行的次數(shù)
translateAnimationX.setFillAfter(true);
TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0,
0, endY);
translateAnimationY.setInterpolator(new AccelerateInterpolator());
translateAnimationY.setRepeatCount(0);// 動畫重復(fù)執(zhí)行的次數(shù)
translateAnimationX.setFillAfter(true);
ScaleAnimation scaleAnimation = new ScaleAnimation(0.6f, 0.1f,0.6f, 0.1f);
scaleAnimation.setInterpolator(new AccelerateInterpolator());
scaleAnimation.setRepeatCount(0);// 動畫重復(fù)執(zhí)行的次數(shù)
scaleAnimation.setFillAfter(true);
AnimationSet set = new AnimationSet(false);
set.setFillAfter(false);
set.addAnimation(scaleAnimation);
set.addAnimation(translateAnimationY);
set.addAnimation(translateAnimationX);
set.setDuration(600);// 動畫的執(zhí)行時間
viewa.startAnimation(set);
// 動畫監(jiān)聽事件
set.setAnimationListener(new AnimationListener() {
// 動畫的開始
@Override
public void onAnimationStart(Animation animation) {
v.setVisibility(View.VISIBLE);
}
@Override
public void onAnimationRepeat(Animation animation) {
}
// 動畫的結(jié)束
@Override
public void onAnimationEnd(Animation animation) {
v.setVisibility(View.GONE);
}
});
}
/**
* @Description: 創(chuàng)建動畫層
* @param
* @return void
* @throws
*/
private ViewGroup createAnimLayout() {
ViewGroup rootView = (ViewGroup) ((Activity) this).getWindow()
.getDecorView();
LinearLayout animLayout = new LinearLayout(this);
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.MATCH_PARENT);
animLayout.setLayoutParams(lp);
animLayout.setId(Integer.MAX_VALUE);
animLayout.setBackgroundResource(android.R.color.transparent);
rootView.addView(animLayout);
return animLayout;
}
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;
}
/**
* 將drawable對象進(jìn)行指定大小的縮放
*
* @param drawable
* @param w
* @param h
* @return
*/
public Drawable zoomDrawable(Drawable drawable, int w, int h) {
int width = drawable.getIntrinsicWidth();
int height = drawable.getIntrinsicHeight();
Bitmap oldbmp = drawableToBitmap(drawable); // drawable 轉(zhuǎn)換成 bitmap
Matrix matrix = new Matrix(); // 創(chuàng)建操作圖片用的 Matrix 對象
float scaleWidth = ((float) w / width); // 計算縮放比例
float scaleHeight = ((float) h / height);
matrix.postScale(scaleWidth, scaleHeight); // 設(shè)置縮放比例
Bitmap newbmp = Bitmap.createBitmap(oldbmp, 0, 0, width, height,
matrix, true); // 建立新的 bitmap ,其內(nèi)容是對原 bitmap 的縮放后的圖
return new BitmapDrawable(newbmp); // 把 bitmap 轉(zhuǎn)換成 drawable 并返回
}
/**
* 將drawable 轉(zhuǎn)換成 bitmap
*
* @param drawable
* @return
*/
public Bitmap drawableToBitmap(Drawable drawable) {
int width = drawable.getIntrinsicWidth(); // 取 drawable 的長寬
int height = drawable.getIntrinsicHeight();
Bitmap.Config config = drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888
: Bitmap.Config.RGB_565; // 取 drawable 的顏色格式
Bitmap bitmap = Bitmap.createBitmap(width, height, config); // 建立對應(yīng)
// bitmap
Canvas canvas = new Canvas(bitmap); // 建立對應(yīng) bitmap 的畫布
drawable.setBounds(0, 0, width, height);
drawable.draw(canvas); // 把 drawable 內(nèi)容畫到畫布中
return bitmap;
}
// dp轉(zhuǎn)換為像素px
public static int dip2Px(Context context, float dp) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dp * scale + 0.5f);
}
}
下邊是布局文件中代碼
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="${relativePackage}.${activityClass}" >
<ImageView
android:id="@+id/top"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@drawable/cart_product_img"
android:onClick="startAnim"/>
<ImageView
android:id="@+id/bottom"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="@drawable/gouwuche_ico" />
</RelativeLayout>
點(diǎn)擊這里下載源碼
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android把商品添加到購物車的動畫效果(貝塞爾曲線)
- Android實現(xiàn)代碼畫虛線邊框背景效果
- Android編程實現(xiàn)ImageView圖片拋物線動畫效果的方法
- Android實現(xiàn)在map上畫出路線的方法
- Android App中使用SurfaceView制作多線程動畫的實例講解
- Android利用二階貝塞爾曲線實現(xiàn)添加購物車動畫詳解
- Android補(bǔ)間動畫基本使用(位移、縮放、旋轉(zhuǎn)、透明)
- Android動畫之漸變動畫(Tween Animation)詳解 (漸變、縮放、位移、旋轉(zhuǎn))
- Android開發(fā)之圖形圖像與動畫(二)Animation實現(xiàn)圖像的漸變/縮放/位移/旋轉(zhuǎn)
- Android利用Canvas標(biāo)點(diǎn)畫線并加入位移動畫(1)
相關(guān)文章
解決Android 5.1限制外置SD卡寫入權(quán)限的問題
今天小編就為大家分享一篇解決Android 5.1限制外置SD卡寫入權(quán)限的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Android-Service實現(xiàn)手機(jī)壁紙自動更換
這篇文章主要為大家詳細(xì)介紹了Android-Service實現(xiàn)手機(jī)壁紙自動更換,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-11-11
Android Service總結(jié)及詳細(xì)介紹
本文主要介紹Android Service的知識,這里整理了詳細(xì)資料及簡單實現(xiàn)示例代碼,有需要的小伙伴可以參考下2016-09-09
android listview實現(xiàn)新聞列表展示效果
這篇文章主要為大家詳細(xì)介紹了android listview實現(xiàn)新聞列表展示效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03
Android巧用ActionBar實現(xiàn)tab導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了Android巧用ActionBar實現(xiàn)tab導(dǎo)航效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-05
android實現(xiàn)漢字轉(zhuǎn)拼音功能 帶多音字識別
這篇文章主要介紹了android實現(xiàn)漢字轉(zhuǎn)拼音功能,帶多音字識別,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02

