你好,游客 登录 注册 搜索
背景:
阅读新闻

Android 实现RippleEffect水波纹效果

[日期:2015-10-10] 来源:Linux社区  作者:sunnygeek [字体: ]

最近看到360、UC、网易新闻客户端都应用了水波纹效果,就在私下里也研究了一下,参照GIT上大神的分享,自己也跟着做了一个Android 实现RippleEffect水波纹示例,下面先看效果:

Android 实现RippleEffect水波纹效果

1.RippleEffect核心实现类

package com.example.RippleEffect;
import android.content.Context;
import android.content.res.TypedArray;
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.Handler;
import android.support.annotation.ColorRes;
import android.util.AttributeSet;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.animation.Animation;
import android.view.animation.ScaleAnimation;
import android.widget.AdapterView;
import android.widget.RelativeLayout;
 
 
/**
 * RippleView custom layout
 *
 * Custom Layout that allows to use Ripple UI pattern above API 21
 */
public class RippleView extends RelativeLayout {
 
    private int WIDTH;
    private int HEIGHT;
    private int frameRate = 10;
    private int rippleDuration = 400;
    private int rippleAlpha = 90;
    private Handler canvasHandler;
    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 OnRippleCompleteListener onCompletionListener;
 
    public RippleView(Context context) {
        super(context);
    }
 
    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);
    }
 
    /**
    * Method that initializes all fields and sets listeners
    *
    * @param context Context used to create this view
    * @param attrs Attribute used to initialize fields
    */
    private void init(final Context context, final AttributeSet attrs) {
        if (isInEditMode())
            return;
 
        final TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RippleView);
        rippleColor = typedArray.getColor(R.styleable.RippleView_rv_color, getResources().getColor(R.color.rippelColor));
        rippleType = typedArray.getInt(R.styleable.RippleView_rv_type, 0);
        hasToZoom = typedArray.getBoolean(R.styleable.RippleView_rv_zoom, false);
        isCentered = typedArray.getBoolean(R.styleable.RippleView_rv_centered, false);
        rippleDuration = typedArray.getInteger(R.styleable.RippleView_rv_rippleDuration, rippleDuration);
        frameRate = typedArray.getInteger(R.styleable.RippleView_rv_framerate, frameRate);
        rippleAlpha = typedArray.getInteger(R.styleable.RippleView_rv_alpha, rippleAlpha);
        ripplePadding = typedArray.getDimensionPixelSize(R.styleable.RippleView_rv_ripplePadding, 0);
        canvasHandler = new Handler();
        zoomScale = typedArray.getFloat(R.styleable.RippleView_rv_zoomScale, 1.03f);
        zoomDuration = typedArray.getInt(R.styleable.RippleView_rv_zoomDuration, 200);
        typedArray.recycle();
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(rippleColor);
        paint.setAlpha(rippleAlpha);
        this.setWillNotDraw(false);
 
        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(true);
        this.setClickable(true);
    }
 
    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        if (animationRunning) {
            if (rippleDuration <= timer * frameRate) {
                animationRunning = false;
                timer = 0;
                durationEmpty = -1;
                timerEmpty = 0;
                canvas.restore();
                invalidate();
                if (onCompletionListener != null) onCompletionListener.onComplete(this);
                return;
            } else
                canvasHandler.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 (gestureDetector.onTouchEvent(event)) {
            animateRipple(event);
            sendClickEvent(false);
        }
        return super.onTouchEvent(event);
    }
 
    @Override
    public boolean onInterceptTouchEvent(MotionEvent event) {
        this.onTouchEvent(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 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
    */
    @ColorRes
    public void setRippleColor(int rippleColor) {
        this.rippleColor = getResources().getColor(rippleColor);
    }
 
    public int getRippleColor() {
        return rippleColor;
    }
 
    public RippleType getRippleType()
    {
        return RippleType.values()[rippleType];
    }
 
    /**
    * Set Ripple type, default is RippleType.SIMPLE
    *
    * @param rippleType New Ripple type for next animation
    */
    public void setRippleType(final 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(OnRippleCompleteListener listener) {
        this.onCompletionListener = listener;
    }
 
    /**
    * Defines a callback called at the end of the Ripple effect
    */
    public interface OnRippleCompleteListener {
        void onComplete(RippleView rippleView);
    }
 
    public enum RippleType {
        SIMPLE(0),
        DOUBLE(1),
        RECTANGLE(2);
 
        int type;
 
        RippleType(int type)
        {
            this.type = type;
        }
    }
}

2.自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="RippleView">rv_zoomDuration
        <attr name="rv_alpha" format="integer" />
        <attr name="rv_framerate" format="integer"/>
        <attr name="rv_rippleDuration" format="integer"/>
        <attr name="rv_zoomDuration" format="integer" />
        <attr name="rv_color" format="color" />
        <attr name="rv_centered" format="boolean" />
        <attr name="rv_type" format="enum">
            <enum name="simpleRipple" value="0"/>
            <enum name="doubleRipple" value="1"/>
            <enum name="rectangle" value="2" />
        </attr>
        <attr name="rv_ripplePadding" format="dimension" />
        <attr name="rv_zoom" format="boolean" />
        <attr name="rv_zoomScale" format="float" />
  </declare-styleable> 
</resources>

3.主布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ripple="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
 
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="vertical" >
 
            <!-- 1 rv_centered="true" rv_type="simpleRipple" -->
 
            <com.example.RippleEffect.RippleView
                android:id="@+id/more"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                ripple:rv_centered="true" >
 
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:background="#BAC9FF"
                    android:padding="15dp"
                    android:src="@drawable/ic_launcher" />
            </com.example.RippleEffect.RippleView>
 
            <!-- 2 rv_centered="false" rv_type="simpleRipple" -->
 
            <com.example.RippleEffect.RippleView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                ripple:rv_centered="false"
                ripple:rv_type="simpleRipple" >
 
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:background="#BAC9FF"
                    android:padding="15dp"
                    android:src="@drawable/ic_launcher" />
            </com.example.RippleEffect.RippleView>
 
            <!-- 3 rv_type="doubleRipple" -->
 
            <com.example.RippleEffect.RippleView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                ripple:rv_type="doubleRipple" >
 
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:background="#BAC9FF"
                    android:padding="15dp"
                    android:src="@drawable/ic_launcher" />
            </com.example.RippleEffect.RippleView>
 
            <!-- 4 rv_type="rectangle" -->
 
            <com.example.RippleEffect.RippleView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                ripple:rv_type="doubleRipple" >
 
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:background="#BAC9FF"
                    android:padding="15dp"
                    android:src="@drawable/ic_launcher" />
            </com.example.RippleEffect.RippleView>
 
            <!-- 5  rv_zoom ="true" rv_ripplePadding ="20dp"  ripple:rv_zoomScale="1.25" -->
 
            <com.example.RippleEffect.RippleView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                ripple:rv_centered="false"
                ripple:rv_color="#D91615"
                ripple:rv_rippleDuration="2000"
                ripple:rv_ripplePadding="20dp"
                ripple:rv_zoom="true"
                ripple:rv_zoomDuration="200"
                ripple:rv_zoomScale="1.25" >
 
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:background="#BAC9FF"
                    android:padding="15dp"
                    android:src="@drawable/ic_launcher" />
            </com.example.RippleEffect.RippleView>
 
            <!-- 6 rv_type="simpleRipple" rv_alpha="10" rv_framerate="100" -->
 
            <com.example.RippleEffect.RippleView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                ripple:rv_alpha="200"
                ripple:rv_framerate="100"
                ripple:rv_type="simpleRipple" >
 
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:background="#BAC9FF"
                    android:padding="15dp"
                    android:src="@drawable/ic_launcher" />
            </com.example.RippleEffect.RippleView>
 
            <!-- 7 rv_type="simpleRipple" rv_alpha="10" rv_framerate="2" -->
 
            <com.example.RippleEffect.RippleView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                ripple:rv_alpha="200"
                ripple:rv_framerate="2"
                ripple:rv_type="simpleRipple" >
 
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:background="#BAC9FF"
                    android:padding="15dp"
                    android:src="@drawable/ic_launcher" />
            </com.example.RippleEffect.RippleView>
 
            <!-- 8 rv_type="simpleRipple" rv_alpha="10" rv_framerate="2" -->
 
            <com.example.RippleEffect.RippleView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                ripple:rv_alpha="200"
                ripple:rv_framerate="2"
                ripple:rv_type="simpleRipple" >
 
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:background="#BAC9FF"
                    android:padding="15dp"
                    android:text="Button" />
            </com.example.RippleEffect.RippleView>
        </LinearLayout>
    </ScrollView>
 
</LinearLayout>

感谢git上大神的热情分享给予的帮助,以上就是实现水波纹效果的全部实现,仅供大家参考学习,欢迎一起学习交流~

更多Android相关信息见Android 专题页面 http://www.linuxidc.com/topicnews.aspx?tid=11

本文永久更新链接地址http://www.linuxidc.com/Linux/2015-10/124007.htm

linux
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款