android 仿微信表情雨下落!

taixiang 2018-09-09 原文

android 仿微信表情雨下落!

文章链接:https://mp.weixin.qq.com/s/yQXn-YjEFSW1X7A7CcuaVg

众所周知,微信聊天中我们输入一些关键词会有表情雨下落,比如输入「生日快乐」「么么哒」会有相应的蛋糕、亲吻的表情雨下落,今天就来完成这个表情雨下落的效果。
先来看下效果,真·狗头雨·落!

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

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

欢迎关注我的博客:https://www.manjiexiang.cn/

更多精彩欢迎关注微信号:春风十里不如认识你
一起学习,一起进步,有问题随时联系,一起解决!!!

发表于 2018-09-09 17:49 程序猿tx 阅读() 评论() 编辑 收藏

 

版权声明:本文为taixiang原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/taixiang/p/9614380.html

android 仿微信表情雨下落!的更多相关文章

  1. RecyclerView android

    RecyclerView是用来替代ListView、GridView的一个牛掰的控件。用起来更灵活,还能实现线 […]...

  2. 【Android学习笔记】布局的简单介绍

    我在学习Android开发的时候是基于实战项目的,基础理论知识以前也是零散的看过一些,个人还是觉得边做项目边学 […]...

  3. Android App调用MediaRecorder实现录音功能的实例【转】

    本文转载自:http://www.jb51.net/article/82281.htm 这篇文章主要介绍了An […]...

  4. Android 的 Recovery 分析

    Android 的 Recovery 模式分析 Recovery Binary: (http://wenbin […]...

  5. Android APK方式换肤实现原理

    现在很多APP都有换肤的功能,例如微博,QQ等应用。这些应用的换肤原理是什么? 在用微博的时候,不难发现,当你 […]...

  6. Android P专区免费开放 — 同样的Android,不同的体验

    2018年3月8日,Google推出了Android P Preview版本,并提供官方镜像下载。   为了让 […]...

  7. android 实现页面跳转及数据的传递和返回

    1.实现效果: 原始界面:     —-传输数据-———> […]...

  8. Android开发在Activity外申请权限调用相机打开相册

    问题描述:   最近在项目中遇到一个需要调用相册和打开相机的需求,但是,在Android 6.0以后,调用相册 […]...

随机推荐

  1. JAVAEE——宜立方商城13:订单系统实现、订单生成、Mycat数据库分片

    1. 学习计划 1、订单系统实现 2、订单生成 3、Mycat数据库分片   2. 订单系统 2.1. 功能分 […]...

  2. web服务器配置

    web服务器配置 2019-04-30 08:50  喝热水哈  阅读(2848)  评论(0)  编辑  收 […]...

  3. 安防工程商必须知道的PoE供电真相

    问题一:何为PoE技术?   PoE (Power Over Ethernet)指的是在现有的以太网Cat.5 […]...

  4. 华为交换机端口镜像配置

    华为交换机端口镜像配置   端口镜像 通过配置镜像功能,可以将报文复制到特定的目的地进行分析,以进行网络监控和 […]...

  5. PL/SQL Developer工具包和InstantClient连接Oracle 11g数据库

    一、前言     PLSQL Developer是Oracle数据库开发工具,很牛也很好用,PLSQL Dev […]...

  6. Net Core集成Exceptionless分布式日志功能以及全局异常过滤

    Net Core集成Exceptionless分布式日志功能以及全局异常过滤 相信很多朋友都看过我的上篇关于E […]...

  7. Word文档分节设置页码

    在一篇论文中需要将摘要和目录作为一部分设置罗马数字页码,正文部分设置阿拉伯数字页码。 大致效果如下图所示:   […]...

  8. 理解这25个概念,你的人工智能,深度学习,机器学习才算入门!

    人工智能,深度学习,机器学习—无论你在做什么,如果你对它不是很了解的话—去学习它。否则的话不用三年你就跟不上时 […]...

展开目录

目录导航