android仿微信表情雨下落效果的實現(xiàn)方法
前言
眾所周知,微信聊天中我們輸入一些關(guān)鍵詞會有表情雨下落,比如輸入「生日快樂」「么么噠」會有相應(yīng)的蛋糕、親吻的表情雨下落,今天就來完成這個表情雨下落的效果。下面話不多說了,來一起看看詳細的介紹吧
效果圖
先來看下效果,真·狗頭雨·落!

實現(xiàn)代碼
確認表情的模型,定義屬性
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<>();
}
}
初始化表情雨數(shù)據(jù),確認每個表情的起始位置,下落過程中橫向、縱向的偏移,以及縮放大小。
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) ,即左右搖擺區(qū)間
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) {
//用于判斷表情下落結(jié)束,結(jié)束即不再進行重繪
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()) {//當表情仍在視圖內(nèi),則繼續(xù)重繪
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() 方法觸發(fā)。
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 點擊事件觸發(fā)
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 (本地下載)
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
Flutter中數(shù)據(jù)存儲的四種方式小結(jié)
在 Flutter 中,存儲是指用于本地和遠程存儲和管理數(shù)據(jù)的機制,本給大家介紹了Flutter中不同存儲選項的概述和示例,通過代碼示例講解的非常詳細,具有一定的參考價值,需要的朋友可以參考下2023-11-11
Android使用ViewFlipper和GestrueDetector共同實現(xiàn)滑屏效果實例
這篇文章主要介紹了Android使用ViewFlipper和GestrueDetector共同實現(xiàn)滑屏效果,結(jié)合完整實例形式分析了ViewFlipper和GestrueDetector控件實現(xiàn)滑屏功能的布局與相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
ionic監(jiān)聽android返回鍵實現(xiàn)“再按一次退出”功能
本篇文章主要介紹了ionic監(jiān)聽android返回鍵實現(xiàn)“再按一次退出”功能,非常具有實用價值,需要的朋友可以參考下2018-02-02
Android自定義View實現(xiàn)仿GitHub的提交活躍表格
這篇文章主要介紹了Android自定義View實現(xiàn)仿GitHub的提交活躍表格,非常不錯,具有參考借鑒價值,需要的的朋友參考下吧2017-01-01
android4.0混淆XmlPullParser報錯原因分析解決
今天,用android4.0在proguard-project.txt中加入 -libraryjars libs/ksoap2-android-assembly-2.6.0-jar-with-dependencies.jar這句話后,混淆時報上面的錯誤,下面與大家分享下具體的解決方法2013-06-06
Android?APP瘦身shrinkResources使用問題詳解
這篇文章主要為大家介紹了Android?APP瘦身shrinkResources使用問題詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11
Android自定義View之RadioGroup實現(xiàn)跨多行顯示
這篇文章主要介紹了Android自定義View之RadioGroup實現(xiàn)跨多行顯示,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-11-11
Android開發(fā)之使用ExifInterface獲取拍照后的圖片屬性
這篇文章主要介紹了Android開發(fā)之使用ExifInterface獲取拍照后的圖片屬性,較為詳細的分析了ExifInterface類操作圖片的具體使用技巧,需要的朋友可以參考下2016-01-01

