支付宝福卡破解——咻一咻的ui怎么实现

来源：互联网发布：网络模块怎么接线盒编辑：程序博客网时间：2024/04/30 08:36

通过春节的无节操营销，支付宝的咻一咻功能让许多人手酸过、心酸过（没能中敬业福），在吐槽之余好奇的程序员总会猜想这ui怎么实现的呢？

在不看smali代码的情况下应该都会猜想咻一咻的ui实现是这样的：点击一下按钮然后就促发图片（波纹）放大的动画，然后播放“咻咻”的mp3文件。

现在就献上破解之后的代码：

private void waveAnim(Context paramContext, ViewGroup paramViewGroup) {        if ((paramContext == null) || (paramViewGroup == null))            return;        ImageView localImageView = new ImageView(paramContext);        localImageView.setImageResource(R.drawable.wave_xiu);        RelativeLayout.LayoutParams localLayoutParams = new RelativeLayout.LayoutParams(-2, -2);        localLayoutParams.width = this.mBtnXiu.getWidth();        localLayoutParams.height = this.mBtnXiu.getHeight();        localImageView.setLayoutParams(localLayoutParams);        localImageView.setX(this.mBtnXiu.getX());        localImageView.setY(this.mBtnXiu.getY());        ObjectAnimator localObjectAnimator = ObjectAnimator.ofPropertyValuesHolder(localImageView, new PropertyValuesHolder[]{PropertyValuesHolder.ofFloat("alpha", new float[]{1.0F, 0.0F}), PropertyValuesHolder.ofFloat("scaleX", new float[]{1.2F, 4.0F}), PropertyValuesHolder.ofFloat("scaleY", new float[]{1.2F, 4.0F})});        localObjectAnimator.setDuration(1000L);        AnimatorSet localAnimatorSet = new AnimatorSet();        localAnimatorSet.playTogether(new Animator[]{localObjectAnimator});        localAnimatorSet.addListener(new XiuActivity.WaveAnimatarListener(localImageView, paramViewGroup));        paramViewGroup.addView(localImageView, 0);        localImageView.setVisibility(0);        localAnimatorSet.setInterpolator(new LinearInterpolator());        localAnimatorSet.start();    }

    private static class WaveAnimatarListener implements Animator.AnimatorListener {        private View mAniView;        private ViewGroup mViewGroup;        public WaveAnimatarListener(View view, ViewGroup viewGroup) {            mAniView = view;            mViewGroup = viewGroup;        }        @Override        public void onAnimationStart(Animator animation) {        }        @Override        public void onAnimationEnd(Animator animation) {            if (mAniView != null && mViewGroup != null) {                mViewGroup.post(new Runnable() {                    @Override                    public void run() {                        mViewGroup.removeView(mAniView);                    }                });            }        }        @Override        public void onAnimationCancel(Animator animation) {        }        @Override        public void onAnimationRepeat(Animator animation) {        }    }

 mp = MediaPlayer.create(this, R.raw.xiu);        setContentView(R.layout.activity_xiu);        mBtnXiu = (ImageView) this.findViewById(R.id.btn_xiu);        rlXiu = (RelativeLayout) this.findViewById(R.id.rl_xiu);        mBtnXiu.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                if (!mp.isPlaying()) {                    mp.start();                }                waveAnim(XiuActivity.this, rlXiu);            }        });

以上是咻一咻效果的代码，

主要思路是

1 在父控件创建一个子View（波纹）

2 将新建的子View和“咻一咻按钮”居中

3 启动放大的动画顺带消失动画

4 最重要的一步，在动画结束时把新建的子View（波纹）移除。

虽然很多人会想到是一个放大的动画来实现，但是在动画结束后移除子View可能没想到，如果没有移除子View点击1000次就会存在1000个子View并且不会被销毁导致内存不够用的情况，所以不得不说阿里对性能很有考虑

播放声音：在activity结束后也是要调用MediaPlayer 的 release方法来释放资源。

源代码： https://github.com/smallnew/XiuXiu （感兴趣可以星下）

0 0