可以有多個(gè)水滴，可以控制位置，水滴上下浮動(dòng)。點(diǎn)擊水滴產(chǎn)生搜集動(dòng)畫，水滴向樹(shù)移動(dòng)并逐漸消失，如圖：
那么是如何實(shí)現(xiàn)的呢，下面我們一步步來(lái)分析：
1、定義一個(gè)繼承Relativelayout 的子類作為容器放置多個(gè)水滴并在Onlayout()中設(shè)置子控件的位置
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
@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)來(lái)的子坐標(biāo)列表，代碼如下：
|
1
2
3
4
5
6
7
|
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)，在上面代碼中可以看到我們是通過(guò)child.getmeasure來(lái)獲取的寬高，但在獲取寬高之前我們還需要去測(cè)量子空間的寬高。這個(gè)測(cè)量需要在measure()中完成：
|
1
2
3
4
5
|
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); measureChildren(widthMeasureSpec, heightMeasureSpec); } |
至此，我們的父容器已經(jīng)設(shè)計(jì)完成，接下來(lái)我們需要自己定義子控件以及子控件的動(dòng)畫，首先是一個(gè)浮動(dòng)的動(dòng)畫，因?yàn)槲覀冞@里后面需要監(jiān)聽(tīng)點(diǎn)擊動(dòng)作，所以最好使用屬性動(dòng)畫完成，如下：
|
1
2
3
4
5
6
7
|
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則為無(wú)限重復(fù)動(dòng)畫；第二個(gè)動(dòng)畫就是我們點(diǎn)擊的時(shí)候，子控件會(huì)移動(dòng)到某個(gè)特定的位置并逐漸消失：
|
1
2
3
4
5
6
|
this.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { doSetAnim(); } }); |
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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ù)生效的問(wèn)題，這里是一個(gè)動(dòng)畫組合，重當(dāng)前位置移動(dòng)到特定位置同時(shí)透明度也不斷的變淡。寫動(dòng)畫的時(shí)候特別應(yīng)該注意一個(gè)問(wèn)題就是當(dāng)前的所有位置都不是外面?zhèn)鬟M(jìn)來(lái)的位置而是以當(dāng)前控件初始位置為參考的相對(duì)位置，因?yàn)槲覀冊(cè)诟缚丶臅r(shí)候就設(shè)定好了子控件的位置，不能再次進(jìn)行重復(fù)設(shè)定不然會(huì)疊加，所以上面的startwidth 和startHeight其實(shí)都是0，endWidth 和endHeight也是結(jié)束位置減去控件移動(dòng)的初始位置：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
/** * @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 開(kāi)始坐標(biāo) X * @param startHeight 開(kāi)始坐標(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è)過(guò)程在ondraw()方法中進(jìn)行：
|
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
|
@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)看代碼：
|
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
|
@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)，看起來(lái)更為真實(shí)，如果你有更好的辦法請(qǐng)一定記得告訴我，上面的代碼就是通過(guò)LayoutParams先設(shè)定子控件的布局,再把子控件添加到父容器中去。可以實(shí)現(xiàn)重復(fù)調(diào)用，就是這么簡(jiǎn)單。
最后給出項(xiàng)目的github地址：鏈接地址
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/yangyong915/article/details/79012025
