欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

android贝塞尔曲线实现波浪效果

程序员文章站 2023-11-28 09:16:34
本文实例为大家分享了android贝塞尔曲线实现波浪效果的具体代码,供大家参考,具体内容如下 因为手机录制gif不知道下什么软件好,所以暂时就先忽略效果图了 我在屏...

本文实例为大家分享了android贝塞尔曲线实现波浪效果的具体代码,供大家参考,具体内容如下

android贝塞尔曲线实现波浪效果

因为手机录制gif不知道下什么软件好,所以暂时就先忽略效果图了

我在屏幕外多画了1.5个波浪,延伸至屏幕内。然后不断的循环,向右边移动。就有一种波浪的效果。

所以现在只需要画出左边的波长,然后再通过循环添加所有的波长即可。

android贝塞尔曲线实现波浪效果

第一个曲线已经确定了控制点和终点的坐标,

第二条曲线也可以很明显的看出来终点是在x轴的0点坐标,y轴不变,而控制点是在负的波长的1/4的位置

有了上下曲线以后,其他的就可以直接通过循环进行添加了

接下来直接看一下代码

public class waveview extends view implements view.onclicklistener {
  //路径
  private path mpath;
  //画笔
  private paint mpaint;
  //屏幕高度
  private int screenheight;
  //屏幕宽度
  private int screenwidth;
  //波长 自己控制
  private int wavelength = 800;
  //波长的数量
  private int wavecount;
  //贝塞尔曲线的控制点
  private int centery;
  private valueanimator mvalueanimator;
  //偏移量
  private int moffset;
 
  public waveview(context context) {
    this(context, null);
  }
 
  public waveview(context context, @nullable attributeset attrs) {
    super(context, attrs);
    init();
  }
 
  private void init() {
    //初始化画笔
    mpaint = new paint(paint.anti_alias_flag);
    mpaint.setstyle(paint.style.fill);
    mpaint.setcolor(color.red);
    
    mpath = new path();
  }
 
  @override
  protected void onsizechanged(int w, int h, int oldw, int oldh) {
    super.onsizechanged(w, h, oldw, oldh);
    screenheight = h;// 获取屏幕高度
    screenwidth = w;//获取屏幕宽度
  
    centery = h / 2;//设置中心点
    wavecount = (int) math.round(screenwidth / wavelength + 1.5);//波长的数量
  }
 
  @override
  protected void ondraw(canvas canvas) {
    super.ondraw(canvas);
    mpath.reset();
    //首先移动到最左边 offset是偏移量
    mpath.moveto(-wavelength + moffset, centery);
    for (int i = 0; i < wavecount; i++) {
      //先画底部的曲线  负的波长的3/4 第二次加一个波长的长度 以及加偏移量  曲线是向下的,控制点加60    终点则为负的波长的1/2 + 波长的长度 和偏移量 
      mpath.quadto(-wavelength * 3 / 4 + i * wavelength + moffset, centery + 60, -wavelength / 2 + i * wavelength + moffset, centery);
      //再画顶部的曲线  负的波长的1/4                 曲线是向上的,控制点减60 
      mpath.quadto(-wavelength * 1 / 4 + i * wavelength + moffset, centery - 60, 0 + i * wavelength + moffset, centery);
    }
    //闭合路径
    mpath.lineto(screenwidth, screenheight);
    mpath.lineto(0, screenheight);
    mpath.close();
    canvas.drawpath(mpath, mpaint);
    //设置点击时间只是为了点击以后才开始循环
    setonclicklistener(this);
  }
 
  @override
  public void onclick(view view) {
    //主要是为了获取偏移量
    mvalueanimator = valueanimator.ofint(0, wavelength);
    mvalueanimator.setduration(1000);
    mvalueanimator.setrepeatcount(valueanimator.infinite);
    mvalueanimator.setinterpolator(new linearinterpolator());
    mvalueanimator.addupdatelistener(new valueanimator.animatorupdatelistener() {
      @override
      public void onanimationupdate(valueanimator valueanimator) {
        moffset = (int) valueanimator.getanimatedvalue();
        //重绘
        invalidate();
      }
    });
    mvalueanimator.start();
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。