Android自定义双波浪控件

HDWave

一个非常轻量级别的双波浪控件，内部自动管理动画生命周期，无需开发者干涉，可用于流量波动，电量波动等比较炫酷的波动场景。

wave.gif

Github地址

https://github.com/yinhaide/HDWave

特性

双正弦曲线设计的波动曲线，内部管理动画声音周期
支持切换形状（圆形、正方形）
支持切换边界宽度与边界颜色
支持切换双波形的颜色
支持切换波形高度
支持切换波形振幅
支持切换波形的频率,波形密度
支持切换波形平移速度

如何快速集成

导入方式

在工程级别的build.gradle添加

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

在应用级别的build.gradle添加

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

控件属性

Shape               : 形状 (0: 圆形; 1:方形; 默认圆形)
HeightRatio         : 高度比例 (0 ~ 1, 建议值: 0.5)
AmplitudeRatio      : 振幅比例 (0 ~ 1, 建议值: 0.04)
Frequency           : 横向波浪个数 (建议值: 1)
FrontColor          : 前波形颜色, 十六进制, 如: "#3CFFFFFF"
BehindColor         : 后波形颜色, 十六进制, 如: "#28FFFFFF"
ShiftTime           : 动画时间, 值越大越快(建议值: 4000)
HeightTime          : 动画时间, 值越大越快(建议值: 1000)
BorderWidth         : 边界宽度(建议值: 0)
BorderColor         : 边界颜色, 十六进制, 如: "#44FFFFFF"

控件可设置的方法

// 动态设置形状
public void setShape(ShapeType shapeType): shapeType: CIRCLE, shapeType: SQUARE

// 动态设置高度比例
public void setHeightRatio(float waveLevelRatio): (范围: 0 ~ 1)

// 动态设置振幅
public void setAmplitudeRatio(float amplitudeRatio):  (范围: 0 ~ 1)

// 两波形间距比例
public void setDistanceRatio(float distanceRatio):  (范围: 0 ~ 1)

// 动态设置波浪数
public void setFrequency(int frequency): 建议值1

// 动态设置前波浪色
public void setFrontColor(int frontWaveColor): 十六进制, 如:"#3CFFFFFF"

// 动态设置后波浪色
public void setBehindColor(int behindWaveColor): 十六进制, 如:"#28FFFFFF"

// 动态设置波浪水平滚动时间间隔
public void setShiftTime(int mWaveShiftAniTime): 建议值1000ms, 值越大, 滚动越慢

// 动态设置后边界色
public void setBorderColor(int behindWaveColor): 十六进制, 如:"#44FFFFFF"

// 动态设置后边宽度
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());

分享设计思路

第一步：绘制两条正弦曲线，振幅为整个控件的一般高度，刚好填满整个控件
第二步：其中的一个正弦可为偏移正弦，保证两条重合
第三部：伸缩变换（正弦曲线在数值方向做压缩变换，改变振幅大小）
第四步: 平移变换（开启平移动画，在波长的倍数下周期横向平移）

这个项目会持续更新中...

都看到这里了，如果觉得写的可以或者对你有帮助的话，顺手给个星星点下Star~

这个控件内部采用一个Fragment框架，如果有兴趣的话可以去了解一下

https://github.com/yinhaide/HDRocket

关于我

Email: 123302687@qq.com
Github: https://github.com/yinhaide
简书: https://www.jianshu.com/u/33c3dd2ceaa3
CSDN: https://blog.csdn.net/yinhaide

最后编辑于：2019.12.04 16:48:15