溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Android實(shí)現(xiàn)水波紋擴(kuò)散效果

發(fā)布時(shí)間:2020-10-21 00:11:50 來(lái)源:腳本之家 閱讀:408 作者:wu_liao_de_ren_sheng 欄目:移動(dòng)開(kāi)發(fā)

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

先上圖

Android實(shí)現(xiàn)水波紋擴(kuò)散效果

囧!沒(méi)有圖片所以就拿了小安代替了。

先看一下如何使用這個(gè)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>

是的,沒(méi)有別的代碼了,就這么簡(jiǎn)單

實(shí)現(xiàn)思路

自定義ViewGroup,創(chuàng)建一個(gè)用顯示圖片的view,在創(chuàng)建幾個(gè),大小相同的ImageView。當(dāng)按下時(shí),對(duì)這幾個(gè)ImageView進(jìn)行放大和漸變。

代碼

首先它肯定是一個(gè)正方形。

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

顯示圖片的View的大小,該怎么給?這是個(gè)比較蛋疼的問(wèn)題。給大了就看不到擴(kuò)散效果了,給小,給多少的值合適呢?有沒(méi)有正好的值,有的用父 view 的 size / 子 view 放大的倍數(shù),這樣肯定會(huì)達(dá)到理想的效果。

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

//點(diǎn)擊有擴(kuò)散效果的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)建動(dòng)畫(huà)
  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實(shí)現(xiàn)水波紋外擴(kuò)效果

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI