前言

平時喜歡看今日頭條，上面的財經、科技和NBA欄目都很喜歡，無意中發現他的點贊動畫還不錯，一下子就吸引到了我。遂即想要不自己實現一下。
最終效果對比如下：
頭條：

仿寫效果：

一、導讀

學習的過程中發現，每個知識點都是一個小小的體系。比如Glide源碼解析，我看到有作者寫了10篇文章一個系列來解析（Glide源碼解析 https://www.jianshu.com/nb/45157164）；又比如自定義view，扔物線凱哥也是從三個方面(繪制、布局、動畫)11篇文章來敘述，Carson_Ho也是寫了一個系列來描述；
所以掌握一個知識點里面的知識體系還是需要下一些功夫的。

二、效果分析

1 點擊一次會撒出五個隨機表情和點擊音效；
2 連續點擊會連續撒出表情并播放音效；
3 長按會一直撒；
4 連續撒時會出現次數和標語(0-20 鼓勵，20-40加油，>40太棒了)；

三、實現過程

3.1 外層布局

因為今日頭條里面底部評論框和資訊列表頁都會有點贊按鈕，那么點贊效果的表情機會滿屏幕都存在，所以最外層繼承了RelativeLayout。然后寬高都設置match_parent。
在點擊按鈕的時候觸發OnTouch事件:

ivThumbBottom.setOnTouchListener(new View.OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) {if (event.getAction() == MotionEvent.ACTION_DOWN) {lastDownTime = System.currentTimeMillis();//獲取到 x y的坐標來確定動畫撒表情的起點x = (int) event.getRawX();y = (int) event.getRawY();Log.i("aaa", (System.currentTimeMillis() - lastDownTime) + "");handler.postDelayed(mLongPressed, 100);}if (event.getAction() == MotionEvent.ACTION_UP) {Log.i("aaa", (System.currentTimeMillis() - lastDownTime) + "");if (System.currentTimeMillis() - lastDownTime < 100) {//判斷為單擊事件articleThumbRl.setVisibility(View.VISIBLE);articleThumbRl.setThumb(true, x, y, articleThumbRl);handler.removeCallbacks(mLongPressed);} else {//判斷為長按事件后松開handler.removeCallbacks(mLongPressed);}}return true;}});

其中通過如下方式實現，長按循環撒表情。

final Runnable mLongPressed = new Runnable() {@Overridepublic void run() {articleThumbRl.setVisibility(View.VISIBLE);articleThumbRl.setThumb(x, y, articleThumbRl);handler.postDelayed(mLongPressed, 100);}};

3.2 setThumb方法 處理點擊事件

public void setThumb(float x, float y, ArticleRl articleThumbRl) {//這里處理音效播放if (mMediaPlayer.isPlaying()) {mMediaPlayer.seekTo(0);//重復點擊時，從頭開始播放} else {mMediaPlayer.start();}if (System.currentTimeMillis() - lastClickTime > 800) {//單次點擊addThumbImage(mContext, x, y, this);lastClickTime = System.currentTimeMillis();for (int i = getChildCount() - 5; i < getChildCount(); i++) {if (getChildAt(i) instanceof ThumbEmoji) {((ThumbEmoji) getChildAt(i)).setThumb(true, articleThumbRl);}}currentNumber = 0;if (thumbNumber != null) {removeView(thumbNumber);thumbNumber = null;}} else {//連續點擊lastClickTime = System.currentTimeMillis();Log.i(TAG, "當前動畫化正在執行");addThumbImage(mContext, x, y, this);for (int i = getChildCount() - 5; i < getChildCount(); i++) {if (getChildAt(i) instanceof ThumbEmoji) {((ThumbEmoji) getChildAt(i)).setThumb(true, articleThumbRl);}}currentNumber++;//這里添加數字連擊viewLayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);DisplayMetrics metrics = mContext.getResources().getDisplayMetrics();layoutParams.setMargins(600, (int) (y) - 300, 0, 150);if (thumbNumber == null) {thumbNumber = new ThumbNumber(mContext);addView(thumbNumber, layoutParams);//第二個參數 讓數字連擊始終保持在最上層}thumbNumber.setNumber(currentNumber);}}

其中，數字連擊view中的數字有一個顏色漸變和描邊效果，顏色漸變用LinearGradient（扔物線課程里面有），描邊用重疊繪制方式。

textPaint = new Paint();textPaint.setTextSize(TEXT_SIZE);textPaint.setTextAlign(Paint.Align.LEFT);textPaint.setStrokeWidth(STROKE_WIDTH);textPaint.setStyle(Paint.Style.FILL);textPaint.setTypeface(Typeface.DEFAULT_BOLD);//這里為了做成上面和下面顏色各一半LinearGradient mLinearGradient = new LinearGradient(0, 0, 0, 90f,new int[]{0xFFFF9641, 0xFFFF9641, 0xFFFF9641, 0xFFFF9641, 0xFFff0000, 0xFFff0000},null, Shader.TileMode.CLAMP);textPaint.setShader(mLinearGradient);//描邊畫筆textPaintStroke = new Paint();textPaintStroke.setColor(Color.BLACK);textPaintStroke.setTextSize(TEXT_SIZE);textPaintStroke.setTextAlign(Paint.Align.LEFT);textPaintStroke.setStrokeWidth(4);textPaintStroke.setStyle(Paint.Style.STROKE);textPaintStroke.setTypeface(Typeface.DEFAULT_BOLD);

3.3 添加表情的自定義view ThumbEmoji

private void addThumbImage(Context context, float x, float y, ThumbEmoji.AnimatorListener animatorListener) {List<Integer> list = new ArrayList<>();for (int i = 0; i < 8; i++) {list.add(i);}Collections.shuffle(list);//打亂順序for (int i = 0; i < 5; i++) {LayoutParams layoutParams = new LayoutParams(100, 100);layoutParams.setMargins((int) x, (int) y - 50, 0, 0);ThumbEmoji articleThumb = new ThumbEmoji(context);articleThumb.setEmojiType(list.get(i));articleThumb.setmAnimatorListener(animatorListener);if (getChildCount() > 1)this.addView(articleThumb, getChildCount() - 1, layoutParams);else {this.addView(articleThumb, layoutParams);}}}

其中這里的addview方法給他設置index為 childcount-1后，就可以讓它保持在數字連擊view的下方，但是我設置成1會出現bug，的原因我還得再去看看。

if (getChildCount() > 1)this.addView(articleThumb, getChildCount() - 1, layoutParams);else {this.addView(articleThumb, layoutParams);}

3.4 撒花效果的動畫（也就是拋物線動畫）的實現

拋物線動畫 分為上升和下降兩部分，
上升時，x軸勻速左移或右移，y軸減速向上，表情圖片寬高從0變到100；
下降時，x變為1.2倍x，高度變為最高處的0.8，透明度在最后1/8時間段里從1變為0。

private void showThumbDownAni(ArticleRl articleThumbRl) {float topX = -(1080 - 200) + (float) ((2160 - 400) * Math.random());float topY = -300 + (float) (-700 * Math.random());//上升動畫//拋物線動畫 x方向ObjectAnimator translateAnimationX = ObjectAnimator.ofFloat(this, "translationX",0, topX);translateAnimationX.setDuration(DURATION);translateAnimationX.setInterpolator(new LinearInterpolator());//y方向ObjectAnimator translateAnimationY = ObjectAnimator.ofFloat(this, "translationY",0, topY);translateAnimationY.setDuration(DURATION);translateAnimationY.setInterpolator(new DecelerateInterpolator());//表情圖片的大小變化ObjectAnimator translateAnimationRightLength = ObjectAnimator.ofInt(this, "rightLength",0, 100, 100, 100, 100, 100);translateAnimationRightLength.setDuration(DURATION);ObjectAnimator translateAnimationBottomLength = ObjectAnimator.ofInt(this, "bottomLength",0, 100, 100, 100, 100, 100);translateAnimationBottomLength.setDuration(DURATION);translateAnimationRightLength.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {invalidate();//ondraw會在什么情況下執行?}});//動畫集合AnimatorSet animatorSet = new AnimatorSet();animatorSet.play(translateAnimationX).with(translateAnimationY).with(translateAnimationRightLength).with(translateAnimationBottomLength);//下降動畫//拋物線動畫，原理：兩個位移動畫，一個橫向勻速移動，一個縱向變速移動，兩個動畫同時執行，就有了拋物線的效果。ObjectAnimator translateAnimationXDown = ObjectAnimator.ofFloat(this, "translationX", topX, topX * 1.2f);translateAnimationXDown.setDuration(DURATION / 5);translateAnimationXDown.setInterpolator(new LinearInterpolator());ObjectAnimator translateAnimationYDown = ObjectAnimator.ofFloat(this, "translationY", topY, topY * 0.8f);translateAnimationYDown.setDuration(DURATION / 5);translateAnimationYDown.setInterpolator(new AccelerateInterpolator());//透明度ObjectAnimator alphaAnimation = ObjectAnimator.ofFloat(this, "alpha", 1f, 1f, 1f, 1f, 1f, 1f, 1f, 0f);alphaAnimation.setDuration(DURATION / 5);AnimatorSet animatorSetDown = new AnimatorSet();//設置動畫播放順序//播放上升動畫animatorSet.start();animatorSet.addListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationEnd(Animator animation) {animatorSetDown.play(translateAnimationXDown).with(translateAnimationYDown).with(alphaAnimation);animatorSetDown.start();}});animatorSetDown.addListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationEnd(Animator animation) {articleThumbRl.removeView(ThumbEmoji.this);mAnimatorListener.onAnimationEmojiEnd();}});}

四、總結

項目github地址：https://github.com/honglei92/toutiaothumb
view是應用開發時常會接觸得的東西，從使用概念原理幾個方面我們需要深學細悟、研機析理，做到融會貫通。
apk地址：https://github.com/honglei92/toutiaothumb/blob/master/app/release/app-release.apk

五、參考文獻

[1]https://mp.weixin.qq.com/s/PlNtRiowKe9jUXhzPA-CNg
[2]https://github.com/arvinljw/ThumbUpSample
[3]https://mp.weixin.qq.com/s/JjeYAESAI8NnwFdJJUXqQA
[4]https://rengwuxian.com/105.html

總結

以上是生活随笔為你收集整理的自定义view仿写今日头条点赞动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。