Android自定義View實(shí)現(xiàn)支付寶咻一咻效果
本篇文章介紹自定義View配合屬性動(dòng)畫來實(shí)現(xiàn)如下的效果

實(shí)現(xiàn)思路挺簡(jiǎ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>
很簡(jiǎn)單,就是改變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)支付寶咻一咻的幾種思路方法
以上就是本文的全部?jī)?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-09
Android編程實(shí)現(xiàn)GridView控件點(diǎn)擊圖片變暗效果的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)GridView控件點(diǎn)擊圖片變暗效果的方法,簡(jiǎn)單分析了GridView控件事件響應(yīng)及屬性操作的相關(guān)技巧,需要的朋友可以參考下2017-06-06
Android回調(diào)與觀察者模式的實(shí)現(xiàn)原理
這篇文章主要為大家詳細(xì)介紹了Android回調(diào)與觀察者模式的實(shí)現(xiàn)原理,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04
Android?Material組件庫日期選擇和時(shí)間選擇器的使用方法
這篇文章主要介紹了Android?Material組件庫(日期選擇和時(shí)間選擇器)基本使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
android系統(tǒng)拍照結(jié)合android-crop裁剪圖片
這篇文章主要為大家詳細(xì)介紹android系統(tǒng)拍照結(jié)合android-crop裁剪圖片,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
android 實(shí)現(xiàn)類似微信緩存和即時(shí)更新好友頭像示例
本篇文章主要介紹了android 實(shí)現(xiàn)類似微信緩存和即時(shí)更新好友頭像示例,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-01-01
Android自定義VIew實(shí)現(xiàn)衛(wèi)星菜單效果淺析
這篇文章主要介紹了Android自定義VIew實(shí)現(xiàn)衛(wèi)星菜單效果淺析,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11

