美文网首页
Android简易波浪线View

Android简易波浪线View

作者: 伟大的小炮殿下 | 来源:发表于2017-03-22 15:23 被阅读688次

    掐指那么一算,大四都快过去了.还有好多不会的东西,有点紧张.

    今天下午正好没事,于是写了个波浪view,算是练练手,参考了别人的写法之后,进行了一些自己的改良.可能是公司的机子实在太破,在直接改变path点的位置时会造成卡顿,于是换了另一种思路来制造动画效果,写这篇文章也是为了告诫自己,动画是用来骗客户的,而不是骗自己的.放上源代码,请原谅我不会排版
    掐指那么一算,大四都快过去了.还有好多不会的东西,有点紧张.

    今天下午正好没事,于是写了个波浪view,算是练练手,参考了别人的写法之后,进行了一些自己的改良.可能是公司的机子实在太破,在直接改变path点的位置时会造成卡顿,于是换了另一种思路来制造动画效果,写这篇文章也是为了告诫自己,动画是用来骗客户的,而不是骗自己的.放上源代码,请原谅我不会排版
    public class MyWaveView extends View {

    //组件的宽和高
    private float mViewWidth;
    private float mViewHeight;
    
    //波浪的宽和高(波浪的高预取0.4倍组件宽度,波浪的宽预取4倍组件的宽度)
    private float mWaveHeight;
    private float mWaveWidth;
    
    //波浪的轨迹和画笔
    private Path wavePath;
    private Paint wavePaint;
    
    private float mLevelHeight;//水位线高度,改变这个值即可以模拟出波浪上下动的效果(这个是外界控制的)
    private float xOffset;//波浪在水平线上的平移距离
    private float yOffset;//波浪在y轴上的平移距离
    
    public MyWaveView(Context context) {
        super(context);
    }
    
    public MyWaveView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    
    public MyWaveView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mViewWidth = getMeasuredWidth();
        mViewHeight = getMeasuredHeight();
        mWaveHeight = (float) (0.4 * mViewWidth);
        mWaveWidth = 4 * mViewWidth;
        mLevelHeight = mViewHeight - 2 * mWaveHeight;
        init();
        changeWavePathAnimator();
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(xOffset,0);
        canvas.drawPath(wavePath,wavePaint);
    }
    
    private void init(){
    
        wavePaint = new Paint();
        wavePaint.setAntiAlias(true);
        wavePaint.setColor(Color.BLUE);
        wavePaint.setStyle(Paint.Style.FILL);
    
        wavePath = new Path();
        wavePath.moveTo( -(4 * mViewWidth) ,mLevelHeight );//第一个点在view左侧看不到的地方,方便后续动画将其平移过来
        wavePath.quadTo( -(3 * mViewWidth) , mLevelHeight - 2 * mWaveHeight , -(2 * mViewWidth) , mLevelHeight);//绘制第一段贝塞尔曲线,不可见
        wavePath.quadTo( - mViewWidth , mLevelHeight + 2 * mWaveHeight , 0 , mLevelHeight);//绘制第二段贝塞尔曲线,不可见
        wavePath.quadTo(mViewWidth , mLevelHeight - 2 * mWaveHeight , 2 * mViewWidth , mLevelHeight);//绘制第三段贝塞尔曲线,可见
        wavePath.lineTo(2 * mViewWidth , mViewHeight);
        wavePath.lineTo(- (4 * mViewWidth) ,mViewHeight);
        wavePath.close();
    
    }
    
    private void changeWavePathAnimator(){
        ValueAnimator animator = ValueAnimator.ofFloat(0,1f);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                Object rateObj = valueAnimator.getAnimatedValue();
                float rate = Float.parseFloat(rateObj.toString());
                xOffset = rate * mViewWidth * 4;
                invalidate();
            }
        });
        animator.setInterpolator(new LinearInterpolator());
        animator.setDuration(1000);
        animator.setRepeatCount(Integer.MAX_VALUE);
        animator.setRepeatMode(ValueAnimator.RESTART);
        animator.start();
    }
    

    }

    相关文章

      网友评论

          本文标题:Android简易波浪线View

          本文链接:https://www.haomeiwen.com/subject/afmonttx.html