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

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

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

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

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

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

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

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

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

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

//先来看木鱼的缩放如何实现
//我选取的是xml缩放动画方式实现
//xml如下↓



    
    



    
    

//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回头我传到公众号上（二两仙气儿），欢迎小白一起交流学习。