android貝塞爾曲線實(shí)現(xiàn)波浪效果

更新時(shí)間：2020年08月26日 13:50:57 作者：a719739635

這篇文章主要為大家詳細(xì)介紹了android貝塞爾曲線實(shí)現(xiàn)波浪效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了android貝塞爾曲線實(shí)現(xiàn)波浪效果的具體代碼，供大家參考，具體內(nèi)容如下

因?yàn)槭謾C(jī)錄制gif不知道下什么軟件好，所以暫時(shí)就先忽略效果圖了

我在屏幕外多畫(huà)了1.5個(gè)波浪，延伸至屏幕內(nèi)。然后不斷的循環(huán)，向右邊移動(dòng)。就有一種波浪的效果。

所以現(xiàn)在只需要畫(huà)出左邊的波長(zhǎng)，然后再通過(guò)循環(huán)添加所有的波長(zhǎng)即可。

第一個(gè)曲線已經(jīng)確定了控制點(diǎn)和終點(diǎn)的坐標(biāo)，

第二條曲線也可以很明顯的看出來(lái)終點(diǎn)是在x軸的0點(diǎn)坐標(biāo)，Y軸不變，而控制點(diǎn)是在負(fù)的波長(zhǎng)的1/4的位置

有了上下曲線以后，其他的就可以直接通過(guò)循環(huán)進(jìn)行添加了

接下來(lái)直接看一下代碼

public class WaveView extends View implements View.OnClickListener {
 //路徑
 private Path mPath;
 //畫(huà)筆
 private Paint mPaint;
 //屏幕高度
 private int screenHeight;
 //屏幕寬度
 private int screenWidth;
 //波長(zhǎng) 自己控制
 private int waveLength = 800;
 //波長(zhǎng)的數(shù)量
 private int waveCount;
 //貝塞爾曲線的控制點(diǎn)
 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() {
  //初始化畫(huà)筆
  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;//設(shè)置中心點(diǎn)
  waveCount = (int) Math.round(screenWidth / waveLength + 1.5);//波長(zhǎng)的數(shù)量
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  mPath.reset();
  //首先移動(dòng)到最左邊 offset是偏移量
  mPath.moveTo(-waveLength + mOffset, centerY);
  for (int i = 0; i < waveCount; i++) {
   //先畫(huà)底部的曲線 負(fù)的波長(zhǎng)的3/4 第二次加一個(gè)波長(zhǎng)的長(zhǎng)度 以及加偏移量 曲線是向下的，控制點(diǎn)加60  終點(diǎn)則為負(fù)的波長(zhǎng)的1/2 + 波長(zhǎng)的長(zhǎng)度 和偏移量 
   mPath.quadTo(-waveLength * 3 / 4 + i * waveLength + mOffset, centerY + 60, -waveLength / 2 + i * waveLength + mOffset, centerY);
   //再畫(huà)頂部的曲線 負(fù)的波長(zhǎng)的1/4         曲線是向上的，控制點(diǎn)減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);
  //設(shè)置點(diǎn)擊時(shí)間只是為了點(diǎn)擊以后才開(kāi)始循環(huán)
  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();
 }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: