Android自定義View實(shí)現(xiàn)支付寶咻一咻效果
本篇文章介紹自定義View配合屬性動(dòng)畫來實(shí)現(xiàn)如下的效果
實(shí)現(xiàn)思路挺簡單:
- 畫一個(gè)半透明的圓
- 實(shí)現(xiàn)兩種動(dòng)畫效果,點(diǎn)擊時(shí)擴(kuò)散和不點(diǎn)擊時(shí)擴(kuò)散回收
- 使用線程的方式將上面兩步結(jié)合起來
首先看下畫半透明圓的部分
public class ClickCircleView extends View { private Bitmap bitmap; private Paint paint; private Canvas canvas; private boolean isSpreadFlag = false;//標(biāo)記是否發(fā)射完成 public boolean isSpreadFlag() { return isSpreadFlag; } public void setIsSpreadFlag(boolean isSpreadFlag) { this.isSpreadFlag = isSpreadFlag; } public ClickCircleView(Context context, int width, int height, int screenWidth, int screenHeight) { super(context); bitmap = Bitmap.createBitmap(screenWidth, screenHeight, Bitmap.Config.ARGB_8888); // 設(shè)置位圖的寬高 canvas = new Canvas(); canvas.setBitmap(bitmap); paint = new Paint(Paint.DITHER_FLAG); paint.setAntiAlias(true); paint.setColor(Color.WHITE); paint.setStyle(Paint.Style.FILL); paint.setAlpha(50); canvas.drawCircle(screenWidth / 2, screenHeight / 2, width / 2 + 10, paint); invalidate(); } @Override protected void onDraw(Canvas canvas) { canvas.drawBitmap(bitmap, 0, 0, null); } }
可以看到相關(guān)的屬性都是設(shè)置在畫筆上,然后直接調(diào)用畫布的drawCircle()方法畫出一個(gè)半透明的圓,最后調(diào)用invalidate()方法刷新View
一定要重寫父類的onDraw()方法,否則自定義View不能生效
我們?cè)O(shè)置了一個(gè)標(biāo)志位isSpreadFlag,作用是用來標(biāo)記擴(kuò)散動(dòng)畫是否完成
然后我們來實(shí)現(xiàn)兩個(gè)動(dòng)畫效果
點(diǎn)擊時(shí)擴(kuò)散動(dòng)畫
<set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:duration="1000" android:propertyName="scaleY" android:valueFrom="1.0" android:valueTo="1.8" android:valueType="floatType" /> <objectAnimator android:duration="1000" android:propertyName="scaleX" android:valueFrom="1.0" android:valueTo="1.8" android:valueType="floatType" /> </set>
很簡單,就是改變scale值,增大到1.8倍
不點(diǎn)擊時(shí)擴(kuò)散回收動(dòng)畫
<set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="together"> <objectAnimator android:duration="1000" android:propertyName="scaleX" android:valueFrom="1.0" android:valueTo="1.2" android:valueType="floatType" /> <objectAnimator android:duration="1000" android:propertyName="scaleY" android:valueFrom="1.0" android:valueTo="1.2" android:valueType="floatType" /> <objectAnimator android:duration="1000" android:propertyName="scaleX" android:startOffset="1000" android:valueFrom="1.2" android:valueTo="1.0" android:valueType="floatType" /> <objectAnimator android:duration="1000" android:propertyName="scaleY" android:startOffset="1000" android:valueFrom="1.2" android:valueTo="1.0" android:valueType="floatType" /> </set>
和上個(gè)動(dòng)畫類似,startOffset參數(shù)可以用來控制Animation的運(yùn)行順序,比如Android:startOffset=”1000”表示設(shè)置該屬性的動(dòng)畫延遲1秒執(zhí)行
然后就是用線程來執(zhí)行動(dòng)畫和邏輯的部分了
不點(diǎn)擊時(shí)的動(dòng)畫部分
mXiuyixiuButton.post(new Runnable() { @Override public void run() { clickCircleView = new ClickCircleView(CustomView1.this, mXiuyixiuButton.getWidth() , mXiuyixiuButton.getHeight(), mXiuyixiuLayout.getMeasuredWidth(), mXiuyixiuLayout.getMeasuredHeight()); clickCircleView.setVisibility(View.VISIBLE); mXiuyixiuLayout.addView(clickCircleView); mXiuyixiuLayout.postInvalidate(); // 加載動(dòng)畫 final Animator anim = AnimatorInflater.loadAnimator(CustomView1.this, R.animator.circle_scale_animator); anim.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { if (anim != null) { anim.start();//循環(huán)執(zhí)行動(dòng)畫 } } }); anim.setTarget(clickCircleView); anim.start(); } });
初始化好clickCircleView之后將這個(gè)view加入父布局中,然后加載動(dòng)畫并設(shè)置循環(huán)執(zhí)行,最后使用postInvalidate()在子線程中刷新view
點(diǎn)擊時(shí)的動(dòng)畫部分
mXiuyixiuButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { clickCircleView.setVisibility(View.GONE);//發(fā)射圓圈,即將循環(huán)動(dòng)畫View隱藏 final ClickCircleView item = new ClickCircleView(CustomView1.this, mXiuyixiuButton.getWidth() , mXiuyixiuButton.getHeight(), mXiuyixiuLayout.getWidth(), mXiuyixiuLayout.getHeight()); Animator spreadAnim = AnimatorInflater.loadAnimator(CustomView1.this, R.animator.circle_spread_animator); spreadAnim.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { item.setIsSpreadFlag(true);//動(dòng)畫執(zhí)行完成,標(biāo)記一下 } }); spreadAnim.setTarget(item); spreadAnim.start(); clickCircleViewList.add(item); mXiuyixiuLayout.addView(item); mXiuyixiuLayout.invalidate(); handler.post(circleViewRunnable); } });
隱藏不點(diǎn)擊動(dòng)畫,初始化好ClickCircleView后將該view加入List中并添加到父布局中,然后加載動(dòng)畫并在動(dòng)畫結(jié)束時(shí)添加isSpreadFlag標(biāo)記,最后調(diào)用invalidate()方法刷新view并開啟線程
線程部分
private Runnable circleViewRunnable = new Runnable() { public void run() { for (int i = 0; i < clickCircleViewList.size(); i++) { if (clickCircleViewList.get(i).isSpreadFlag()) { mXiuyixiuLayout.removeView(clickCircleViewList.get(i)); clickCircleViewList.remove(i); mXiuyixiuLayout.postInvalidate(); } } if (clickCircleViewList.size() <= 0) { clickCircleView.setVisibility(View.VISIBLE); } handler.postDelayed(this, 100); } };
遍歷list,將有isSpreadFlag標(biāo)記的view從list和父布局中移除并刷新view,最后判斷l(xiāng)ist如果為空的話將不點(diǎn)擊時(shí)的動(dòng)畫顯示出來
最后記得在onDestroy()里移除線程
@Override protected void onDestroy() { super.onDestroy(); handler.removeCallbacks(circleViewRunnable); }
使用自定義View配合屬性動(dòng)畫來實(shí)現(xiàn)該效果耦合性較高,只是這種方式相比完全使用自定義View來說更加流暢,該方式大部分參考別人博客上的代碼來實(shí)現(xiàn),但是如果僅僅只是就拿來用不總結(jié)是不會(huì)成為自己的知識(shí)的,因此有了這篇博客。
參考: android實(shí)現(xiàn)支付寶咻一咻的幾種思路方法
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android 自定義view仿支付寶咻一咻功能
- Android中RecyclerView布局代替GridView實(shí)現(xiàn)類似支付寶的界面
- Android波紋擴(kuò)散效果之仿支付寶咻一咻功能實(shí)現(xiàn)波紋擴(kuò)散特效
- Android app第三方支付寶支付接入教程
- Android支付寶支付封裝代碼
- Android支付寶和微信支付集成
- Android開發(fā)之實(shí)現(xiàn)GridView支付寶九宮格
- Android仿支付寶支付從底部彈窗效果
- Android支付寶支付設(shè)計(jì)開發(fā)
- 支付寶咻一咻怎么用 Android幫你實(shí)現(xiàn)咻一咻
相關(guān)文章
Android MediaPlayer 音頻倍速播放 調(diào)整播放速度問題
這篇文章主要介紹了Android MediaPlayer 音頻倍速播放,調(diào)整播放速度,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09Android編程實(shí)現(xiàn)GridView控件點(diǎn)擊圖片變暗效果的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)GridView控件點(diǎn)擊圖片變暗效果的方法,簡單分析了GridView控件事件響應(yīng)及屬性操作的相關(guān)技巧,需要的朋友可以參考下2017-06-06Android回調(diào)與觀察者模式的實(shí)現(xiàn)原理
這篇文章主要為大家詳細(xì)介紹了Android回調(diào)與觀察者模式的實(shí)現(xiàn)原理,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04Android?Material組件庫日期選擇和時(shí)間選擇器的使用方法
這篇文章主要介紹了Android?Material組件庫(日期選擇和時(shí)間選擇器)基本使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11android系統(tǒng)拍照結(jié)合android-crop裁剪圖片
這篇文章主要為大家詳細(xì)介紹android系統(tǒng)拍照結(jié)合android-crop裁剪圖片,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01android 實(shí)現(xiàn)類似微信緩存和即時(shí)更新好友頭像示例
本篇文章主要介紹了android 實(shí)現(xiàn)類似微信緩存和即時(shí)更新好友頭像示例,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-01-01Android自定義VIew實(shí)現(xiàn)衛(wèi)星菜單效果淺析
這篇文章主要介紹了Android自定義VIew實(shí)現(xiàn)衛(wèi)星菜單效果淺析,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11