溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關在Android中使用View實現一個波浪動畫，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
xml中調用
<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"/>
實現原理
屬性配置
attrs.xml文件中,進行屬性配置
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="Wave"> <!--波浪顏色--> <attr name="waveColor" format="color"/> <!--波浪背景顏色--> <attr name="waveBackgroundColor" format="color"/> <!--波浪速度--> <attr name="speed" format="float"/> <!--正弦曲線相關--> <!--波浪振幅--> <attr name="amplitude" format="integer"/> <!--波浪相對于控件的位置--> <attr name="quadrant" format="float"/> <!--波浪的頻率--> <attr name="frequency" format="float"/> </declare-styleable> </resources>
獲取屬性,同時對屬性賦默認值
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進行繪制即可,這里需要注意的正弦曲線的繪制.
正弦曲線(y=Asin(ωx+φ)+k)的一些參數如下:
A——振幅，當物體作軌跡符合正弦曲線的直線往復運動時，其值為行程的1/2。
(ωx+φ)——相位，反映變量y所處的狀態。
φ——初相，x=0時的相位；反映在坐標系上則為圖像的左右移動。
k——偏距，反映在坐標系上則為圖像的上移或下移。
ω——角速度， 控制正弦周期(單位角度內震動的次數)。
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);
}波浪動畫
這時波浪應該已經繪制完成了,下面使用Handler中的周期任務實現動畫效果.
// 創建一個周期任務,它的職責是改變正弦曲線的偏移量
final class WaveAnimation implements Runnable {
@Override
public void run() {
mWavePath.reset();
mShift += mSpeed;
invalidate();
Wave.this.postDelayed(this, DEFAULT_PERIOD);
}
}在View被創建的時候讓它進行執行
// 開始波浪動畫 postDelayed(new WaveAnimation(), DEFAULT_PERIOD);
完整代碼
public class Wave extends View {
// 默認屬性值
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;
// 波浪的頻率,這個值越大,波浪越密集
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);
// 開始波浪動畫
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);
}
}
}關于在Android中使用View實現一個波浪動畫就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
