自定义View之网易云音乐听歌识曲水波纹动画

 

先上效果图

点击中间的按钮后，像外发散水波纹，再次点击水波纹消失。

实现原理

当点击按钮后，我们隔一段时间执行一个RippleCircleView的动画，动画包括扩大和透明度，通过PropertyValuesHolder将动画封装到一起，核心就是动画的实现

代码实现

首先是RippleCircleView，RippleCircleView啥也不干，就画一个圆，这个圆也是水波纹的灵魂，用来扩散的圆。

public class RippleCircleView extends View {
    private RippleAnimationView mRippleAnimationView;

    public RippleCircleView(RippleAnimationView rippleAnimationView) {
        super(rippleAnimationView.getContext());
        mRippleAnimationView = rippleAnimationView;
    }

    public RippleCircleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float radius = Math.min(getWidth(), getHeight()) / 2;
        canvas.drawCircle(radius, radius, radius - RippleAnimationView.STROKE_WIDTH, mRippleAnimationView.getPaint());
    }
}

有了水波纹的圆之后接下来我们实现水波纹的父布局，其父布局继承自相对布局，在初始化的时候将动画创建好，同时为了避免动画多次执行，添加一个标志位，并向外暴露开始和关闭动画的方法。