HDWave

一個(gè)非常輕量級(jí)別的雙波浪控件，內(nèi)部自動(dòng)管理動(dòng)畫生命周期，無需開發(fā)者干涉，可用于流量波動(dòng)，電量波動(dòng)等比較炫酷的波動(dòng)場(chǎng)景。

wave.gif

Github地址

https://github.com/yinhaide/HDWave

特性

• 雙正弦曲線設(shè)計(jì)的波動(dòng)曲線，內(nèi)部管理動(dòng)畫聲音周期

• 支持切換形狀（圓形、正方形）

• 支持切換邊界寬度與邊界顏色

• 支持切換雙波形的顏色

• 支持切換波形高度

• 支持切換波形振幅

• 支持切換波形的頻率,波形密度

• 支持切換波形平移速度

如何快速集成

導(dǎo)入方式

在工程級(jí)別的build.gradle添加

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

在應(yīng)用級(jí)別的build.gradle添加

api 'com.github.yinhaide:HDWave:0.0.1'

控件屬性

Shape               : 形狀 (0: 圓形; 1:方形; 默認(rèn)圓形)
HeightRatio         : 高度比例 (0 ~ 1, 建議值: 0.5)
AmplitudeRatio      : 振幅比例 (0 ~ 1, 建議值: 0.04)
Frequency           : 橫向波浪個(gè)數(shù) (建議值: 1)
FrontColor          : 前波形顏色, 十六進(jìn)制, 如: "#3CFFFFFF"
BehindColor         : 后波形顏色, 十六進(jìn)制, 如: "#28FFFFFF"
ShiftTime           : 動(dòng)畫時(shí)間, 值越大越快(建議值: 4000)
HeightTime          : 動(dòng)畫時(shí)間, 值越大越快(建議值: 1000)
BorderWidth         : 邊界寬度(建議值: 0)
BorderColor         : 邊界顏色, 十六進(jìn)制, 如: "#44FFFFFF"

控件可設(shè)置的方法

// 動(dòng)態(tài)設(shè)置形狀
public void setShape(ShapeType shapeType): shapeType: CIRCLE, shapeType: SQUARE

// 動(dòng)態(tài)設(shè)置高度比例
public void setHeightRatio(float waveLevelRatio): (范圍: 0 ~ 1)

// 動(dòng)態(tài)設(shè)置振幅
public void setAmplitudeRatio(float amplitudeRatio):  (范圍: 0 ~ 1)

// 兩波形間距比例
public void setDistanceRatio(float distanceRatio):  (范圍: 0 ~ 1)

// 動(dòng)態(tài)設(shè)置波浪數(shù)
public void setFrequency(int frequency): 建議值1

// 動(dòng)態(tài)設(shè)置前波浪色
public void setFrontColor(int frontWaveColor): 十六進(jìn)制, 如:"#3CFFFFFF"

// 動(dòng)態(tài)設(shè)置后波浪色
public void setBehindColor(int behindWaveColor): 十六進(jìn)制, 如:"#28FFFFFF"

// 動(dòng)態(tài)設(shè)置波浪水平滾動(dòng)時(shí)間間隔
public void setShiftTime(int mWaveShiftAniTime): 建議值1000ms, 值越大, 滾動(dòng)越慢

// 動(dòng)態(tài)設(shè)置后邊界色
public void setBorderColor(int behindWaveColor): 十六進(jìn)制, 如:"#44FFFFFF"

// 動(dòng)態(tài)設(shè)置后邊寬度
public void setBorderWidth(int width): 建議0

范例

[XML]
    <com.de.wave.core.WaveView
        android:id="@+id/wave"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        app:de_amplitudeRatio="0.04"
        app:de_frequency="1"
        app:de_heightRatio="0.5"
        app:de_shiftTime="4000"
        app:de_heightTime="1000"
        app:de_shape="circle"
        app:de_borderWidth="0"
        app:de_borderColor="#44FFFFFF"
        app:de_behindColor="#3CFFFFFF"
        app:de_frontColor="#28FFFFFF" />

[JAVA] 
    WaveView waveView = findViewById(R.id.wave);
    waveView.setBorderWidth(mBorderWidth);
    waveView.setBorderColor(mBorderColor);
    waveView.setShapeType(WaveView.ShapeType.CIRCLE);
    waveView.setShapeType(WaveView.ShapeType.SQUARE);
    waveView.setFrontColor(Color.parseColor("#28f16d7a"));
    waveView.setBehindColor(Color.parseColor("#3cf16d7a"));
    waveView.setHeightRatio(ratio);
    waveView.setFrequencyr(i);
    waveView.setAmplitudeRatio(ratio);
    waveView.setShiftTime(seekBar.getProgress());

分享設(shè)計(jì)思路

• 第一步：繪制兩條正弦曲線，振幅為整個(gè)控件的一般高度，剛好填滿整個(gè)控件
• 第二步：其中的一個(gè)正弦可為偏移正弦，保證兩條重合
• 第三部：伸縮變換（正弦曲線在數(shù)值方向做壓縮變換，改變振幅大?。?/li>
• 第四步: 平移變換（開啟平移動(dòng)畫，在波長(zhǎng)的倍數(shù)下周期橫向平移）

這個(gè)項(xiàng)目會(huì)持續(xù)更新中...

都看到這里了，如果覺得寫的可以或者對(duì)你有幫助的話，順手給個(gè)星星點(diǎn)下Star~

這個(gè)控件內(nèi)部采用一個(gè)Fragment框架，如果有興趣的話可以去了解一下

• https://github.com/yinhaide/HDRocket

關(guān)于我

• Email: 123302687@qq.com
• Github: https://github.com/yinhaide
• 簡(jiǎn)書: http://m.itdecent.cn/u/33c3dd2ceaa3
• CSDN: https://blog.csdn.net/yinhaide