Android仿天貓商品拋物線加入購物車動(dòng)畫
本文實(shí)例為大家分享了Android仿天貓加入購物車的具體代碼,供大家參考,具體內(nèi)容如下
先上效果圖
實(shí)現(xiàn)思路:
首先,我們需要三個(gè)Imagview
第一個(gè)是原商品圖片, 這個(gè)圖片是布局文件中創(chuàng)建的 我們稱作A
第二個(gè)是做動(dòng)畫的圖片 這個(gè)我們是在代碼中創(chuàng)建的 我們稱作B
第三個(gè)是購物車圖片 這個(gè)圖片是布局文件中創(chuàng)建的 我們稱作C
接著,我們需要將A圖片設(shè)置給B
A圖片一般是聯(lián)網(wǎng)獲取到的,給Imagview設(shè)置圖片有兩種方式
如果是通過setBackgroundDrawable 那么就通過getBackground()獲取到Drawable對(duì)象,設(shè)置給B
如果是通過setImageDrawable 那么就通過getDrawable()獲取到Drawable對(duì)象,設(shè)置給B
再接著 我們獲取到A的位置 作為動(dòng)畫開始的位置 獲取到C的位置 作為動(dòng)畫結(jié)束的位置
然后 創(chuàng)建動(dòng)畫圖層,開始執(zhí)行動(dòng)畫
這個(gè)動(dòng)畫集合中,包括: 水平位移勻速平移 豎直方向加速平移 縮放動(dòng)畫
最后 一定不要忘了 為我們的動(dòng)畫集合添加監(jiān)聽set.setAnimationListener
動(dòng)畫執(zhí)行前讓Imagview 可見 動(dòng)畫執(zhí)行后讓Imagview 不可見
下邊是MainActivity中的代碼
public class MainActivity extends Activity { private ImageView top; private ImageView bottom; private ImageView animImageView; private ViewGroup anim_mask_layout;// 動(dòng)畫層 @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];// 一個(gè)整型數(shù)組,用來存儲(chǔ)按鈕的在屏幕的X、Y坐標(biāo) top.getLocationInWindow(startLocation);// 這是獲取購買按鈕的在屏幕的X、Y坐標(biāo)(這也是動(dòng)畫開始的坐標(biāo)) // 創(chuàng)建要做動(dò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í)行動(dòng)畫 setAnim(animImageView, startLocation, top); } /** * 設(shè)置動(dòng)畫 * * @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);// 把動(dòng)畫小球添加到動(dòng)畫層 final View viewa = addViewToAnimLayout(anim_mask_layout, v, startLocation); int[] endLocation = new int[2];// 存儲(chǔ)動(dòng)畫結(jié)束位置的X、Y坐標(biāo) bottom.getLocationInWindow(endLocation);// shopCart是那個(gè)購物車 // 計(jì)算位移 int endX = endLocation[0] - startLocation[0];// 動(dòng)畫位移的X坐標(biāo) int endY = endLocation[1] - startLocation[1];// 動(dòng)畫位移的y坐標(biāo) TranslateAnimation translateAnimationX = new TranslateAnimation(0, endX, 0, 0); translateAnimationX.setInterpolator(new LinearInterpolator()); translateAnimationX.setRepeatCount(0);// 動(dòng)畫重復(fù)執(zhí)行的次數(shù) translateAnimationX.setFillAfter(true); TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0, 0, endY); translateAnimationY.setInterpolator(new AccelerateInterpolator()); translateAnimationY.setRepeatCount(0);// 動(dòng)畫重復(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);// 動(dòng)畫重復(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);// 動(dòng)畫的執(zhí)行時(shí)間 viewa.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) { } // 動(dòng)畫的結(jié)束 @Override public void onAnimationEnd(Animation animation) { v.setVisibility(View.GONE); } }); } /** * @Description: 創(chuàng)建動(dò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對(duì)象進(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 對(duì)象 float scaleWidth = ((float) w / width); // 計(jì)算縮放比例 float scaleHeight = ((float) h / height); matrix.postScale(scaleWidth, scaleHeight); // 設(shè)置縮放比例 Bitmap newbmp = Bitmap.createBitmap(oldbmp, 0, 0, width, height, matrix, true); // 建立新的 bitmap ,其內(nèi)容是對(duì)原 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 的長(zhǎng)寬 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); // 建立對(duì)應(yīng) // bitmap Canvas canvas = new Canvas(bitmap); // 建立對(duì)應(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)擊這里下載源碼
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android把商品添加到購物車的動(dòng)畫效果(貝塞爾曲線)
- Android實(shí)現(xiàn)代碼畫虛線邊框背景效果
- Android編程實(shí)現(xiàn)ImageView圖片拋物線動(dòng)畫效果的方法
- Android實(shí)現(xiàn)在map上畫出路線的方法
- Android App中使用SurfaceView制作多線程動(dòng)畫的實(shí)例講解
- Android利用二階貝塞爾曲線實(shí)現(xiàn)添加購物車動(dòng)畫詳解
- Android補(bǔ)間動(dòng)畫基本使用(位移、縮放、旋轉(zhuǎn)、透明)
- Android動(dòng)畫之漸變動(dòng)畫(Tween Animation)詳解 (漸變、縮放、位移、旋轉(zhuǎn))
- Android開發(fā)之圖形圖像與動(dòng)畫(二)Animation實(shí)現(xiàn)圖像的漸變/縮放/位移/旋轉(zhuǎn)
- Android利用Canvas標(biāo)點(diǎn)畫線并加入位移動(dòng)畫(1)
相關(guān)文章
Android編程單擊圖片實(shí)現(xiàn)切換效果的方法
這篇文章主要介紹了Android編程單擊圖片實(shí)現(xiàn)切換效果的方法,以實(shí)例形式分析了Android布局及切換功能的具體實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10解決Android 5.1限制外置SD卡寫入權(quán)限的問題
今天小編就為大家分享一篇解決Android 5.1限制外置SD卡寫入權(quán)限的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08Android實(shí)現(xiàn)短信發(fā)送功能
這篇文章主要介紹了Android實(shí)現(xiàn)短信發(fā)送功能,對(duì)Android實(shí)現(xiàn)短信發(fā)送的每一步都進(jìn)行了詳細(xì)的介紹,感興趣的小伙伴們可以參考一下2015-12-12Android-Service實(shí)現(xiàn)手機(jī)壁紙自動(dòng)更換
這篇文章主要為大家詳細(xì)介紹了Android-Service實(shí)現(xiàn)手機(jī)壁紙自動(dòng)更換,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11Android Service總結(jié)及詳細(xì)介紹
本文主要介紹Android Service的知識(shí),這里整理了詳細(xì)資料及簡(jiǎn)單實(shí)現(xiàn)示例代碼,有需要的小伙伴可以參考下2016-09-09android listview實(shí)現(xiàn)新聞列表展示效果
這篇文章主要為大家詳細(xì)介紹了android listview實(shí)現(xiàn)新聞列表展示效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03Android巧用ActionBar實(shí)現(xiàn)tab導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了Android巧用ActionBar實(shí)現(xiàn)tab導(dǎo)航效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05Android簡(jiǎn)易電話撥號(hào)器實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了Android簡(jiǎn)易電話撥號(hào)器實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07android實(shí)現(xiàn)漢字轉(zhuǎn)拼音功能 帶多音字識(shí)別
這篇文章主要介紹了android實(shí)現(xiàn)漢字轉(zhuǎn)拼音功能,帶多音字識(shí)別,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02