前言
在一些比較花哨的app中，答題完畢，或點贊完畢，會有一個慶祝的動效。一般為"撒花"或"下雨"。那么，今天我們呢就來學習下"下雨"效果，即表情雨效果。EmotionView為我封裝的一個自定義表情雨控件，下面來講講它的使用。
今天涉及的內容有：
- EmotionView的方法介紹
- EmotionView在MainActivity中的使用
2.1 EmotionView布局中引用
2.2 EmotionView在代碼中使用 - 效果圖及項目結構圖
- EmotionView源碼
先來波效果圖
1.gif
一. EmotionView的方法介紹
EmotionView作為一個自定義view，實現了表情雨動畫效果，它有以下主要方法:
/**
* 設置時間
* @param duration 單位毫秒，默認2000，即2秒
*/
public EmotionView setDuration(int duration)
/**
* 開始下表情雨
* @param bitmapList 圖片資源數組
* @param listener 表情雨執(zhí)行監(jiān)聽,設置為null時則不監(jiān)聽執(zhí)行效果
*/
public void startRain(List<Bitmap> bitmapList,OnRainListener listener)
/**重置表情雨(供外部調用,一般在界面ondestroy時調用)**/
public void resetRain()
二.EmotionView在MainActivity中的使用
2.1 EmotionView布局中引用
下面貼出EmotionView在MainActivity對應布局activity_main.xml中代碼：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="@+id/tv"
android:layout_width="120dp"
android:layout_height="40dp"
android:layout_marginTop="50dp"
android:gravity="center"
android:text="Hello World!"
android:background="#ff0000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.otherdemo.emotion.EmotionView
android:id="@+id/emotion"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv" />
</androidx.constraintlayout.widget.ConstraintLayout>
2.2 EmotionView在代碼中使用
下面貼出EmotionView在MainActivity中使用代碼：
public class MainActivity extends AppCompatActivity {
private TextView mTv;
private EmotionView mEmotionView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTv=findViewById(R.id.tv);
mEmotionView=findViewById(R.id.emotion);
//點擊事件
mTv.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
LogUtil.i("=======我被點擊了======");
//設置圖片組并開始表情雨
mEmotionView.setDuration(1000)//設置下落時間2秒
.startRain(getBitmaps(), new EmotionView.OnRainListener() {
@Override
public void start() {
ToastUtil.shortShow("我是開始");
}
@Override
public void stop() {
ToastUtil.shortShow("我是結束");
}
});
}
});
}
private List<Bitmap> getBitmaps(){
List<Bitmap>list=new ArrayList<>();
Drawable drawable=ContextCompat.getDrawable(MainActivity.this, R.mipmap.ic_launcher);
Bitmap bitmap= drawableToBitmap(drawable);
list.add(bitmap);
list.add(bitmap);
list.add(bitmap);
list.add(bitmap);
return list;
}
/**
* Drawable轉換成一個Bitmap
*
* @param drawable drawable對象
* @return
*/
private Bitmap drawableToBitmap(Drawable drawable) {
Bitmap bitmap = Bitmap.createBitmap( drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(),
drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888 : Bitmap.Config.RGB_565);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
drawable.draw(canvas);
return bitmap;
}
@Override
protected void onDestroy() {
super.onDestroy();
if(mEmotionView!=null){
mEmotionView.resetRain();
LogUtil.i("=====表情雨重置========");
}
}
}
三.效果圖及項目結構圖
效果圖如下：
1.gif
項目結構圖如下：
image.png
四.EmotionView源碼
下面貼出EmotionView源碼:
