波浪交互设计与技术实现

有时候为了吸引用户聚焦某个图标，我们可以给图标添加一种波浪放射效果，这样可以很好的做到聚焦用户视觉的目的。比如地图上定位到某个位置点时，我们可以在这个点添加一个Marker，然后让Marker波浪式放射，再比如在社交APP中，如果发现你附近有多个好友，则可以在好友头像上添加波浪式放射交互，以吸引用户去关注他们等等。

设计效果:



技术实现：

（1）实现原理

主要是自定义了一个View，重写onDraw()方法得到画布，然后创建一支有颜色的画笔，不断的画同心圆。因为每个同心圆不一样大，所以要不断改变同心圆半径，因为波浪的效果设计成由中心出发，颜色不断变淡，所以要不断的改变画笔的透明度。为了让变化效果比较细腻，每次同心圆半径增1，画笔透明度减1。为了让半径和透明度的改变保持同步，我们定义同心圆的半径最大为透明度最大值（255）,且我们暂且设计只产生5个同心圆，这样的话每当同心圆的半径增加到255/5=51，我们就可心去生成下一个同心圆了，直到同心圆的个数为5为止。

（2）核心代码

1）自定义MyView,继承于View。实现三个构造方法，重写onDraw()方法

public classMyView extends View {

publicMyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);

}

publicMyView(Context context, AttributeSet attrs) {
super(context, attrs);

}

publicMyView(Context context) {
super(context);

}
@Override
protected voidonDraw(Canvas canvas) {
super.onDraw(canvas);

}

}

2）定义画笔，同心圆最大半径，透明度缓冲集合，半径缓冲集合，并初始化画笔、初始透明度、初始半径。

public classMyView extends View {

privatePaint mPaint;//1 定义画笔
privateList<String> mAlphaList = newArrayList<String>();//2透明度缓冲集合
privateList<String> mWidthList = newArrayList<String>();//3半径缓冲集合
private int mMaxWidth =255;//4 同心圆最大半径
publicMyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}

publicMyView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

publicMyView(Context context) {
super(context);
init();
}
/**
* 5初始化画笔，缓冲集合
*/
private voidinit(){
mPaint = newPaint();
mPaint.setColor(Color.YELLOW);
mAlphaList.add("255");
mWidthList.add("0");
}
@Override
protected voidonDraw(Canvas canvas) {
super.onDraw(canvas);

}

}

3 )在onDraw()方法中减加透明度与同心圆半径，然后绘制同心圆

public classMyView extends View {

privatePaint mPaint;//1 定义画笔
privateList<String> mAlphaList = newArrayList<String>();//2透明度缓冲集合
privateList<String> mWidthList = newArrayList<String>();//3半径缓冲集合
private int mMaxWidth =255;//4 同心圆最大半径
publicMyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}

publicMyView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

publicMyView(Context context) {
super(context);
init();
}
/**
* 5初始化画笔，缓冲集合
*/
private voidinit(){
mPaint = newPaint();
mPaint.setColor(Color.YELLOW);
mAlphaList.add("255");
mWidthList.add("0");
}
@Override
protected voidonDraw(Canvas canvas) {
super.onDraw(canvas);
//初始时就一个同心圆，但后面会增加多个同心圆，所以绘制的时候使用循环
for(int i=0;i< mWidthList.size();i++){
//获取缓冲集合中的透明度并减1
int alpha =Integer.parseInt(mAlphaList.get(i))-1;
//获取缓冲集合中的同心圆半径并加1
int radius =Integer.parseInt(mWidthList.get(i))+1;
//改变画笔的透明度
mPaint.setAlpha(alpha);
//以MyView的中心点为中心点，绘制同心圆
canvas.drawCircle(getWidth()/2,getHeight()/2, radius, mPaint);
//判断透明度>0&&半径<最大半径，则缓冲透明度值与半径值
if(alpha>0&&radius<mMaxWidth){
mAlphaList.set(i, alpha+"");
mWidthList.set(i, radius+"");
}
}

}

}

4）增加下一个同心圆，并且当增加到第6个时，删除最开始的同心圆，以确保最多只有5个同心圆。最后要刷新才可生效。

@Override
protected voidonDraw(Canvas canvas) {
super.onDraw(canvas);
//初始时就一个同心圆，但后面会增加多个同心圆，所以绘制的时候使用循环
for(int i=0;i< mWidthList.size();i++){
//获取缓冲集合中的透明度并减1
int alpha =Integer.parseInt(mAlphaList.get(i))-1;
//获取缓冲集合中的同心圆半径并加1
int radius =Integer.parseInt(mWidthList.get(i))+1;
//改变画笔的透明度
mPaint.setAlpha(alpha);
//以MyView的中心点为中心点，绘制同心圆
canvas.drawCircle(getWidth()/2,getHeight()/2, radius, mPaint);
//判断透明度>0&&半径<最大半径，则缓冲透明度值与半径值
if(alpha>0&&radius<mMaxWidth){
mAlphaList.set(i, alpha+"");
mWidthList.set(i, radius+"");
}
}

//添加下一个同心圆(主要是设置同心圆半径和透明度)
if (Integer.parseInt(mWidthList.get(mWidthList.size()- 1)) == mMaxWidth / 5) {
mAlphaList.add("255");
mWidthList.add("0");
}
//控制同心圆的个数不超过5个
if(mWidthList.size()==6){
mAlphaList.remove(0);
mWidthList.remove(0);
}
//一定要的调用此方法，刷新,所谓刷新就是重新调用onDraw()方法，这样新增加的同心圆就可以被绘制了
invalidate();

}

5）使用MyView根据需要进行布局（这个比较简单，就不解释了）

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#40000000"
>

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<com.kedi.dizhenbodemo.MyView
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true">
</com.kedi.dizhenbodemo.MyView>

<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_centerInParent="true"
android:src="@drawable/icon12"/>
</RelativeLayout>

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">

<com.kedi.dizhenbodemo.MyView
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true">
</com.kedi.dizhenbodemo.MyView>

<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_centerInParent="true"
android:src="@drawable/icon13"/>
</RelativeLayout>

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true">

<com.kedi.dizhenbodemo.MyView
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true">
</com.kedi.dizhenbodemo.MyView>

<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_centerInParent="true"
android:src="@drawable/icon14"/>
</RelativeLayout>

</RelativeLayout>

到此，运行项目就可以看到效果图那样的效果了。