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

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

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

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

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

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

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

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

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

代码实现(点击木鱼时 木鱼放大 -> 木鱼缩小):

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

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <!--点击时放大1.15倍!-->
    <scale
        android:duration="25"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.15"
        android:toYScale="1.15" />



    <!--然后缩小-->
    <scale
        android: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回头我传到公众号上(二两仙气儿),欢迎小白一起交流学习。

猜你喜欢

转载自blog.csdn.net/ezsxrtghjmk/article/details/128639672