Android實現(xiàn)水波紋擴散效果

更新時間：2019年01月30日 10:06:56 作者：wu_liao_de_ren_sheng

這篇文章主要為大家詳細介紹了Android實現(xiàn)水波紋擴散效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Android實現(xiàn)水波紋擴散效果的具體代碼，供大家參考，具體內(nèi)容如下

先上圖

囧！沒有圖片所以就拿了小安代替了。

先看一下如何使用這個View。

<jianpan.com.mybutton.view.RippleDiffuse
 android:layout_width="200dp"
 android:layout_height="200dp"
 app:btn_img_res="@drawable/rd"
 app:ripple_img_res="@drawable/rd">
</jianpan.com.mybutton.view.RippleDiffuse>

是的，沒有別的代碼了，就這么簡單

實現(xiàn)思路

自定義ViewGroup，創(chuàng)建一個用顯示圖片的view，在創(chuàng)建幾個，大小相同的ImageView。當按下時，對這幾個ImageView進行放大和漸變。

代碼

首先它肯定是一個正方形。

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, widthMeasureSpec);
 if (!mInitDataSucceed){
 initData();
 }
}

顯示圖片的View的大小，該怎么給？這是個問題。給大了就看不到擴散效果了，給小，給多少的值合適呢？有沒有正好的值，有的用父 view 的 size / 子 view 放大的倍數(shù)，這樣肯定會達到理想的效果。

private static final int ANIMATION_EACH_OFFSET = 800; // 每個動畫的播放時間間隔
private static final int RIPPLE_VIEW_COUNT = 3;//波紋view的個數(shù)
private static final float DEFAULT_SCALE = 1.6f;//波紋放大后的大小

//點擊有擴散效果的view
private CircleImageView mBtnImg;
private int mBtnViewHeight;
private int mBtnViewWidth;
private float mScale = DEFAULT_SCALE;
//圖片資源
private int mBtnImgRes;
private int mRippleRes;
//是否初始化完成
private boolean mInitDataSucceed = false;

private void initData(){
 if (getMeasuredHeight() > 0 && getMeasuredWidth() > 0){
 mInitDataSucceed = true;

 int height = getMeasuredHeight() - getPaddingTop() - getPaddingBottom();
 int width = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
 mBtnViewHeight = (int) (height / mScale);
 mBtnViewWidth = (int) (width / mScale);

 mBtnImg = new CircleImageView(getContext());
 mBtnImg.setImageResource(mBtnImgRes);
 mBtnImg.setOnTouchListener(this);

 addView(mBtnImg, getWaveLayoutParams());

 for (int i = 0; i < RIPPLE_VIEW_COUNT; i++){
  //創(chuàng)建view
  CircleImageView wave = createWave();
  mWaves.add(wave);
  //創(chuàng)建動畫
  mAnimas.add(getNewAnimationSet());

  addView(wave, 0, getWaveLayoutParams());
 }
 }
}
private CircleImageView createWave(){
 CircleImageView CircleImageView = new CircleImageView(getContext());
 CircleImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
 CircleImageView.setImageResource(mRippleRes);
 return CircleImageView;
}

private LayoutParams getWaveLayoutParams(){
 LayoutParams lp = new LayoutParams(mBtnViewWidth, mBtnViewHeight);
 return lp;
}

private AnimationSet getNewAnimationSet() {
 AnimationSet as = new AnimationSet(true);
 ScaleAnimation sa = new ScaleAnimation(1f, mScale, 1f, mScale,
  ScaleAnimation.RELATIVE_TO_SELF, 0.5f,
  ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
 sa.setDuration(ANIMATION_EACH_OFFSET * 3);
 sa.setRepeatCount(-1);// 設(shè)置循環(huán)
 AlphaAnimation aniAlp = new AlphaAnimation(1, 0.1f);
 aniAlp.setRepeatCount(-1);// 設(shè)置循環(huán)
 as.setDuration(ANIMATION_EACH_OFFSET * 3);
 as.addAnimation(sa);
 as.addAnimation(aniAlp);
 return as;
}

View 都初始化完成了，好像還差一步，onLayout，只要把子 View 都顯示到中先就可以了。

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
 if (mInitDataSucceed) {
 int childLeft = (getMeasuredWidth() - mBtnViewWidth) / 2;
 int childTop = (getMeasuredHeight() - mBtnViewHeight) / 2;
 for (int i = 0; i < RIPPLE_VIEW_COUNT; i++) {
  CircleImageView wave = mWaves.get(i);
  wave.layout(childLeft, childTop, mBtnViewWidth + childLeft, mBtnViewHeight + childTop);
 }
 mBtnImg.layout(childLeft, childTop, mBtnViewWidth + childLeft, mBtnViewHeight + childTop);
 }else {
 initData();
 }
}

最后處理一下圖片的onTouch事件。

@Override
public boolean onTouch(View v, MotionEvent event) {
 switch (event.getAction()) {
 case MotionEvent.ACTION_DOWN:
  showWaveAnimation();
  break;
 case MotionEvent.ACTION_MOVE:
  break;
 case MotionEvent.ACTION_UP:
 case MotionEvent.ACTION_CANCEL:
  cancelWaveAnimation();
  break;
 default:
  cancelWaveAnimation();
  break;
 }
 return true;
}

private void showWaveAnimation() {
 for (int i = 0; i < RIPPLE_VIEW_COUNT; i++){
 Message message = new Message();
 message.obj = i;
 handler.sendMessageDelayed(message, ANIMATION_EACH_OFFSET * i);
 }
}

private void cancelWaveAnimation() {
 for (int i = 0; i < RIPPLE_VIEW_COUNT; i++){
 CircleImageView wave = mWaves.get(i);
 wave.clearAnimation();
 }
}

private Handler handler = new Handler() {
 @Override
 public void handleMessage(Message msg) {
 int position = (int) msg.obj;
 CircleImageView wave = mWaves.get(position);
 wave.startAnimation(mAnimas.get(position));
 super.handleMessage(msg);
 }
};

參考地址：Android實現(xiàn)水波紋外擴效果

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。