android 仿微信表情雨下落！

SHERlocked93 发布于2019-06-25 12:20 / 535人阅读

摘要：文章链接众所周知，微信聊天中我们输入一些关键词会有表情雨下落，比如输入生日快乐么么哒会有相应的蛋糕亲吻的表情雨下落，今天就来完成这个表情雨下落的效果。

文章链接：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 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();
}

布局文件

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/

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

私有云超融合服务器仿微信漂流瓶仿微信输入框 js仿微信语音 js仿微信视频

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/14402.html

react-native 金币彩带雨下落动画

摘要：下落动画左右摇摆动画主要用到的动画，动画是可以相互嵌套的通过外部传属性图片数组源代码地址这个地址里后续会记录平时学习工作中用到的方面的知识点，这会是一个长期的过程，我自己也会坚持下去。日常项目中，经常遇到一些表情雨/金币雨/彩带雨等下落的动画，之前做android原生的时候，写过类似的效果，主要通过自定义view 在onDraw里绘制下落的过程，具体可以看下我的这篇github地址andr...

lolomaco 2019-04-23 15:07 评论0 收藏0
小程序使用之自定义组件

摘要：今天要介绍的是小程序的自定义组件，类似的在做开发的过程中会用到自定义，封装成通用的组件可以在不同页面里重复使用可以将复杂的页面拆分成多个低耦合的模块，便于代码的维护。文章链接：https://mp.weixin.qq.com/s/3xPnDwLsg7pHc_xAmS1DUQ 在前一篇文章小程序使用之WXS中，介绍了关于 wxs 的使用，通过wxs处理数据再渲染到view层，可以简...

Ververica 2019-08-02 12:09 评论0 收藏0
小程序使用之自定义组件

摘要：今天要介绍的是小程序的自定义组件，类似的在做开发的过程中会用到自定义，封装成通用的组件可以在不同页面里重复使用可以将复杂的页面拆分成多个低耦合的模块，便于代码的维护。文章链接：https://mp.weixin.qq.com/s/3xPnDwLsg7pHc_xAmS1DUQ 在前一篇文章小程序使用之WXS中，介绍了关于 wxs 的使用，通过wxs处理数据再渲染到view层，可以简...

ztyzz 2019-08-29 17:28 评论0 收藏0
Android实用库和项目 - 收藏集 - 掘金

摘要：高仿微信融云版掘金一简述本项目由个人独立开发。项目博客地址高仿微信融云版项目源码地址码云最新最全的开源项目合集掘金是由整理并维护的安卓相关开源项目库集合。 Android 高仿微信图片查看花式效果 - Android - 掘金图片查看器，为各位追求用户体验的daLao提供更优质的服务它能够 1、点击图片时以一种无缝顺畅的动画切换到图片查看的界面，同样以一种无缝顺畅的动画退出图片查看界...

darkbaby123 2019-06-25 11:14 评论0 收藏0
代码 - 收藏集 - 掘金

摘要：行代码的人脸识别实践产品掘金前言很多人都认为人脸识别是一项非常难以实现的工作，看到名字就害怕，然后心怀忐忑到网上一搜，看到网上页的教程立马就放弃了。掘金最新最全的开源项目合集掘金是由整理并维护的安卓相关开源项目库集合。安卓第三方登录之微信登录（图文详解） - Android - 掘金一、创建应用并成为开发者 1、创建应用 1)到微信开放平台管理中心，点击创建移动应用 ... 三步实现...

neuSnail 2019-06-25 11:27 评论0 收藏0