Android实现表情雨效果

前言

在一些比较花哨的app中，答题完毕，或点赞完毕，会有一个庆祝的动效。一般为"撒花"或"下雨"。那么，今天我们呢就来学习下"下雨"效果，即表情雨效果。EmotionView为我封装的一个自定义表情雨控件，下面来讲讲它的使用。

今天涉及的内容有：

1. EmotionView的方法介绍
2. EmotionView在MainActivity中的使用
   2.1 EmotionView布局中引用
   2.2 EmotionView在代码中使用
3. 效果图及项目结构图
4. EmotionView源码

先来波效果图

1.gif

一. EmotionView的方法介绍

EmotionView作为一个自定义view，实现了表情雨动画效果，它有以下主要方法:

    /**
     * 设置时间
     * @param duration 单位毫秒，默认2000，即2秒
     */
    public EmotionView setDuration(int duration)

   /**
     * 开始下表情雨
     * @param bitmapList 图片资源数组
     * @param listener 表情雨执行监听,设置为null时则不监听执行效果
     */
    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源码: