android 实现圆形波纹动画

在app中这种效果用的越来越多了，下面看看如何实现这种效果，这里我整理了两种实现这种效果的方式

方式一：
使用github上面的类库，把这个类库加入到我们的项目中即可
https://github.com/ozodrukh/CircularReveal
具体代码实现

<?xml version="1.0" encoding="utf-8"?>
<io.codetail.widget.RevealLinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.leyue100.fenjie.MainActivity">

    <LinearLayout
        android:id="@+id/ly"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/my_blue"
        android:gravity="center"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@mipmap/ic_launcher"

            />

    </LinearLayout>
</io.codetail.widget.RevealLinearLayout>

Activity设置动画

package com.leyue100.fenjie;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.leyue100.fenjie.util.Util;

import butterknife.Bind;
import butterknife.ButterKnife;
import io.codetail.animation.SupportAnimator;
import io.codetail.animation.ViewAnimationUtils;

public class MainActivity extends AppCompatActivity {


    @Bind(R.id.image)
    ImageView image;
    @Bind(R.id.ly)
    LinearLayout ly;

    private boolean hasAnimationStarted;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        //控制动画显示一次
        if (hasFocus && !hasAnimationStarted) {
            startCircular();
        }
    }

    private void startCircular() {
        //获取图片所在屏幕的位置
        int[] location = new int[2];
        image.getLocationOnScreen(location);
        
        //设置圆的中心点
        int cx = location[0] + image.getWidth()/2;
        int cy = location[1] - image.getHeight()/2 - Util.dpToPx(24);

        int dx = Math.max(cx, ly.getWidth() - cx);
        int dy = Math.max(cy, ly.getHeight() - cy);
        //设置半径
        float finalRadius = (float) Math.hypot(dx, dy);
        SupportAnimator animator = ViewAnimationUtils.createCircularReveal(ly, cx, cy, 0, finalRadius);
        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        animator.setDuration(3000);
        animator.start();
        hasAnimationStarted = true;
    }
}

使用第三方类很简单就可以实现出来

下面介绍一种自己实现的方式

自定义view 

RevealBackgroundView

package com.leyue100.lingwai.view;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.Interpolator;

/**
 * Created by lihao on 16/2/18.
 * Version : 1.0
 * desc:
 */
public class RevealBackgroundView extends View {

    //设置状态
    public static final int STATE_NOT_STARTED = 0;
    public static final int STATE_FILL_STARTED = 1;
    public static final int STATE_FINSHED = 3;

    private static final Interpolator INTERPOLATOR = new AccelerateDecelerateInterpolator();
    private static final int FILL_TIME = 4000;

    private int state = STATE_NOT_STARTED;

    private Paint fillPaint;
    private int currentRadius;
    private ObjectAnimator revealAnimator;

    private int startLocationX;
    private int startLocationY;

    private OnStateChangeListener onStateChangeListener;


    public RevealBackgroundView(Context context) {
        super(context);
        init();
    }

    public RevealBackgroundView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public RevealBackgroundView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    /**
     * 初始化数据
     */
    private void init() {
        fillPaint = new Paint(Paint.ANTI_ALIAS_FLAG|Paint.DITHER_FLAG);
        fillPaint.setStyle(Paint.Style.FILL);
        fillPaint.setColor(Color.WHITE);
    }

    public void setFillPaintColor(int color) {
        fillPaint.setColor(color);
    }

    public void startFromLocation(int[] tapLocationOnScreen) {
        //设置状态为开始
        changeState(STATE_FILL_STARTED);
        //获取到中心点即动画开始的位置
        startLocationX = tapLocationOnScreen[0];
        startLocationY = tapLocationOnScreen[1];
        //设置半径
        int finalRadius = (int) Math.hypot(getHeight(), getWidth());
        //设置动画 重点currentRadius设置动画的半径
        revealAnimator = ObjectAnimator.ofInt(this, "currentRadius", 0, finalRadius);
        revealAnimator.setInterpolator(INTERPOLATOR);
        revealAnimator.setDuration(FILL_TIME);
        revealAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                changeState(STATE_FINSHED);
            }
        });
        revealAnimator.start();
    }

    public void setToFinishedFrame() {
        changeState(STATE_FINSHED);
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (state == STATE_FINSHED){
            //状态完成画一个矩形
            canvas.drawRect(0,0,getWidth(),getHeight(),fillPaint);
        } else {
            //画圆
            canvas.drawCircle(startLocationX,startLocationY,currentRadius,fillPaint);
        }
    }

    /**
     * 设置状态
     * @param state
     */
    private void changeState(int state) {
        if(this.state == state) {
            return;
        }
        this.state = state;
        if(onStateChangeListener != null) {
            onStateChangeListener.onStateChange(state);
        }
    }

    /**
     * 动画回调此方法
     * @param radius
     */
    public void setCurrentRadius(int radius) {
        this.currentRadius = radius;
        invalidate();
    }

    public void setOnStateChangeListener(OnStateChangeListener onStateChangeListener) {
        this.onStateChangeListener = onStateChangeListener;
    }
    public interface OnStateChangeListener{
        void onStateChange(int state);
    }
}

使用自定义控件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.leyue100.lingwai.MainActivity">

    <com.leyue100.lingwai.view.RevealBackgroundView
        android:id="@+id/backgroundView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher"
        android:layout_centerInParent="true"
        />
</RelativeLayout>

Activity中使用

package com.leyue100.lingwai;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.ViewTreeObserver;
import android.widget.ImageView;
import android.widget.Toast;

import com.leyue100.lingwai.view.RevealBackgroundView;

import butterknife.Bind;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    @Bind(R.id.backgroundView)
    RevealBackgroundView backgroundView;
    @Bind(R.id.image)
    ImageView image;

    private final static String TAG = "MainActivity";
    private boolean hasAnimationStarted;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        if (hasFocus && !hasAnimationStarted) {
            setupRevaalBackground();
        }

    }

    public void setupRevaalBackground() {
        backgroundView.setOnStateChangeListener(new RevealBackgroundView.OnStateChangeListener() {
            @Override
            public void onStateChange(int state) {
                if (state == RevealBackgroundView.STATE_FINSHED) {
                    Toast.makeText(MainActivity.this, "动画结束", Toast.LENGTH_SHORT).show();
                }
            }
        });
        
        //获取动画开始位置
        final int[] location = new int[2];
        image.getLocationOnScreen(location);
        
        //启动动画
        backgroundView.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                backgroundView.getViewTreeObserver().removeOnPreDrawListener(this);
                backgroundView.setFillPaintColor(Color.parseColor("#2196F3"));
                backgroundView.startFromLocation(location);
                hasAnimationStarted = true;
                return true;

            }
        });

    }
}

这两种方式做起来都很简单