使用Android实现水波纹动画，插件形式可直接引用

浅浅的花香味﹌ 2021-09-21 15:20 578阅读 0赞

> **博客来源：**
> 
> 在一次项目修改中，水波纹的动画导致整体界面布局异常，发生了图标移动但是图标按键效果还在原来的位置
> 
> 为了排查这一问题，进行了大量的代码审查，最后发现是由于水波纹实现过程中为了加快水波纹效果速度导致的
> 
> setDrawingCacheEnabled(false);//如果动画效果不是很炫（浪费性能），还是设置为false吧

## 坑爬了，那就放点料来，下面就是水波纹实现 ##

本次实现是分为两部分

1、xml布局页面的引用。

2、java代码的效果渲染

3、最后附效果图

### 1、xml布局页面的引用 ###

<?xml version="1.0" encoding="utf-8"?>
    <xxxxxxxxx.RippleView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingTop="10dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:paddingBottom="10dp">
    
    
        </LinearLayout>
    </xxxxxxxxx.RippleView>

### 2、java代码的效果渲染 ###

import android.annotation.SuppressLint;
    import android.content.Context;
    import android.graphics.Bitmap;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.PorterDuff;
    import android.graphics.PorterDuffXfermode;
    import android.graphics.Rect;
    import android.os.Build;
    import android.support.annotation.ColorRes;
    import android.util.AttributeSet;
    import android.view.GestureDetector;
    import android.view.MotionEvent;
    import android.view.View;
    import android.view.animation.Animation;
    import android.view.animation.ScaleAnimation;
    import android.widget.AdapterView;
    import android.widget.ExpandableListView;
    import android.widget.RelativeLayout;
    
    
    /**
     * @Method: 列表的水波纹效果，由于原来的水波纹效果出现低版本界面布局混乱，因此重写水波纹特效
     *
     */
    public class RippleView extends RelativeLayout{
        //width 宽度
        private int WIDTH;
        //height 高度
        private int HEIGHT;
        //水波纹波动的速度
        private int frameRate = 10;
        //水波纹持续时间，
        private int rippleDuration = 300;
        //水波纹透明度
        private int rippleAlpha = 90;
        //最大的圈
        private float radiusMax = 0;
        //是否在运行动画
        private boolean animationRunning = false;
        private int timer = 0;
        private int timerEmpty = 0;
        private int durationEmpty = -1;
        private float x = -1;
        private float y = -1;
        private int zoomDuration;
        private float zoomScale;
        private ScaleAnimation scaleAnimation;
        private Boolean hasToZoom;
        private Boolean isCentered;
        private Integer rippleType;
        private Paint paint;
        private Bitmap originBitmap;
        private int rippleColor;
        private int ripplePadding;
        private GestureDetector gestureDetector;
    
        //
        private final Runnable runnable = new Runnable() {
            @Override
            public void run() {
                invalidate();
            }
        };
    
        private com.txznet.comm.ui.theme.test.style.RippleView.OnRippleCompleteListener onCompletionListener;
    
        public RippleView(Context context) {
            super(context);
            init(context, null);
        }
    
        public RippleView(Context context, AttributeSet attrs) {
            super(context, attrs);
            init(context, attrs);
        }
    
        public RippleView(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
            init(context, attrs);
        }
    
        @Override
        protected void onVisibilityChanged(View changedView, int visibility) {
            super.onVisibilityChanged(changedView, visibility);
            animationRunning = false;
        }
    
        /**
         *  @Method: 方法初始化所有字段并设置侦听器
         *
         * @param context 用于创建此视图
         * @param attrs 用于初始化字段的属性
         */
        private void init(final Context context, final AttributeSet attrs) {
            if (isInEditMode())
                return;
    
            rippleColor = Color.parseColor("#FFFFFF");
            rippleType =  0;
            hasToZoom = false;
            isCentered =  false;
            ripplePadding = 0;
    
            zoomScale =  1.03f;
            zoomDuration =  200;
            paint = new Paint();
            paint.setAntiAlias(true);
            paint.setStyle(Paint.Style.FILL);
            paint.setColor(rippleColor);
            paint.setAlpha(rippleAlpha);
            this.setWillNotDraw(false);
    
            post(new Runnable() {
                @Override
                public void run() {
                    gestureDetector = new GestureDetector(context, new GestureDetector.SimpleOnGestureListener() {
                        @Override
                        public void onLongPress(MotionEvent event) {
                            super.onLongPress(event);
                            animateRipple(event);
                            sendClickEvent(true);
                        }
    
                        @Override
                        public boolean onSingleTapConfirmed(MotionEvent e) {
                            return true;
                        }
    
                        @Override
                        public boolean onSingleTapUp(MotionEvent e) {
                            return true;
                        }
                    });
                }
            });
    
            //使用缓存虽然能提高效率但是会影响界面布局问题，因此不使用缓存
            this.setDrawingCacheEnabled(false);
            this.setClickable(true);
        }
    
        //绘制水波纹图形
        @Override
        public void draw(Canvas canvas) {
            super.draw(canvas);
            //如果水波纹在运行的话就不再绘制水波纹
            if (animationRunning) {
                canvas.save();
                if (rippleDuration <= timer * frameRate) {
                    animationRunning = false;
                    timer = 0;
                    durationEmpty = -1;
                    timerEmpty = 0;
                    // There is problem on Android M where canvas.restore() seems to be called automatically
                    // For now, don't call canvas.restore() manually on Android M (API 23)
                    if(Build.VERSION.SDK_INT != 23) {
                        canvas.restore();
                    }
                    invalidate();
                    if (onCompletionListener != null) onCompletionListener.onComplete(this);
                    return;
                } else
                    postDelayed(runnable, frameRate);
    
                if (timer == 0)
                    canvas.save();
    
                //绘制扩散的圆
                canvas.drawCircle(x, y, (radiusMax * (((float) timer * frameRate) / rippleDuration)), paint);
                //绘制颜色
                paint.setColor(Color.parseColor("#ffff4444"));
    
                if (rippleType == 1 && originBitmap != null && (((float) timer * frameRate) / rippleDuration) > 0.4f) {
                    if (durationEmpty == -1)
                        durationEmpty = rippleDuration - timer * frameRate;
    
                    timerEmpty++;
                    final Bitmap tmpBitmap = getCircleBitmap((int) ((radiusMax) * (((float) timerEmpty * frameRate) / (durationEmpty))));
                    canvas.drawBitmap(tmpBitmap, 0, 0, paint);
                    tmpBitmap.recycle();
                }
    
                paint.setColor(rippleColor);
    
                if (rippleType == 1) {
                    if ((((float) timer * frameRate) / rippleDuration) > 0.6f)
                        paint.setAlpha((int) (rippleAlpha - ((rippleAlpha) * (((float) timerEmpty * frameRate) / (durationEmpty)))));
                    else
                        paint.setAlpha(rippleAlpha);
                }
                else
                    paint.setAlpha((int) (rippleAlpha - ((rippleAlpha) * (((float) timer * frameRate) / rippleDuration))));
    
                timer++;
            }
        }
    
        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            WIDTH = w;
            HEIGHT = h;
    
            scaleAnimation = new ScaleAnimation(1.0f, zoomScale, 1.0f, zoomScale, w / 2, h / 2);
            scaleAnimation.setDuration(zoomDuration);
            scaleAnimation.setRepeatMode(Animation.REVERSE);
            scaleAnimation.setRepeatCount(1);
        }
    
        /**
         * Launch Ripple animation for the current view with a MotionEvent
         *
         * @param event MotionEvent registered by the Ripple gesture listener
         */
        public void animateRipple(MotionEvent event) {
            createAnimation(event.getX(), event.getY());
        }
    
        /**
         * Launch Ripple animation for the current view centered at x and y position
         *
         * @param x Horizontal position of the ripple center
         * @param y Vertical position of the ripple center
         */
        public void animateRipple(final float x, final float y) {
            createAnimation(x, y);
        }
    
        /**
         * Create Ripple animation centered at x, y
         *
         * @param x Horizontal position of the ripple center
         * @param y Vertical position of the ripple center
         */
        private void createAnimation(final float x, final float y) {
            if (this.isEnabled() && !animationRunning) {
                if (hasToZoom)
                    this.startAnimation(scaleAnimation);
    
                radiusMax = Math.max(WIDTH, HEIGHT);
    
                if (rippleType != 2)
                    radiusMax /= 2;
    
                radiusMax -= ripplePadding;
    
                if (isCentered || rippleType == 1) {
                    this.x = getMeasuredWidth() / 2;
                    this.y = getMeasuredHeight() / 2;
                } else {
                    this.x = x;
                    this.y = y;
                }
    
                animationRunning = true;
    
                if (rippleType == 1 && originBitmap == null)
                    originBitmap = getDrawingCache(true);
    
                invalidate();
            }
        }
    
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            if (null != gestureDetector) {
                if (gestureDetector.onTouchEvent(event)) {
                    animateRipple(event);
                    sendClickEvent(false);
                }
            }
            return super.onTouchEvent(event);
        }
    
        @Override
        public boolean onInterceptTouchEvent(MotionEvent event) {
    //        this.onTouchEvent(event);
            animateRipple(event);
            return super.onInterceptTouchEvent(event);
        }
    
        /**
         * Send a click event if parent view is a Listview instance
         *
         * @param isLongClick Is the event a long click ?
         */
        private void sendClickEvent(final Boolean isLongClick) {
            if (getParent() instanceof ExpandableListView) {
                final ExpandableListView ad = (ExpandableListView) getParent();
                final int position = ad.getPositionForView(this);
                final long id = ad.getItemIdAtPosition(position);
                ad.performItemClick(this, position, id);
            }else if (getParent() instanceof AdapterView) {
                final AdapterView adapterView = (AdapterView) getParent();
                final int position = adapterView.getPositionForView(this);
                final long id = adapterView.getItemIdAtPosition(position);
                if (isLongClick) {
                    if (adapterView.getOnItemLongClickListener() != null)
                        adapterView.getOnItemLongClickListener().onItemLongClick(adapterView, this, position, id);
                } else {
                    if (adapterView.getOnItemClickListener() != null)
                        adapterView.getOnItemClickListener().onItemClick(adapterView, this, position, id);
                }
            }
        }
    
        private Bitmap getCircleBitmap(final int radius) {
            final Bitmap output = Bitmap.createBitmap(originBitmap.getWidth(), originBitmap.getHeight(), Bitmap.Config.ARGB_8888);
            final Canvas canvas = new Canvas(output);
            final Paint paint = new Paint();
            final Rect rect = new Rect((int)(x - radius), (int)(y - radius), (int)(x + radius), (int)(y + radius));
    
            paint.setAntiAlias(true);
            canvas.drawARGB(0, 0, 0, 0);
            canvas.drawCircle(x, y, radius, paint);
    
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
            canvas.drawBitmap(originBitmap, rect, rect, paint);
    
            return output;
        }
    
        /**
         * Set Ripple color, default is #FFFFFF
         *
         * @param rippleColor New color resource
         */
        @SuppressLint("SupportAnnotationUsage")
        @ColorRes
        public void setRippleColor(int rippleColor) {
            this.rippleColor = getResources().getColor(rippleColor);
        }
    
        public int getRippleColor() {
            return rippleColor;
        }
    
        public com.txznet.comm.ui.theme.test.style.RippleView.RippleType getRippleType()
        {
            return com.txznet.comm.ui.theme.test.style.RippleView.RippleType.values()[rippleType];
        }
    
        /**
         * Set Ripple type, default is RippleType.SIMPLE
         *
         * @param rippleType New Ripple type for next animation
         */
        public void setRippleType(final com.txznet.comm.ui.theme.test.style.RippleView.RippleType rippleType)
        {
            this.rippleType = rippleType.ordinal();
        }
    
        public Boolean isCentered()
        {
            return isCentered;
        }
    
        /**
         * Set if ripple animation has to be centered in its parent view or not, default is False
         *
         * @param isCentered
         */
        public void setCentered(final Boolean isCentered)
        {
            this.isCentered = isCentered;
        }
    
        public int getRipplePadding()
        {
            return ripplePadding;
        }
    
        /**
         * Set Ripple padding if you want to avoid some graphic glitch
         *
         * @param ripplePadding New Ripple padding in pixel, default is 0px
         */
        public void setRipplePadding(int ripplePadding)
        {
            this.ripplePadding = ripplePadding;
        }
    
        public Boolean isZooming()
        {
            return hasToZoom;
        }
    
        /**
         * At the end of Ripple effect, the child views has to zoom
         *
         * @param hasToZoom Do the child views have to zoom ? default is False
         */
        public void setZooming(Boolean hasToZoom)
        {
            this.hasToZoom = hasToZoom;
        }
    
        public float getZoomScale()
        {
            return zoomScale;
        }
    
        /**
         * Scale of the end animation
         *
         * @param zoomScale Value of scale animation, default is 1.03f
         */
        public void setZoomScale(float zoomScale)
        {
            this.zoomScale = zoomScale;
        }
    
        public int getZoomDuration()
        {
            return zoomDuration;
        }
    
        /**
         * Duration of the ending animation in ms
         *
         * @param zoomDuration Duration, default is 200ms
         */
        public void setZoomDuration(int zoomDuration)
        {
            this.zoomDuration = zoomDuration;
        }
    
        public int getRippleDuration()
        {
            return rippleDuration;
        }
    
        /**
         * Duration of the Ripple animation in ms
         *
         * @param rippleDuration Duration, default is 400ms
         */
        public void setRippleDuration(int rippleDuration)
        {
            this.rippleDuration = rippleDuration;
        }
    
        public int getFrameRate()
        {
            return frameRate;
        }
    
        /**
         * Set framerate for Ripple animation
         *
         * @param frameRate New framerate value, default is 10
         */
        public void setFrameRate(int frameRate)
        {
            this.frameRate = frameRate;
        }
    
        public int getRippleAlpha()
        {
            return rippleAlpha;
        }
    
        /**
         * Set alpha for ripple effect color
         *
         * @param rippleAlpha Alpha value between 0 and 255, default is 90
         */
        public void setRippleAlpha(int rippleAlpha)
        {
            this.rippleAlpha = rippleAlpha;
        }
    
        public void setOnRippleCompleteListener(com.txznet.comm.ui.theme.test.style.RippleView.OnRippleCompleteListener listener) {
            this.onCompletionListener = listener;
        }
    
        /**
         * Defines a callback called at the end of the Ripple effect
         */
        public interface OnRippleCompleteListener {
            void onComplete(com.txznet.comm.ui.theme.test.style.RippleView rippleView);
        }
    
        public enum RippleType {
            SIMPLE(0),
            DOUBLE(1),
            RECTANGLE(2);
    
            int type;
    
            RippleType(int type)
            {
                this.type = type;
            }
        }
    }

# 加入引用，记得修改一下xml中引用的路径 #

# 如图：由一个白点向外发散…实现水波纹效果，具体参数可由你定 #

![20210421111145280.png][]

[20210421111145280.png]: /images/20210920/f109908c9d584c19b5b1451fa2645e2c.png