继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Android-贝塞尔曲线实现水波纹动画

Code_Steven
关注TA
已关注
手记 15
粉丝 1.4万
获赞 118

Android 系统api提供了quadTo和rQuadTo实现二阶贝塞尔曲线,三阶贝塞尔曲线在这不做阐述,只不过是两个控制点。
源码地址:https://github.com/StevenYan88/WaveView.git

效果图

首先看张二阶贝赛尔的曲线
图片描述

     Path path = new Path();
    //贝赛尔的起始点moveTo(x,y)
    path.moveTo(getWidth() / 2 - 200, getHeight() / 2);
    //quadTo 参数讲解(x1,y1,x2,y2)
    //x1:控制点x坐标
    //y1:在控制点y坐标
    //x2:终点x坐标
    //y2:终点y坐标
    path.quadTo(getWidth() / 2 - 100, getHeight() / 2 - 100, getWidth() / 2, getHeight() / 2);
    path.quadTo(getWidth() / 2 + 100, getHeight() / 2 + 100, getWidth() / 2 + 200, getHeight() / 2);
    canvas.drawPath(path, mPaint);

quadTo和rQuadTo的区别

    //rQuadTo参数讲解(dx1,dy1,dx2,dy2):
    //dx1:控制点相对起点的x位移
    //dy1:控制点相对起点的y位移
    //dx2:终点相对起点的x位移
    /dy2:终点相对起点的y位移
    path.moveTo(getWidth() / 2 - 200, getHeight() / 2);
    path.rQuadTo(100, -100, 200, 0);
    path.rQuadTo(100, 100, 200, 0);
    canvas.drawPath(path, mPaint);

效果一样,在这就不贴图了。

quadTo参数讲解(x1,y1,x2,y2):x1:控制点x坐标,y1:在控制点y坐标,x2:终点x坐标,y2:终点y坐标
rQuadTo参数讲解(dx1,dy1,dx2,dy2):dx1:控制点相对起点的x位移,dy1:控制点相对起点的y位,dx2:终点相对起点的x位移,dy2:终点相对起点的y位移

实现水波纹动态效果无非是曲线向左一个偏移量dx,看过去想凹凸的曲线,于是形成了水波纹动态效果。看代码。

实现水波纹动态的效果

public class WaveView extends View {
    private Paint mPaint;
    private int mWidth;
    private int mHeight;
    private int mWaveHeight;
    private int mWaveDx;
    private int dx;

    public WaveView(Context context) {
        this(context, null);
    }

    public WaveView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setColor(Color.parseColor("#FF3891"));
        mPaint.setStyle(Paint.Style.FILL);
        //波长的的长度(这里设置为屏幕的宽度)
        mWaveDx = getResources().getDisplayMetrics().widthPixels;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //控件的宽高
        mWidth = MeasureUtils.measureView(widthMeasureSpec, mWaveDx);
        mHeight = MeasureUtils.measureView(heightMeasureSpec, 300);
        //水波的高度
        mWaveHeight = DensityUtil.dip2px(getContext(), 16);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawWave(canvas);
    }


    private void drawWave(Canvas canvas) {
        Path path = new Path();
        path.reset();
        path.moveTo(-mWaveDx + dx, mHeight / 2);
        for (int i = -mWaveDx; i < getWidth() + mWaveDx; i += mWaveDx) {
            path.rQuadTo(mWaveDx / 4, -mWaveHeight, mWaveDx / 2, 0);
            path.rQuadTo(mWaveDx / 4, mWaveHeight, mWaveDx / 2, 0);

        }
        path.lineTo(mWidth, mHeight);
        path.lineTo(0, mHeight);
        //path.close() 绘制封闭的区域
        path.close();
        canvas.drawPath(path, mPaint);
    }

    public void startAnimation() {
        ValueAnimator valueAnimator = ValueAnimator.ofInt(0, mWaveDx);
        valueAnimator.setDuration(2000);
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //水平方向的偏移量
                dx = ( int ) animation.getAnimatedValue();
                invalidate();
            }

        });
        valueAnimator.start();

    }
}

核心代码是drawWave()这个方法,startAnimation()是一个水平方向动画,偏移量是dx,在Activity中调用。水波纹的高度(就是贝塞尔曲线的高度),颜色、大小都可以自定义。小编没有写,整个绘制水波纹动画效果的思路和清晰。主要是搞懂quadTo和rQuadTo的区别和参数的意思。有问题可以留言!

打开App,阅读手记
3人推荐
发表评论
随时随地看视频慕课网APP