通过春节的无节操营销,支付宝的咻一咻功能让许多人手酸过、心酸过(没能中敬业福),在吐槽之余好奇的程序员总会猜想这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;}@Overridepublic void onAnimationStart(Animator animation) {}@Overridepublic void onAnimationEnd(Animator animation) {if (mAniView != null && mViewGroup != null) {mViewGroup.post(new Runnable() {@Overridepublic void run() {mViewGroup.removeView(mAniView);}});}}@Overridepublic void onAnimationCancel(Animator animation) {}@Overridepublic 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() {@Overridepublic 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 (感兴趣可以星下)