Android实现表情雨效果

立即下载用AI写一个

发布时间：2020-02-21

1人 | 浏览：1658次 | 收藏 |

技术：android+jdk1.8

运行环境：androidstudio

概述

自定义控件，实现表情雨(撒花)效果，可监听动效的开始与结束，调用方便。

详细

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

今天涉及的内容有：
1. EmotionView的方法介绍
2. EmotionView在MainActivity中的使用
    2.1 EmotionView布局中引用
    2.2 EmotionView在代码中使用
3. 效果图及项目结构图

先来波效果图
![](/contentImages/image/20200221/Z2PPE0XQVDWLogjWj8J.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">

<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("=====表情雨重置========");
        }
    }
}
```
#### 三.效果图及项目结构图
效果图如下：
![](/contentImages/image/20200221/Z2PPE0XQVDWLogjWj8J.gif)

项目结构图如下：
![](/contentImages/image/20200221/WLTKNpip4qcinAVPS1d.png)

ok，今天的内容就讲到这里了，谢谢大家。

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

Android实现表情雨效果

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子