android仿微信表情雨下落效果的實現(xiàn)方法

更新時間：2018年09月10日 09:20:13 作者：程序猿tx

這篇文章主要給大家介紹了關于android仿微信表情雨下落效果的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

眾所周知，微信聊天中我們輸入一些關鍵詞會有表情雨下落，比如輸入「生日快樂」「么么噠」會有相應的蛋糕、親吻的表情雨下落，今天就來完成這個表情雨下落的效果。下面話不多說了，來一起看看詳細的介紹吧

效果圖

先來看下效果，真·狗頭雨·落！

實現(xiàn)代碼

確認表情的模型，定義屬性

public class ItemEmoje {
 //坐標
 public int x;
 public int y;
 // 橫向偏移
 public int offsetX;
 //縱向偏移
 public int offsetY;
 //縮放
 public float scale;
 //圖片資源
 public Bitmap bitmap;
}

自定義RainView 表情下落視圖，初始化變量。

public class RainView extends View {
 private Paint paint;
 //圖片處理
 private Matrix matrix;
 private Random random;
 //判斷是否運行的，默認沒有
 private boolean isRun;
 //表情包集合
 private List<ItemEmoje> bitmapList;
 //表情圖片
 private int imgResId = R.mipmap.dog;

 public RainView(Context context) {
 this(context, null);
 }

 public RainView(Context context, @Nullable AttributeSet attrs) {
 this(context, attrs, 0);
 }

 public RainView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 init();
 }

 private void init() {
 paint = new Paint();
 paint.setAntiAlias(true);
 paint.setFilterBitmap(true);
 paint.setDither(true);
 matrix = new Matrix();
 random = new Random();
 bitmapList = new ArrayList<>();
 }
}

初始化表情雨數(shù)據(jù)，確認每個表情的起始位置，下落過程中橫向、縱向的偏移，以及縮放大小。

private void initData() {
 for (int i = 0; i < 20; i++) {
 ItemEmoje itemEmoje = new ItemEmoje();
 itemEmoje.bitmap = BitmapFactory.decodeResource(getResources(), imgResId);
 //起始橫坐標在[100,getWidth()-100) 之間
 itemEmoje.x = random.nextInt(getWidth() - 200) + 100;
 //起始縱坐標在(-getHeight(),0] 之間，即一開始位于屏幕上方以外
 itemEmoje.y = -random.nextInt(getHeight());
 //橫向偏移[-2,2) ，即左右搖擺區(qū)間
 itemEmoje.offsetX = random.nextInt(4) - 2;
 //縱向固定下落12
 itemEmoje.offsetY = 12;
 //縮放比例[0.8,1.2) 之間
 itemEmoje.scale = (float) (random.nextInt(40) + 80) / 100f;
 bitmapList.add(itemEmoje);
 }
}

下落過程通過 onDraw進行繪制，不斷的計算橫縱坐標，達到下落效果。

@Override
protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 if (isRun) {
 //用于判斷表情下落結束，結束即不再進行重繪
 boolean isInScreen = false;
 for (int i = 0; i < bitmapList.size(); i++) {
  matrix.reset();
  //縮放
  matrix.setScale(bitmapList.get(i).scale, bitmapList.get(i).scale);
  //下落過程坐標
  bitmapList.get(i).x = bitmapList.get(i).x + bitmapList.get(i).offsetX;
  bitmapList.get(i).y = bitmapList.get(i).y + bitmapList.get(i).offsetY;
  if (bitmapList.get(i).y <= getHeight()) {//當表情仍在視圖內，則繼續(xù)重繪
  isInScreen = true;
  }
  //位移
  matrix.postTranslate(bitmapList.get(i).x, bitmapList.get(i).y);
  canvas.drawBitmap(bitmapList.get(i).bitmap, matrix, paint);
 }
 if (isInScreen) {
  postInvalidate();
 }else {
  release();
 }
 }
}

/**
 *釋放資源
 */
private void release(){
 if(bitmapList != null && bitmapList.size()>0){
 for(ItemEmoje itemEmoje : bitmapList){
  if(!itemEmoje.bitmap.isRecycled()){
  itemEmoje.bitmap.recycle();
  }
 }
 bitmapList.clear();
 }
}

提供start() 方法觸發(fā)。

public void start(boolean isRun) {
 this.isRun = isRun;
 initData();
 postInvalidate();
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

 <com.rain.RainView
 android:id="@+id/testView"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />

 <Button
 android:id="@+id/btn_dog"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:text="真·狗頭雨·落！" />

 <Button
 android:id="@+id/btn_cake"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:layout_marginLeft="10dp"
 android:layout_toRightOf="@+id/btn_dog"
 android:text="蛋糕雨" />

</RelativeLayout>

activity 點擊事件觸發(fā)

btnCake.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 //蛋糕圖片
 rainView.setImgResId(R.mipmap.cake);
 rainView.start(true);
 }
});
btnDog.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 //狗頭圖片
 rainView.setImgResId(R.mipmap.dog);
 rainView.start(true);
 }
});

github地址：https://github.com/taixiang/rain_emoji （本地下載）

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

Android中的深度鏈接技術實戰(zhàn)
本文主要介紹了Android中的深度鏈接技術實戰(zhàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
Android Studio里如何使用lambda表達式
這篇文章主要介紹了Android Studio里如何使用lambda表達式,需要的朋友可以參考下
2017-05-05
android startActivityForResult的使用方法介紹
android startActivityForResult的使用方法介紹，需要的朋友可以參考一下
2013-05-05
新版Flutter集成到已有Android項目的實現(xiàn)
這篇文章主要介紹了新版Flutter集成到已有Android項目的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-03-03
Android編程設計模式之原型模式實例詳解
這篇文章主要介紹了Android編程設計模式之原型模式,結合實例形式詳細分析了Android設計模式之原型模式的概念、原理、定義、使用方法及相關注意事項,需要的朋友可以參考下
2017-12-12
Genymotion模擬器常見問題整理與相應解決方法
為什么說是常見問題整合呢，因為小編我就是Genymotion模板器最悲劇的使用者，該見過的問題，我基本都見過了，在此總結出這血的教訓，望大家不要重蹈覆轍
2018-03-03
Android AOP框架AspectJ使用詳解
本篇文章主要介紹了Android AOP框架AspectJ使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
實例解析Android ImageView的scaleType屬性
通過本文給大家介紹ImageView這個控件的一些使用方法，以及其最重要的一個屬性: scaleType，對imageview的scaletype相關知識感興趣的朋友一起學習吧
2016-01-01
android自定義AlertDialog對話框
這篇文章主要為大家詳細介紹了android自定義AlertDialog的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
Android onActivityResult和setResult方法詳解及使用
這篇文章主要介紹了Android onActivityResult和setResult方法詳解及使用的相關資料,這里提供實例，幫助大家學習理解，需要的朋友可以參考下
2016-12-12