Android实现的电子木鱼，功德+1...

最近被电子木鱼刷屏了，附近的同事也在敲木鱼....

本想着在百度上搜一个Android代码实现的down下来去装装逼（doge），但是没找到几个合适的....

so！我就自己写个简单的吧！

首先看一下电子木鱼大概的效果如下：

分析了下电子木鱼的效果主要包括以下几点：

1.点击木鱼时木鱼放大 -> 木鱼缩小

2.点击木鱼的同时会有文字弹出，频繁点击时频繁弹出文字

3.文字弹出时有随机的运动轨迹

代码实现（点击木鱼时木鱼放大 -> 木鱼缩小）：

//先来看木鱼的缩放如何实现
//我选取的是xml缩放动画方式实现
//xml如下↓<set xmlns:android="http://schemas.android.com/apk/res/android"><!--点击时放大1.15倍!--><scaleandroid:duration="25"android:fromXScale="1"android:fromYScale="1"android:pivotX="50%"android:pivotY="50%"android:toXScale="1.15"android:toYScale="1.15" /><!--然后缩小--><scaleandroid:duration="1"android:fromXScale="1"android:fromYScale="1"android:pivotX="50%"android:pivotY="50%"android:startOffset="400"android:toXScale="1"android:toYScale="1" /></set>


//Java代码如下：
private Animation animation;//动画实例
private ImageButton mMuYu;//木鱼的图片按键animation = AnimationUtils.loadAnimation(getContext(), R.anim.anim_small_big);
//使用AnimationUtils载入动画mMuYu.startAnimation(animation);
//在点击时调用startAnimation()方法即可

代码实现（点击木鱼的同时会有文字弹出，频繁点击时频繁弹出文字）：

//这部分我自己也想了一段时间
//一开始不太清楚如何频繁的创建TextView，后来请教了水友才知道可以使用rootView.addView()来实现
//即 点击的时候不断的向根布局内addView
//我的布局是用相对布局写的，在此不过多赘述，布局内仅包含木鱼图片和textView
//代码如下：
private RelativeLayout mRelativeLayout;
private TextView textView
mRelativeLayout = findViewById(R.id.muyu_layout);
//点击时调用下方代码
mRelativeLayout.addView(textView = new TextView(getContext()));
textView.setText("功德+1");
textView.setTextSize(20);
textView.setTextColor(Color.WHITE);

代码实现（文字弹出时有随机的运动轨迹）：

这部分困扰了我好长时间，原因如下：并未关注过View的坐标系和布局的坐标系，动画技术不了解，绘制技术不了解。

其实这种轨迹的实现更好的实现方式应该是用贝塞尔曲线来实现，但由于我比较菜所以我就开始取巧了。

首先来看下坐标系：坐标系主分为 Android坐标系（屏幕坐标系）和视图坐标系

Android坐标系（屏幕坐标系）即以屏幕的左上角的顶点作为Android坐标系的原点，这个原点向右是X轴正方向，原点向下是Y轴正方向，如下图所示。

视图坐标系如下图（这图可能在博客里面传了三代了）

下面回到刚才的问题上，弹出文字的轨迹如何实现。

看原效果可知，TextView弹出后的轨迹是先不断向上后逐渐向横轴偏移

分解开来就好办了，可以使用属性动画ObjectAnimator为创建的TextView设置纵向和横向的动画，只要随机的改变横向坐标，就可以做到 TextView的移动轨迹随机，代码如下：

//这是不断弹出TextView的代码
mRelativeLayout.addView(textView = new TextView(getContext()));
textView.setText("功德+1");
textView.setTextSize(20);
textView.setTextColor(Color.WHITE);//下方是实现轨迹动画的代码
AnimatorSet animSet = new AnimatorSet();
ObjectAnimator anim1 = ObjectAnimator.ofFloat(textView, "translationX", number, number);
//移动到屏幕中间
ObjectAnimator anim2 = ObjectAnimator.ofFloat(textView, "translationY", number, 0f);
//从木鱼移动到上端
ObjectAnimator anim3 = ObjectAnimator.ofFloat(textView, "alpha", 1f, 0f);
//移动过程中逐渐透明
AnimatorSet.Builder builder = animSet.play(anim2);
builder.with(anim1).with(anim2).with(anim3);//三个动画一起执行
animSet.setDuration(3500);//整个过程持续3.5s
animSet.start(); // 开始播放属性动画

其中的具体参数需要根据具体视图而定。

获取某一控件的坐标可以考虑使用onWindowFocusChanged

 public void onWindowFocusChanged(boolean hasWindowFocus) {super.onWindowFocusChanged(hasWindowFocus);int[] location = new int[2];mMuYu.getLocationOnScreen(location);//获取木鱼图片的坐标Log.e("LOCATION", location[0] + "->" + location[1]);//打印top坐标//location[0] -> x坐标，location[1] -> y坐标}

最后运行如下：

最后再加个点击计数TextView和敲击木鱼的声音即可，这里不过多赘述。

Demo回头我传到公众号上（二两仙气儿），欢迎小白一起交流学习。

Android实现的电子木鱼，功德+1...相关推荐

电子木鱼微信小程序源码今天你积功德了吗？
电子木鱼已经是火了很久的小程序了,今天闲来无事自己搞着玩玩.大家没事可以部署一个放松一下心情.纯属娱乐.大家可以点击看看我部署的项目. 1.首先新建一个微信小程序,这个我就不在演示了. 2.htm ...
Compose 动画api之我的电子木鱼青春版
提示:需要对基本的compose语法有所了解` 文章目录前言一.总体规划二.我的木鱼 1.敲击监听 pointerInput,detectTapGestures 2.木鱼动画 3.木鱼文字三. ...
最近非常火的电子木鱼流量主小程序源码
最近非常火的电子木鱼流量主小程序,希望大家也能凑个热度吧. 我看了一下那些人上线的就是手动敲木鱼,然后通过看激励视频自动敲,那么这个源码也是和他们所使用的一样敲木鱼,功德木鱼通过模拟真实木鱼来精心养 ...
静心解压，或许你需要一个电子木鱼
最近被一个客户翻来覆去的需求弄的心烦意乱,血压飙升.于是想起了前段时间特别火的电子木鱼. 打开微信搜索后发现排名前几的木鱼广告满天飞不说,页面还丑的可以. 行叭,谁让咱是程序员呢,咱自己做. 在头秃了 ...
电子木鱼网页版(教学+源码带注释)
近日在网上经常看见电子木鱼的案例,但都是做的小程序,本人就突发奇想,使用css和JavaScript在网页中实现这个功能.于是便有了这个文章.有细致的讲解,也把源码都放在了最后,没有耐心的小伙伴可以直 ...
用tkinter写一个简陋版的扣一佛主陪你笑，敲木鱼功德+1（附带源码）
#最近看地狱笑话看多了,连夜用tkinter写了一个自动化加功德的小程序,现在每天都看地狱笑话妈妈再也不怕我的功德不够了关于tkinter的使用方法后面还会讲解的每次学完后总是可能忘掉或者一时记不 ...
Android--简单电子木鱼开发详解
PS:素材和整个文件我都会放在最后请耐心看完~ 简单看下效果: 页面布局代码: <?xml version="1.0" encoding="utf-8"? ...
电子木鱼这么火？Python仅需50行代码实现（附代码，及素材）
背景效果展示代码素材背景最近在刷某音的时,发现一款电子木鱼非常的火爆.这款软件可以说是积功德的神器,敲一下功德+1,敲一下+1.成功的吸引了我的注意,便有了这个迷你项目.成功的复刻了其加功德 ...
.NET MAUI 开发电子木鱼（上）
本文介绍如何使用 .NET MAUI 开发一个电子木鱼应用.以实际的小应用开发为例,通过这个开发过程,介绍了其涉及的 .NET MAUI.Blazor.前端等相关知识点.文章涉及的应用已开源在 Git ...

Android实现的电子木鱼，功德+1...

Android实现的电子木鱼，功德+1...相关推荐

最新文章

热门文章