Android實(shí)現(xiàn)支付寶螞蟻森林水滴浮動(dòng)效果
可以有多個(gè)水滴，可以控制位置，水滴上下浮動(dòng)。點(diǎn)擊水滴產(chǎn)生搜集動(dòng)畫，水滴向樹移動(dòng)并逐漸消失，如圖：
那么是如何實(shí)現(xiàn)的呢，下面我們一步步來分析：
1、定義一個(gè)繼承Relativelayout 的子類作為容器放置多個(gè)水滴并在Onlayout()中設(shè)置子控件的位置
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
final int count = getChildCount();
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
int childWidth = child.getMeasuredWidth();
int childHeight = child.getMeasuredHeight();
if (child.getVisibility() != GONE) {
child.layout(listX.get(i), listY.get(i), childWidth + listX.get(i), childHeight + listY.get(i));
}
}
}
上面代碼最重要的就是child.layout()函數(shù)，前兩個(gè)參數(shù)為子控件的位置，這我先去盜個(gè)圖：
如圖，前兩個(gè)參數(shù)分別為getLeft 和getTop，后兩個(gè)參數(shù)分別為getRight和getBottom;前兩個(gè)參數(shù)其實(shí)是我們重外界傳進(jìn)來的子坐標(biāo)列表，代碼如下：
List<Integer> listX = new ArrayList<>();
List<Integer> listY = new ArrayList<>();
public void setChildPosition(int posx, int posy) {
listX.add(posx);
listY.add(posy);
}
對(duì)于后面兩個(gè)參數(shù)我們需要先獲取子控件的寬高；然后在疊加上前面兩個(gè)參數(shù)就是我們需要的坐標(biāo)，在上面代碼中可以看到我們是通過child.getmeasure來獲取的寬高，但在獲取寬高之前我們還需要去測(cè)量子空間的寬高。這個(gè)測(cè)量需要在measure()中完成：
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
measureChildren(widthMeasureSpec, heightMeasureSpec);
}
至此，我們的父容器已經(jīng)設(shè)計(jì)完成，接下來我們需要自己定義子控件以及子控件的動(dòng)畫，首先是一個(gè)浮動(dòng)的動(dòng)畫，因?yàn)槲覀冞@里后面需要監(jiān)聽點(diǎn)擊動(dòng)作，所以最好使用屬性動(dòng)畫完成，如下：
private void doRepeatAnim() {
ObjectAnimator animator = ObjectAnimator.ofFloat(this, "translationY", -padding, padding, -padding);
animator.setRepeatMode(ObjectAnimator.REVERSE);
animator.setRepeatCount(ObjectAnimator.INFINITE);
animator.setDuration(1500);
animator.start();
}
就是讓其沿Y軸上下移動(dòng)，設(shè)置為INFINTE則為無限重復(fù)動(dòng)畫；第二個(gè)動(dòng)畫就是我們點(diǎn)擊的時(shí)候，子控件會(huì)移動(dòng)到某個(gè)特定的位置并逐漸消失：
this.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
doSetAnim();
}
});
private void doSetAnim() {
if (isCollect) return;
isCollect = true;
ObjectAnimator move1 = ObjectAnimator.ofFloat(this, "translationX", startWidth, endWidth);
ObjectAnimator move2 = ObjectAnimator.ofFloat(this, "translationY", startHeight, endHeight);
ObjectAnimator move3 = ObjectAnimator.ofFloat(this, "alpha", 1, 0);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(move1, move2, move3);
animatorSet.setDuration(1500);
animatorSet.start();
}
里面我添加了isCollect 判斷，用于處理點(diǎn)擊事件重復(fù)生效的問題，這里是一個(gè)動(dòng)畫組合，重當(dāng)前位置移動(dòng)到特定位置同時(shí)透明度也不斷的變淡。寫動(dòng)畫的時(shí)候特別應(yīng)該注意一個(gè)問題就是當(dāng)前的所有位置都不是外面?zhèn)鬟M(jìn)來的位置而是以當(dāng)前控件初始位置為參考的相對(duì)位置，因?yàn)槲覀冊(cè)诟缚丶臅r(shí)候就設(shè)定好了子控件的位置，不能再次進(jìn)行重復(fù)設(shè)定不然會(huì)疊加，所以上面的startwidth 和startHeight其實(shí)都是0，endWidth 和endHeight也是結(jié)束位置減去控件移動(dòng)的初始位置：
/**
* @param context
*/
public WaterView(Context context) {
super(context);
this.context = context;
endWidth = (int) DeviceUtils.dpToPixel(context, 160);
endHeight = (int) DeviceUtils.dpToPixel(context, 300);
padding = (int) DeviceUtils.dpToPixel(context, 10);
startWidth = 0;
startHeight = 0;
}
/**
* @param index
* @param startWidth 開始坐標(biāo) X
* @param startHeight 開始坐標(biāo) Y
*/
public void setPosition(int index, int startWidth, int startHeight) {
this.index = index;
endWidth = endWidth - startWidth;
endHeight = endHeight - startHeight;
}
，在設(shè)置動(dòng)畫之前，我們還缺少初始化控件的步驟，這個(gè)步驟就是繪制背景控件，這個(gè)過程在ondraw()方法中進(jìn)行：
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mMWidth = getMeasuredWidth();
mHeight = getMeasuredHeight();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(getResources().getColor(R.color.color_87d1ab));
mPaint.setStyle(Paint.Style.FILL);
canvas.drawCircle(mMWidth / 2, (float) mHeight / 2, DeviceUtils.dpToPixel(context, 30), mPaint);
mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setColor(Color.WHITE);
mTextPaint.setTextSize(DeviceUtils.dpToPixel(context, 30));
mTextPaint.setColor(getResources().getColor(R.color.text_color_fc));
mTextPaint.setStyle(Paint.Style.FILL);
float width = mTextPaint.measureText(text);
canvas.drawText(text, mMWidth / 2 - width / 2, (float) mHeight * 0.65f, mTextPaint);
doRepeatAnim();
this.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
doSetAnim();
}
});
}
如上，我繪制了一個(gè)純色的園和特定的文字。當(dāng)子控件繪制完成后才進(jìn)行的動(dòng)畫。
最后就是如何使用我們剛才做好了輪子啦，請(qǐng)看代碼：
@Override
protected void onStart() {
super.onStart();
int posx = (int) DeviceUtils.dpToPixel(this, 70);
int posy = (int) DeviceUtils.dpToPixel(this, 70);
addChildView(this, relative, 1, posx, posy);
addChildView(this, relative, 2, 2 * posx, 2 * posy);
addChildView(this, relative, 3, 3 * posx, posy);
}
/**
* 添加子水滴
*
* @param relative
* @param index 第幾個(gè)
* @param posx 子控件初始位置x
* @param posy 子控件初始位置y
*/
private void addChildView(final Context context, final WaterContainer relative, final int index, final int posx, final int posy) {
relative.postDelayed(new Runnable() {
@Override
public void run() {
int width = (int) DeviceUtils.dpToPixel(context, 60);
int height = (int) DeviceUtils.dpToPixel(context, 60);
ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(width, height);
WaterView waterView = new WaterView(context);
waterView.setPosition(index, posx, posy);
waterView.setLayoutParams(layoutParams);
relative.setChildPosition(posx, posy);
relative.addView(waterView);
}
}, (index - 1) * 300);
}
在添加代碼里面，我添加了一個(gè)延時(shí)，這樣每個(gè)添加的子水滴就會(huì)不同步的上下跳動(dòng)，看起來更為真實(shí)，如果你有更好的辦法請(qǐng)一定記得告訴我，上面的代碼就是通過LayoutParams先設(shè)定子控件的布局,再把子控件添加到父容器中去。可以實(shí)現(xiàn)重復(fù)調(diào)用，就是這么簡(jiǎn)單。
最后給出項(xiàng)目的github地址：鏈接地址
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- android 實(shí)現(xiàn)按鈕浮動(dòng)在鍵盤上方的實(shí)例代碼
- Android實(shí)現(xiàn)圖片浮動(dòng)隨意拖拽效果
- Android 浮動(dòng)編輯框的具體實(shí)現(xiàn)代碼
- Android利用浮動(dòng)窗口提示用戶操作
- 安卓(android)仿電商app商品詳情頁按鈕浮動(dòng)效果
- Android自定義ViewGroup實(shí)現(xiàn)標(biāo)簽浮動(dòng)效果
- Android應(yīng)用中制作選中后圖標(biāo)變大浮動(dòng)效果的代碼分享
- Android浮動(dòng)窗口實(shí)現(xiàn)原理及代碼實(shí)例
相關(guān)文章
Android項(xiàng)目實(shí)戰(zhàn)之ListView懸浮頭部展現(xiàn)效果實(shí)現(xiàn)
這篇文章主要給大家介紹了Android項(xiàng)目實(shí)戰(zhàn)之ListView懸浮頭部展現(xiàn)效果實(shí)現(xiàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了Android編程之TextView的字符過濾功能,結(jié)合實(shí)例形式分析了TextView控件實(shí)現(xiàn)字符過濾的相關(guān)技巧與使用方法,需要的朋友可以參考下2016-01-01
這篇文章主要為大家介紹了提示信息控件AlertDialog對(duì)話框的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了AndroidStudio手勢(shì)識(shí)別，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Android獲取apk簽名指紋的md5值(防止重新被打包)的實(shí)現(xiàn)方法
這篇文章主要介紹了Android獲取apk簽名指紋的md5值以防止重新被打包的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了Android獲取apk md5值的常用技巧,需要的朋友可以參考下2016-07-07
Android Studio中引入Lambda表達(dá)式的方法
這篇文章主要給大家介紹了在Android Studio中引入Lambda表達(dá)式的方法，文中通過圖文介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
本篇文章主要介紹了Android Tiny集成圖片壓縮框架的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
Android小組件添加到主屏幕(手機(jī)桌面)的方法實(shí)例
很多在多年前使用過Android手機(jī)的朋友,可能對(duì)于Android 4.0時(shí)代盛行的桌面小組件功能有著很深的印象,下面這篇文章主要給大家介紹了關(guān)于Android小組件添加到主屏幕(手機(jī)桌面)的相關(guān)資料,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了android仿支付寶、微信密碼輸入框效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
Android開發(fā)vsts?agent支持自定義task過程詳解
這篇文章主要介紹了Android開發(fā)vsts?agent支持自定義task過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04