完全自定义控件-仿探探搜索附近人动画
2016-08-31 本文已影响938人
hongjay
老夫为了今天是煞费苦心啊，哈哈哈哈
一直想模仿探探的一个雷达搜索效果（探探应该用过吧，就是和陌陌类似的不可描述app）
总结了前面两篇博客，今天终于可以上手干了！
完全自定义控件-自定义雷达扫描控件
完全自定义控件-自定义绚丽水波纹效果
仿探探雷达搜索附近人动画
效果展示
效果展示
需求分析
外圈自动旋转（类似雷达，通过旋转背景图片实现）。点击中间Logo图片会对图片会进行缩放，并产生"波纹"效果。
实现思路
- 自定义类继承View，初始化数据
- 定义每个圆环的实体类 Wave，并初始化绘制圆环的画笔的数据。
- 重写onTouchEvent方法，down时，获得坐标点，做为圆环圆心。
- 重写onDraw()方法，绘制雷达扫描，绘制波纹，绘制中心图片缩放动画。
- 利用Handler实现循环
1. 自定义类继承View，初始化数据
public class TantanRadarView extends View {
private int w, h; //获取控件宽高，用于画圆的坐标位置以及半径
private Bitmap mBitmap; //两张图片
private Bitmap mRadarBitmap;
private float[] s = {1.05f, 1.1f, 1.15f, 1.2f, 1.25f, 1.2f, 1.1f, 1.0f, 0.9f, 0.8f, 0.75f, 0.8f, 0.9f, 1.0f}; //缩放比例的数组
private int mScaleIndex = 0; //图片缩放的下标
private int mRadarBitmapWidth; //图片宽高
private int mRadarBitmapHeight;
private int mBitmapWidth;
private int mBitmapHeight;
private float x; //触摸点的坐标
private float y;
private Boolean isTouch; //图片是否被触摸
private ArrayList<Wave> mList; //存放圆环的集合
private Matrix mMatrix;
private int start = 0; //开始的角度
private Handler mHandler = new Handler();
public TantanRadarView(Context context, AttributeSet attrs) {
super(context, attrs);
init(); //初始化数据
mList = new ArrayList<Wave>();
mHandler.post(run); //提交计划任务马上执行
}
private void init() {
//加载图片，得到图片的宽和高
mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.logo);
mBitmapWidth = mBitmap.getWidth();
mBitmapHeight = mBitmap.getHeight();
mRadarBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.radar);
mRadarBitmapWidth = mRadarBitmap.getWidth();
mRadarBitmapHeight = mRadarBitmap.getHeight();
mMatrix = new Matrix(); //初始化矩阵
isTouch = false;
}
2. 定义实体类 Wave
public class Wave {
public float x;//圆心x坐标
public float y;//圆心y坐标
public Paint paint; //画圆的画笔
public float width; //线条宽度
public int radius; //圆的半径
public Wave(float x, float y) {
this.x = x;
this.y = y;
initData();
}
/**
* 初始化数据,每次点击一次都要初始化一次
*/
private void initData() {
paint=new Paint();//因为点击一次需要画出不同的圆环
paint.setAntiAlias(true);//打开抗锯齿
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.STROKE);//描边
paint.setStrokeWidth(width);//设置描边宽度
paint.setAlpha(255);//透明度的设置(0-255),0为完全透明
radius=50;//控制波纹的半径为图片半径
width=7;
}
}
3. 重写onTouchEvent方法
public boolean onTouchEvent(MotionEvent event) {
x = event.getX();
y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_UP:
//在图片的范围内点击
if (x > w / 2 - mBitmapWidth / 2 && x < w / 2 + mBitmapWidth / 2
&& y > h / 2 - mBitmapHeight / 2 && y < h / 2 + mBitmapHeight / 2) {
//波纹的圆心固定
x = w / 2;
y = h / 2;
deleteItem();
Wave wave = new Wave(x, y);
mList.add(wave);
isTouch = true;
//缩放数组从0下标开始缩放
mScaleIndex=0;
}
break;
}
return true;
}
//从集合中删除不可见的波纹
private void deleteItem() {
for (int i = 0; i < mList.size(); i++) {
if (mList.get(i).paint.getAlpha() == 0) {
mList.remove(i);
}
}
}
4. 开始绘制
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
w = getMeasuredWidth();//获取view的宽度
h = getMeasuredHeight();//获取view的高度
//开始扫描
startRadar(canvas);
startWave(canvas);
//如果图片被点击则进行缩放动画
if (isTouch) {
touchBitmapEvent(canvas);
} else {
canvas.drawBitmap(mBitmap, w / 2 - mBitmapWidth / 2, h / 2 - mBitmapHeight / 2, null);
}
}
绘制波纹
- 波纹宽度随半径扩大减小
private void startWave(Canvas canvas) {
//避免程序一运行就进行绘制
if (mList.size() > 0) {
//对集合中的圆环对象循环绘制
for (Wave wave : mList) {
canvas.drawCircle(wave.x, wave.y, wave.radius, wave.paint);
wave.radius += 3;
//对画笔透明度进行操作
int alpha = wave.paint.getAlpha();
if (alpha < 160) {
alpha = 0;
} else {
alpha -= 2;
}
//设置画笔宽度和透明度
wave.paint.setStrokeWidth(wave.width-wave.radius / 30);
wave.paint.setAlpha(alpha);
}
}
}
绘制雷达扫描
- 通过矩形对背景图片进行控制，旋转角度在Handler中自增，通过反复调用onDraw()方法实现动画
- Matrix的set，pre，post方法调用顺序
Matrix调用一系列set,pre,post方法时,可视为将这些方法插入到一个队列。按照队列中从头至尾的顺序调用执行。
pre表示在队头插入一个方法
post表示在队尾插入一个方法
set表示把当前队列清空,并且总是位于队列的最中间位置
当执行了一次set后：pre方法总是插入到set前部的队列的最前面，post方法总是插入到set后部的队列的最后面
private void startRadar(Canvas canvas) {
//矩阵执行队列创建
mMatrix.setRotate(start, mRadarBitmap.getWidth() / 2, mRadarBitmap.getHeight() / 2);
mMatrix.postScale(1.3f, 1.3f);
mMatrix.postTranslate(w / 2 - mRadarBitmapWidth / 2 * 1.3f, h / 2 - mRadarBitmapHeight / 2 * 1.3f);
//对图片进行操作
canvas.drawBitmap(mRadarBitmap, mMatrix, null);
}
绘制图片缩放动画
private void touchBitmapEvent(Canvas canvas) {
if (isTouch) {
if (mScaleIndex < s.length) {
//循环读取数组的值，对图片进行缩放
Matrix matrix = new Matrix();
matrix.setScale(s[mScaleIndex], s[mScaleIndex], mBitmap.getWidth() / 2, mBitmap.getHeight() / 2);
matrix.postTranslate(getWidth() / 2 - mBitmap.getWidth() / 2, getHeight() / 2 - mBitmap.getHeight() / 2);
canvas.drawBitmap(mBitmap, matrix, null);
mScaleIndex++;
} else {
canvas.drawBitmap(mBitmap, getWidth() / 2 - mBitmapWidth / 2, getHeight() / 2 - mBitmapHeight / 2, null);
isTouch = false;
}
}
}
5. 通过Handler循环绘制实现转动
- 这可是实现交互和动画的灵魂！
private Handler mHandler = new Handler();
Runnable run = new Runnable() {
@Override
public void run() {
start+=5;
//刷新UI
postInvalidate();
//如果到了360度，则重新开始
start = start == 360 ? 0 : start;
//延迟执行，可以通过延迟重绘的时间来控制动画的快慢
postDelayed(this, 50);
}
};
这里是项目地址。
