您好,登錄后才能下訂單哦!
本文實(shí)例為大家分享了Android實(shí)現(xiàn)水波紋擴(kuò)散效果的具體代碼,供大家參考,具體內(nèi)容如下
先上圖
囧!沒(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í)有所幫助,也希望大家多多支持億速云。
免責(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)容。