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. HTC Android 移动网络设置(转)

    转自:http://mm800805.blog.51cto.com/617733/386729   HTC G […]...

  2. Android 实现界面(Activity)的跳转

    界面跳转 如,我想重一个界面A跳转到界面B,可以用,setContentView(R.layout.activ […]...

  3. 详解 Handler 消息处理机制(附自整理超全 Q&A)

    Android 为什么要用消息处理机制 如果有多个线程更新 UI,并且没有加锁处理,会导致界面更新的错乱,而如 […]...

  4. Android JNI 学习(二):JNI 设计概述

    Android JNI 学习(二):JNI 设计概述 本章我们重点说明以下JNI设计的问题,本章中提到的大多数 […]...

  5. Android开发——Drawable与Bitmap知识

    从资源中获得drawable Drawable drawable = getResources().getDr […]...

  6. BottomNavigationView的使用

    BottomNavigationView的使用   废话少说, 先看东西      依赖   implemen […]...

  7. 【朝花夕拾】内存篇之(三)Java GC

            在上一篇日志中有讲到,JVM内存由程序计数器、虚拟机栈、本地方法栈、GC堆,方法区五个部分组成 […]...

  8. Android Studio下载与安装

    Android Studio下载与安装   1 2 3 4 5 分步阅读 百度经验:jingyan.baidu […]...

随机推荐

  1. Windbg程序调试系列2-内存泄露问题

    上篇文章给大家解释了Windbg的基本命令和说明,这一篇给大家介绍内存泄露场景的问题分析。 文章大纲: 描述问 […]...

  2. Net Core 基于AngleSharp的HTML转实体工具

     最近这几天在采集一些房产信息网站的二手房产数据。采用的是.net core 2.2+AngleSharp做的 […]...

  3. 主流的开源视频编解码项目及技术特点

    视频会议开发当中,我们主要采用一些开源的视频编码器进行视频的编解码,下面列举几个主流的开源视频编解码项目及技术 […]...

  4. DMZ区

    DMZ是英文“demilitarized zone”的缩写,中文名称为“隔离区”,也称“非军事化区”。它是为了 […]...

  5. jsp九大内置对象和四大作用域详解

    ...

  6. Boyer-Moore 算法 Leetcode169

    Boyer-Moore 算法 Leetcode169 Boyer-Moore 算法 Leetcode169 一 […]...

  7. JavaWeb——CSS总结

    CSS 记得大一下学期那会参加基地后就开始跟师兄师姐接触前端了,利用业余时间在站看各种视频。由于初次认知并且时 […]...

  8. Java中static关键字的详解

    Java中static关键字的详解 static关键字可以修饰方法和成员变量(不可以修饰局部变量,但是可以修饰 […]...

展开目录

目录导航