美文网首页
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