本文實例為大家分享了Android仿天貓加入購物車的具體代碼,供大家參考,具體內容如下
先上效果圖
實現思路:
首先,我們需要三個Imagview
第一個是原商品圖片, 這個圖片是布局文件中創建的 我們稱作A
第二個是做動畫的圖片 這個我們是在代碼中創建的 我們稱作B
第三個是購物車圖片 這個圖片是布局文件中創建的 我們稱作C
接著,我們需要將A圖片設置給B
A圖片一般是聯網獲取到的,給Imagview設置圖片有兩種方式
如果是通過setBackgroundDrawable 那么就通過getBackground()獲取到Drawable對象,設置給B
如果是通過setImageDrawable 那么就通過getDrawable()獲取到Drawable對象,設置給B
再接著 我們獲取到A的位置 作為動畫開始的位置 獲取到C的位置 作為動畫結束的位置
然后 創建動畫圖層,開始執行動畫
這個動畫集合中,包括: 水平位移勻速平移 豎直方向加速平移 縮放動畫
最后 一定不要忘了 為我們的動畫集合添加監聽set.setAnimationListener
動畫執行前讓Imagview 可見 動畫執行后讓Imagview 不可見
下邊是MainActivity中的代碼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
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 ]; // 一個整型數組,用來存儲按鈕的在屏幕的X、Y坐標 top.getLocationInWindow(startLocation); // 這是獲取購買按鈕的在屏幕的X、Y坐標(這也是動畫開始的坐標) // 創建要做動畫的ImageView animImageView = new ImageView( this ); // 設置animImageView的背景 Drawable background = top.getBackground(); Drawable zoomDrawable = zoomDrawable(background, dip2Px( this , 200 ), dip2Px( this , 200 )); animImageView.setBackgroundDrawable(zoomDrawable); // 開始執行動畫 setAnim(animImageView, startLocation, top); } /** * 設置動畫 * * @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 ]; // 存儲動畫結束位置的X、Y坐標 bottom.getLocationInWindow(endLocation); // shopCart是那個購物車 // 計算位移 int endX = endLocation[ 0 ] - startLocation[ 0 ]; // 動畫位移的X坐標 int endY = endLocation[ 1 ] - startLocation[ 1 ]; // 動畫位移的y坐標 TranslateAnimation translateAnimationX = new TranslateAnimation( 0 , endX, 0 , 0 ); translateAnimationX.setInterpolator( new LinearInterpolator()); translateAnimationX.setRepeatCount( 0 ); // 動畫重復執行的次數 translateAnimationX.setFillAfter( true ); TranslateAnimation translateAnimationY = new TranslateAnimation( 0 , 0 , 0 , endY); translateAnimationY.setInterpolator( new AccelerateInterpolator()); translateAnimationY.setRepeatCount( 0 ); // 動畫重復執行的次數 translateAnimationX.setFillAfter( true ); ScaleAnimation scaleAnimation = new ScaleAnimation( 0 .6f, 0 .1f, 0 .6f, 0 .1f); scaleAnimation.setInterpolator( new AccelerateInterpolator()); scaleAnimation.setRepeatCount( 0 ); // 動畫重復執行的次數 scaleAnimation.setFillAfter( true ); AnimationSet set = new AnimationSet( false ); set.setFillAfter( false ); set.addAnimation(scaleAnimation); set.addAnimation(translateAnimationY); set.addAnimation(translateAnimationX); set.setDuration( 600 ); // 動畫的執行時間 viewa.startAnimation(set); // 動畫監聽事件 set.setAnimationListener( new AnimationListener() { // 動畫的開始 @Override public void onAnimationStart(Animation animation) { v.setVisibility(View.VISIBLE); } @Override public void onAnimationRepeat(Animation animation) { } // 動畫的結束 @Override public void onAnimationEnd(Animation animation) { v.setVisibility(View.GONE); } }); } /** * @Description: 創建動畫層 * @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對象進行指定大小的縮放 * * @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 轉換成 bitmap Matrix matrix = new Matrix(); // 創建操作圖片用的 Matrix 對象 float scaleWidth = (( float ) w / width); // 計算縮放比例 float scaleHeight = (( float ) h / height); matrix.postScale(scaleWidth, scaleHeight); // 設置縮放比例 Bitmap newbmp = Bitmap.createBitmap(oldbmp, 0 , 0 , width, height, matrix, true ); // 建立新的 bitmap ,其內容是對原 bitmap 的縮放后的圖 return new BitmapDrawable(newbmp); // 把 bitmap 轉換成 drawable 并返回 } /** * 將drawable 轉換成 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); // 建立對應 // bitmap Canvas canvas = new Canvas(bitmap); // 建立對應 bitmap 的畫布 drawable.setBounds( 0 , 0 , width, height); drawable.draw(canvas); // 把 drawable 內容畫到畫布中 return bitmap; } // dp轉換為像素px public static int dip2Px(Context context, float dp) { final float scale = context.getResources().getDisplayMetrics().density; return ( int ) (dp * scale + 0 .5f); } } |
下邊是布局文件中代碼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
< 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 > |
點擊這里下載源碼
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持服務器之家。
原文鏈接:https://blog.csdn.net/Jeff169/article/details/51523916