android 动态雨效果图,Android实现表情雨效果

前言

在一些比较花哨的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 表情雨执行监听,设置为null时则不监听执行效果

*/

public void startRain(List bitmapList,OnRainListener listener)

/**重置表情雨(供外部调用,一般在界面ondestroy时调用)**/

public void resetRain()

二.EmotionView在MainActivity中的使用

2.1 EmotionView布局中引用

下面贴出EmotionView在MainActivity对应布局activity_main.xml中代码：

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">

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" />

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" />

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 getBitmaps(){

Listlist=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源码: