先看效果:
一,效果有两个,一个是波纹运动,另外一个就是头像运动(换成小船的图片更有趣哦)
二,实现步骤
1,使用贝塞尔曲线,确定path的路径。
2,绘制path路径,并且开启动画,使向右移动,达到水波纹效果。
3,确定头像的位置
4,绘制头像。
1,绘制波浪线,如图
2,填充区域,如图
3,Region和path相交,得到一个矩形区域
4,当这个矩形区域的左边和右边无限接近时,就可以把它看做一条直线,然后就可以得到中间线和path的相交点,这样就可以确定头像的位置了。
核心代码:
public WaveView(Context context, AttributeSet attrs) { super(context, attrs); //初始化自定义属性 initAttrs(context, attrs); init(); }
private void init() { paint = new Paint(); paint.setColor(getResources().getColor(R.color.colorPrimary)); paint.setStyle(Paint.Style.FILL_AND_STROKE); //填充 path = new Path(); } /** * 初始化自定义属性 * @param context * @param attrs */ private void initAttrs(Context context, AttributeSet attrs) { TypedArray a = context.obtainStyledAttributes(attrs, R.style