android仿微信表情雨下落效果的实现方法

 更新时间:2018年09月10日 09:20:13   作者:程序猿tx  
这篇文章主要给大家介绍了关于android仿微信表情雨下落效果的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

众所周知,微信聊天中我们输入一些关键词会有表情雨下落,比如输入「生日快乐」「么么哒」会有相应的蛋糕、亲吻的表情雨下落,今天就来完成这个表情雨下落的效果。下面话不多说了,来一起看看详细的介绍吧

效果图

先来看下效果,真·狗头雨·落!


实现代码

确认表情的模型,定义属性

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<>();
 }
}

初始化表情雨数据,确认每个表情的起始位置,下落过程中横向、纵向的偏移,以及缩放大小。

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) ,即左右摇摆区间
 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()) {//当表情仍在视图内,则继续重绘
  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() 方法触发。

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 点击事件触发

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 (本地下载

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • 解析离线安装Eclipse的Android ADT开发插件的具体操作(图文)

    解析离线安装Eclipse的Android ADT开发插件的具体操作(图文)

    本篇文章是对离线安装Eclipse的Android ADT开发插件的具体操作进行了详细的分析介绍,需要的朋友参考下
    2013-05-05
  • Android自定义view实现左滑删除的RecyclerView详解

    Android自定义view实现左滑删除的RecyclerView详解

    RecyclerView是Android一个更强大的控件,其不仅可以实现和ListView同样的效果,还有优化了ListView中的各种不足。其可以实现数据纵向滚动,也可以实现横向滚动(ListView做不到横向滚动)。接下来讲解RecyclerView的用法
    2022-11-11
  • Android控件系列之XML静态资源使用介绍

    Android控件系列之XML静态资源使用介绍

    本文全面介绍了在Android中,如何充分利用XML布局文件来配合Java构筑界面,从而达到界面与逻辑的代码分离。另外,还介绍了如何分别在XML和代码中如何获取静态资源的值或者控件的实例
    2012-11-11
  • Android实现App中导航Tab栏悬浮的功能

    Android实现App中导航Tab栏悬浮的功能

    相信大家在玩手机的过程中应该会注意到很多的app都有这种功能,比如说外卖达人常用的“饿了么”。所以这篇文章给大家分享了Android如何实现app中的导航Tab栏悬浮的功能,有需要的朋友们可以参考借鉴。
    2016-10-10
  • Android高级图片滚动控件实现3D版图片轮播器

    Android高级图片滚动控件实现3D版图片轮播器

    这篇文章主要介绍了Android高级图片滚动控件实现3D版图片轮播器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Kotlin使用协程实现高效并发程序流程详解

    Kotlin使用协程实现高效并发程序流程详解

    这篇文章主要介绍了Kotlin使用协程实现高效并发程序流程,协程属于Kotlin中非常有特色的一项技术,因为大部分编程语言中是没有协程这个概念的。那么什么是协程呢?它其实和线程有点相似,可以简单地将它理解成一种轻量级的线程
    2023-01-01
  • Android List删除重复数据

    Android List删除重复数据

    这篇文章主要介绍了Android List删除重复数据的实例代码,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-06-06
  • Android仿微信界面的导航以及右上角菜单栏效果

    Android仿微信界面的导航以及右上角菜单栏效果

    这篇文章主要介绍了Android仿微信界面的导航以及右上角菜单栏效果,具有很好的参考价值,希望对大家有所帮助,一起跟随小编过来看看吧
    2018-05-05
  • 关于Android bitmap你不知道的一些事

    关于Android bitmap你不知道的一些事

    这篇文章主要为大家详细介绍了关于Android bitmap你不知道的一些事,使用bitmap需要注意的一些细节,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • Android实现合并生成分享图片功能

    Android实现合并生成分享图片功能

    这篇文章主要为大家详细介绍了Android实现合并生成分享图片功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-03-03

最新评论