android波浪动画简书,Android自定义双波浪控件

HDWave

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

wave.gif

Github地址

特性

双正弦曲线设计的波动曲线，内部管理动画声音周期

支持切换形状(圆形、正方形)

支持切换边界宽度与边界颜色

支持切换双波形的颜色

支持切换波形高度

支持切换波形振幅

支持切换波形的频率,波形密度

支持切换波形平移速度

如何快速集成

导入方式

在工程级别的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]

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框架，如果有兴趣的话可以去了解一下

关于我