波浪交互设计与技术实现

最新推荐文章于 2018-01-30 10:25:31 发布

张科勇

最新推荐文章于 2018-01-30 10:25:31 发布

阅读量570

点赞数 1

分类专栏： android交互设计与技术实现文章标签：交互设计 Android Android开发 Android源码 Android项目实战

本文链接：https://blog.csdn.net/kedi_study/article/details/50618528

版权

android交互设计与技术实现专栏收录该内容

7 篇文章 0 订阅

订阅专栏

有时候为了吸引用户聚焦某个图标，我们可以给图标添加一种波浪放射效果，这样可以很好的做到聚焦用户视觉的目的。比如地图上定位到某个位置点时，我们可以在这个点添加一个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>

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

张科勇

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
波浪交互设计与技术实现

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

扫一扫

专栏目录