美文网首页
android 绘制波浪曲线

android 绘制波浪曲线

作者: pdog18 | 来源:发表于2017-09-19 17:33 被阅读212次
  1. 怎样画波浪

通过贝塞尔曲线

  1. 怎样让波,浪起来

让波浪水平移动

  1. 保持让波浪动起来时,一直正确显示波浪

确保左侧起点始终小于0,

//使用
final WaveView viewById = (WaveView) findViewById(R.id.bezier);
        viewById.post(new Runnable() {
            @Override
            public void run() {
                viewById.start();
            }
        });

实现思路

  1. Path配合rQuadTo画出单个波浪的区域
  2. 画出所有波浪,并且在控件不可视的范围处(x < 0)处也添加上一个波浪
  3. 通过ValueAnimator不断修改Path的左侧起始位置dx,并且触发重绘,ValueAnimator的取值范围是负单个波浪宽度 - 0是为了确保动画不会出现奇怪的位移
package com.example.a18.path.wave;

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;

/**
 * desc: todo 描述本类功能
 * author: pdog
 * email: pdog@qq.com
 * time: 2017/11/8  12 :34
 */
public class WaveView extends View {

    private Paint mPaint;
    private Path mPath;
    private int mWidth;
    private int mHeight;

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


    //当前移动的距离
    float tranlateWidth;

    ValueAnimator mValueAnimator;


    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.BLUE);
        mPaint.setStrokeWidth(2);

        mPath = new Path();


    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        mValueAnimator = ValueAnimator.ofInt(0,1);
        mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                tranlateWidth = valueAnimator.getAnimatedFraction() * mWidth;
                invalidate();
                System.out.println("update...");
            }
        });
        mValueAnimator.setDuration(1 << 10);
        mValueAnimator.setInterpolator(new LinearInterpolator());
        mValueAnimator.setRepeatMode(ValueAnimator.RESTART);
        mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        mValueAnimator.cancel();
        mValueAnimator = null;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        mWidth = getWidth();
        mHeight = getHeight();
        float waveHeight = (float) (mWidth / 5);


        mPath.moveTo(-mWidth, 0);

        mPath.rCubicTo(mWidth / 4 * 1, -waveHeight, mWidth / 4 * 3, waveHeight, mWidth, 0);
        mPath.rCubicTo(mWidth / 4 * 1, -waveHeight, mWidth / 4 * 3, waveHeight, mWidth, 0);

        mPath.rLineTo(0, mHeight >> 1);
        mPath.rLineTo(-mWidth << 1, 0);
        mPath.close();
    }

    public void start() {
        mValueAnimator.start();
    }

    @Override
    protected void onDraw(Canvas canvas) {

        canvas.translate(tranlateWidth, getHeight() >> 1);

        canvas.drawPath(mPath, mPaint);
    }
}

相关文章

  • android 绘制波浪曲线

    怎样画波浪 通过贝塞尔曲线 怎样让波,浪起来 让波浪水平移动 保持让波浪动起来时,一直正确显示波浪 确保左侧起点始...

  • Android贝塞尔曲线动画

    前言: 利用贝塞尔曲线绘制类似波浪效果的优美曲线 概述: 环境:Android Studio 3.42 语言:Ja...

  • 绘制波浪正弦曲线

    iOS绘制波浪,具体来说就是结合CAShaperLayer、UIBezierPath进行一个高性能的绘制。前文已经...

  • iOS 波浪曲线的绘制

    iOS 波浪曲线的绘制 还是先上图: 其实之前就一直想看一下 iOS 关于曲线绘制的相关类容,但由于刚刚步入职场,...

  • AI绘制波浪曲线logo

    ·画一个矩形,复制一个,Ctrl+d再制,共8条。 ·全选-对象-封套扭曲-用网格建立,更改参数。 ·用a工具调节...

  • Android Path绘制贝塞尔曲线波浪动画

    本文主讲一种动画的实现方式:在自定义View的onDraw()方法的最后调用invalidate()来实现持续绘制...

  • Canvas教程(12)——三次贝塞尔曲线

    bezierCurveTo()方法 绘制三次贝塞尔曲线代码如下。 这个方法可谓是绘制波浪线的神器。根据之前的结论,...

  • Android 路径绘制艺术——贝塞尔曲线

    目录 1)什么是贝塞尔曲线 2)贝塞尔曲线图解 3)Android绘制贝塞尔曲线 4)绘制水波纹效果 概述 什么是...

  • Canvas中任意波浪线的绘制

    最近接触一个墨水屏的项目,有个需求就是会进行一些标记绘制,类似直线、自由曲线、波浪线等,所以就涉及到波浪线如何绘制...

  • 初试 贝塞尔曲线

    Android 绘图贝塞尔曲线简单使用 在Android中某些自定义View的时候需要绘制某些曲线,这时候贝塞尔曲...

网友评论

      本文标题:android 绘制波浪曲线

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