溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

在Android中使用View實(shí)現(xiàn)一個(gè)波浪動(dòng)畫

發(fā)布時(shí)間：2020-11-06 17:34:00 來源：億速云 閱讀：330 作者：Leah 欄目：開發(fā)技術(shù)

這篇文章將為大家詳細(xì)講解有關(guān)在Android中使用View實(shí)現(xiàn)一個(gè)波浪動(dòng)畫，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

xml中調(diào)用

<developer.shivam.waveview.Wave
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:amplitude="100"
  app:quadrant="0.5"
  app:speed="0.15"/>

在Android中使用View實(shí)現(xiàn)一個(gè)波浪動(dòng)畫

實(shí)現(xiàn)原理

屬性配置

attrs.xml文件中,進(jìn)行屬性配置

<&#63;xml version="1.0" encoding="utf-8"&#63;>
<resources>
 <declare-styleable name="Wave">
  <!--波浪顏色-->
  <attr name="waveColor" format="color"/>
  <!--波浪背景顏色-->
  <attr name="waveBackgroundColor" format="color"/>
  <!--波浪速度-->
  <attr name="speed" format="float"/>
  <!--正弦曲線相關(guān)-->
  <!--波浪振幅-->
  <attr name="amplitude" format="integer"/>
  <!--波浪相對(duì)于控件的位置-->
  <attr name="quadrant" format="float"/>
  <!--波浪的頻率-->
  <attr name="frequency" format="float"/>
 </declare-styleable>
</resources>

獲取屬性,同時(shí)對(duì)屬性賦默認(rèn)值

final TypedArray array = context.obtainStyledAttributes(set, R.styleable.Wave);
  mSpeed = array.getFloat(R.styleable.Wave_speed, DEFAULT_SPEED);
  mWaveColor = array.getColor(R.styleable.Wave_waveColor, DEFAULT_WAVE_COLOR);
  mWaveBKColor = array.getColor(R.styleable.Wave_waveBackgroundColor, DEFAULT_WAVE_BK_COLOR);
  mAmplitude = array.getInt(R.styleable.Wave_amplitude, DEFAULT_AMPLITUDE);
  mQuadrant = array.getFloat(R.styleable.Wave_quadrant, DEFAULT_QUADRANT);
  mFrequency = array.getFloat(R.styleable.Wave_frequency, DEFAULT_FREQUENCY);
  array.recycle();

繪制波浪

在onDraw()中使用Canvas進(jìn)行繪制即可,這里需要注意的正弦曲線的繪制.

正弦曲線(y=Asin(ωx+φ)+k)的一些參數(shù)如下:

A——振幅，當(dāng)物體作軌跡符合正弦曲線的直線往復(fù)運(yùn)動(dòng)時(shí)，其值為行程的1/2。
(ωx+φ)——相位，反映變量y所處的狀態(tài)。
φ——初相，x=0時(shí)的相位；反映在坐標(biāo)系上則為圖像的左右移動(dòng)。
k——偏距，反映在坐標(biāo)系上則為圖像的上移或下移。
ω——角速度， 控制正弦周期(單位角度內(nèi)震動(dòng)的次數(shù))。

onDraw中的代碼:

@Override
protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 final int width = getWidth();
 final int height = getHeight();

 final int waveHeight = (int) (getHeight() * mQuadrant);
 // 繪制背景
 canvas.drawColor(mWaveBKColor);
 mWavePath.moveTo(0, height);
 mWavePath.lineTo(0, waveHeight);
 for (int i = 1; i <= width; i++) {
  // 繪制正弦曲線 y = A Sin(ωt+ ρ) = A sin(2πft + ρ)
  final float y = (float) (waveHeight + mAmplitude * Math.sin(2 * Math.PI * i * mFrequency + mShift));
  mWavePath.lineTo(i, y);
 }
 // 將曲線閉合
 mWavePath.lineTo(width, height);
 canvas.drawPath(mWavePath, mWavePaint);
}

波浪動(dòng)畫

這時(shí)波浪應(yīng)該已經(jīng)繪制完成了,下面使用Handler中的周期任務(wù)實(shí)現(xiàn)動(dòng)畫效果.

// 創(chuàng)建一個(gè)周期任務(wù),它的職責(zé)是改變正弦曲線的偏移量
 final class WaveAnimation implements Runnable {

  @Override
  public void run() {
   mWavePath.reset();
   mShift += mSpeed;
   invalidate();
   Wave.this.postDelayed(this, DEFAULT_PERIOD);
  }
 }

在View被創(chuàng)建的時(shí)候讓它進(jìn)行執(zhí)行

// 開始波浪動(dòng)畫
postDelayed(new WaveAnimation(), DEFAULT_PERIOD);

完整代碼

public class Wave extends View {

 // 默認(rèn)屬性值
 private static final int DEFAULT_AMPLITUDE = 200;
 private static final int DEFAULT_PERIOD = 16;
 private static final float DEFAULT_SPEED = .1F;
 private static final float DEFAULT_QUADRANT = .33F;
 private static final float DEFAULT_FREQUENCY = 1F / 360F;
 private static final int DEFAULT_WAVE_COLOR = Color.parseColor("#64B5F6");
 private static final int DEFAULT_WAVE_BK_COLOR = Color.parseColor("#EEEEEE");

 @SuppressWarnings("FieldCanBeLocal")
 @ColorInt
 private int mWaveColor;
 @ColorInt
 private int mWaveBKColor;
 // 振幅
 private int mAmplitude;
 // 波浪位于View的位置
 private float mQuadrant;
 // 波浪的頻率,這個(gè)值越大,波浪越密集
 private float mFrequency;

 // 速度
 private float mSpeed;
 private float mShift;

 private final Paint mWavePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
 private final Path mWavePath = new Path();



 public Wave(Context context) {
  this(context, null);
 }

 public Wave(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }

 public Wave(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  init(context, attrs);
 }

 private void init(Context context, AttributeSet set) {
  final TypedArray array = context.obtainStyledAttributes(set, R.styleable.Wave);
  mSpeed = array.getFloat(R.styleable.Wave_speed, DEFAULT_SPEED);
  mWaveColor = array.getColor(R.styleable.Wave_waveColor, DEFAULT_WAVE_COLOR);
  mWaveBKColor = array.getColor(R.styleable.Wave_waveBackgroundColor, DEFAULT_WAVE_BK_COLOR);
  mAmplitude = array.getInt(R.styleable.Wave_amplitude, DEFAULT_AMPLITUDE);
  mQuadrant = array.getFloat(R.styleable.Wave_quadrant, DEFAULT_QUADRANT);
  mFrequency = array.getFloat(R.styleable.Wave_frequency, DEFAULT_FREQUENCY);
  array.recycle();

  mWavePaint.setStrokeWidth(2);
  mWavePaint.setColor(mWaveColor);

  // 開始波浪動(dòng)畫
  postDelayed(new WaveAnimation(), DEFAULT_PERIOD);
 }


 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  final int width = getWidth();
  final int height = getHeight();

  final int waveHeight = (int) (getHeight() * mQuadrant);
  // 繪制背景
  canvas.drawColor(mWaveBKColor);
  mWavePath.moveTo(0, height);
  mWavePath.lineTo(0, waveHeight);
  for (int i = 1; i <= width; i++) {
   // 繪制正弦曲線 y = A Sin(ωt+ ρ) = A sin(2πft + ρ)
   final float y = (float) (waveHeight + mAmplitude * Math.sin(2 * Math.PI * i * mFrequency + mShift));
   mWavePath.lineTo(i, y);
  }
  // 將曲線閉合
  mWavePath.lineTo(width, height);
  canvas.drawPath(mWavePath, mWavePaint);
 }


 final class WaveAnimation implements Runnable {

  @Override
  public void run() {
   mWavePath.reset();
   mShift += mSpeed;
   invalidate();
   Wave.this.postDelayed(this, DEFAULT_PERIOD);
  }
 }
}

關(guān)于在Android中使用View實(shí)現(xiàn)一個(gè)波浪動(dòng)畫就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手