正文 

当前位置： 首页 > 程序 > java教程

android仿微信表情雨红包雨支持资源回收再利用(代码片段)

薛瑄 薛瑄     2022-12-02     161

关键词：

Github 项目：https://github.com/JantHsueh/EmojiRain 为了后续能及时看到更新，建议star一下，欢迎issue

表情雨 ViewGroup

微信聊天中的表情雨效果一样。

相比于其他项目的优点：

  1. 本项目使用了资源缓存复用机制，在无限循环中，不会出现占用内存增长的问题，所以不会GC（除非），更流畅
  2. 提供了丰富的自定义函数，可很大程度自定义效果

先来看下效果，太阳雨。(gif有点卡顿，因为录制屏幕时的帧率不够，在项目中是很流畅的)

使用教程

在项目的build.gradle 添加引用

    implementation 'me.xuexuan:emoji-rain:1.0.0'
	//为了减少版本冲突问题，库中没有引用constraintlayout，所以在自己的项目添加引用
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

例如：在布局文件中使用

<me.xuexuan.RainViewGroup
    android:id="@+id/testView"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  
</me.xuexuan.RainViewGroup>

它是一个viewGroup，继承ConstraintLayout。所以可以把它当做ConstraintLayout来使用

使用

获取到RainViewGroup的对象实例（例如：在java代码中，通过findViewById 获取）

调用start()，开启表情雨

    rainViewGroup = findViewById(R.id.testView);
    rainViewGroup.start();

调用stop()，关闭表情雨

    rainViewGroup.stop();

高级使用

项目提供了一些函数来实现自定义的效果

设置表情雨资源

setImgResId(mImgResId: Int)

设置表情缩放比例

setScale(scaleRandom: Int, scaleOffset: Int) 默认值是 setScale(30, 70)

在代码的实现var i = （mRandom.nextInt(xxxRandom) + xxxOffset）.toFloat() / 100f

例如：setScale(30, 70) 那么i的取值范围就是[0.7,1)

设置屏幕最多显示的表情数量

屏幕最多的表情数量，以下简称单屏数量，可以理解为，表情雨的密度

setAmount(num: Int = mAmount) 默认值是 20

设置表情雨次数

这里的次数，是指上面设置的表情数量的次数。在保持密度不变的情况下，设置下落数量。

setTimes(times: Int = INFINITE) 默认值是 1

例如：

  • A:单屏数量（密度） = 50，次数 = 3，总共数量150。
  • B:单屏数量（密度） = 50，次数 = 1，总共数量50。
  • c:单屏数量（密度） = 150，次数 = 1，总共数量150。
表情密度表情数量下落时间
A B相同A = 3*BA = 3*B
A CC = 3*A相同A = 3*B
B CC = 3*BC = 3*B相同

设置x，y轴偏移方向

设置x/y轴的偏移，每一次onDraw(),在上一次位置的基础上，在x/y轴上增加的偏移量。

    setX(xRandom: Int, xOffset: Int)
    setY(yRandom: Int, yOffset: Int)

默认值是setX(6，-3) setY(5，10)

在代码中的实现var i = mRandom.nextInt(xxxRandom) + xxxOffset

例如：setX(6，-3)， i的取值范围就是 [-3,3)

设置初始的横坐标位置

设置表情初始位置，x值的范围，也就在屏幕宽度指定的范围内落下。避免表情x = 0（x = 屏幕宽度）时，xOffset为负值（正值），落下很小的距离，表情就划出屏幕的问题。

setWidth(widthRandom: Int, widthOffset: Int) 默认值是setWidth(200，100)

在代码中的实现var i = mRandom.nextInt(getWidth() - xxxRandom) + xxxOffset，
例如：屏幕宽度是1080，setWidth(200，100)， i的取值范围就是 [980,100)

LICENSE

Copyright 2020 XueXuan

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

react-native金币彩带雨下落动画(代码片段)

...常遇到一些表情雨/金币雨/彩带雨等下落的动画，之前做android原生的时候，写过类似的效果，主要通过自定义view在onDraw里绘制下落的过程，具体可以看下我的这篇github地址android仿微信表情雨下落，现在转战react-native，同样可以... 查看详情

2017qq红包雨最强攻略

...果手机，而且要有苹果电脑，只有苹果手机是不行的。QQ红包规则：只要你到达指定的位置，就可以领取附近的红包，一般也就几毛，还有几分的，当然也不排除有更高的，只不过我是没遇到。。。那么既然是根据位置领红包，... 查看详情

更新一下我的红包雨

‘usestrict‘;(function($){//红包初始化varredEnvelope_defaults={imgSize_width:70,//红包的宽度px_class:‘envelope‘,//红包的样式imgEnvSrc:‘../images/game/envelopeRain/red_close.png‘,};var$envelopeObj=null;varInit;Init=(f 查看详情

仿淘宝,京东红包雨(基于phaser框架)

本红包雨项目是基于HTML5的游戏框架Phaser写的,最终形成的是一个canvas,所以性能很好,但是必须要说的是这个框架比较大,压缩后也有700K左右,所以请慎用.代码地址: https://github.com/AmosXu/red-packet-rain1.效果展示    &nbs... 查看详情

基于redis+lua脚本的设计红包雨(代码片段)

摘要：红包雨是一个典型的高并发场景，短时间内有海量请求访问服务端，为了让系统运行顺畅，抢红包采用了基于Redis+Lua脚本的设计方案。本文分享自华为云社区《红包雨中：Redis和Lua的邂逅》，作者... 查看详情

电商红包雨是如何实现的？拿去面试用（典型高并发）(代码片段)

...本深入讲解Java基础的干货笔记！想必大家应该都点过红包雨，就是各大电商大促时候都会搞的那个活动。那具体如何实现红包雨的功能呢？我们来看下勇哥的分享。我服务的一家电商公司也加入了这次热潮，技术... 查看详情

双11超值惊喜不间断，大咖直播：红包现金雨等你来抢！

查看详情

今天聊聊电商系统中红包活动设计(代码片段)

电商的营销玩法可谓花样百出，今天跟大家聊聊红包雨活动是如何设计技术方案的。红包雨是一个典型的高并发场景，短时间内有海量请求访问服务端，技术团队为了让系统运行顺畅，抢红包采用了基于 Redis+L... 查看详情

html5聊天案例|趣聊h5|仿微信界面聊天|红包|语音聊天|地图

之前有开发过一个h5微直播项目，当时里面也用到过聊天模块部分，今天就在之前聊天部分的基础上重新抽离模块，开发了这个h5趣聊项目，功能效果比较类似微信聊天界面。采用html5+css3+Zepto+swiper+wcPop+flex等技术融合开发，实现... 查看详情

最近写了一个红包雨的小功能，但感觉自己的js还有很多地方可以提高，望大神们可以帮忙指点一二

js部分1‘usestrict‘;2functionRedEnvelope(options){3if(this===window){4returnnewRedEnvelope(options);5}6vardefaults={7imgWidth:60,//红包的宽度8position:‘absolute‘,9imgEnvSrc:‘../images/game/redEnv/redEnv.png‘, 查看详情

红包雨架构设计---1技术架构

概述京东、淘宝的红包雨相信大家都参与过，其实业务并不复杂，在某段时间内随机发放不同的红包，用于进行抢单抽奖，直到奖品抽完。应用场景时间随机在一段时间内，设置一批礼品，这些礼品不定时... 查看详情

利用python实现黑客帝国代码雨，打造属于自己的黑客帝国

导语看安全类文章的时候，发现文章前面经常会加个代码雨的特效图，感觉拿来用python实现一下当成一个小案例还是不错的。让我们愉快地开始吧~开发工具**Python版本：**3.6.4相关模块：pygame模块；以及一些pyth... 查看详情

仿微信抢红包(js转)

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>仿微信抢红包</title><style>html,body,div{margin:0;padding:0;}body{background:#EAEAEA;font:16px/1.8"微软雅黑";paddi 查看详情

termux代码雨怎么弄

...一个记事本。2.创建以后在文件中输入代码。3.完成代码雨的代码编写以后，点击工具栏中的文件。然后再点击另存为。4.点击另存为以后，将下方的文件名的后缀改为“.bat”。文件名用户随意定义。修改好以后点击“保存”。5.... 查看详情

javascript实现仿微信抢红包

javascript实现仿微信抢红包 demo效果查看：http://www.w3cfuns.com/notes/14456/53bf08daf9b76230b39519fb399a006a实现代码如下：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>仿微信抢红包< 查看详情

代码雨实现原理与代码分析(代码片段)

...来无事，好奇代码雨是怎么实现的，早就听说是利用链表，但自己却想不出实现的思路，花了两个晚上把代码看完了，分析都在代码里，先看下效果吧。在贴代码之前先简单说下代码，方便读者加深理... 查看详情

我们公司要办个年会，有抽奖环节，求创意的抽奖方式？

...包礼品。实物奖品现场凭借兑换码兑换，现金可直接进入微信或者钉钉钱包，真的很方便！3：摇一摇互动摇一摇互动在微媒率先开发出来之后迅速风靡全国各大活动现场，当全场用户在同一刻同时疯狂摇动手机，氛围瞬间点燃... 查看详情

宣传片制作的运动镜头分析，你知道吗？流量雨短视频拍摄制作公司

在企业宣传片拍摄制作中，利用移动摄像方法拍摄的画面我们称之为运动镜头，也可以简称之为移动镜头。想运动镜头怎么样才可以拍好呢？流量雨短视频拍摄制作公司告诉你，运动镜头的拍摄就是利用轨道、索道、摇臂、车载... 查看详情