老夫?yàn)榱私裉焓巧焚M(fèi)苦心啊，哈哈哈哈
一直想模仿探探的一個(gè)雷達(dá)搜索效果（探探應(yīng)該用過吧，就是和陌陌類似的不可描述app）
總結(jié)了前面兩篇博客，今天終于可以上手干了血崭！
完全自定義控件-自定義雷達(dá)掃描控件
完全自定義控件-自定義絢麗水波紋效果
仿探探雷達(dá)搜索附近人動(dòng)畫
效果展示
效果展示
需求分析
外圈自動(dòng)旋轉(zhuǎn)（類似雷達(dá)，通過旋轉(zhuǎn)背景圖片實(shí)現(xiàn)）厘灼。點(diǎn)擊中間Logo圖片會(huì)對(duì)圖片會(huì)進(jìn)行縮放夹纫，并產(chǎn)生"波紋"效果。
實(shí)現(xiàn)思路
- 自定義類繼承View手幢，初始化數(shù)據(jù)
- 定義每個(gè)圓環(huán)的實(shí)體類 Wave捷凄，并初始化繪制圓環(huán)的畫筆的數(shù)據(jù)。
- 重寫onTouchEvent方法围来，down時(shí)，獲得坐標(biāo)點(diǎn)，做為圓環(huán)圓心监透。
- 重寫onDraw()方法桶错，繪制雷達(dá)掃描，繪制波紋胀蛮，繪制中心圖片縮放動(dòng)畫院刁。
- 利用Handler實(shí)現(xiàn)循環(huán)
1. 自定義類繼承View，初始化數(shù)據(jù)
public class TantanRadarView extends View {
private int w, h; //獲取控件寬高粪狼，用于畫圓的坐標(biāo)位置以及半徑
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}; //縮放比例的數(shù)組
private int mScaleIndex = 0; //圖片縮放的下標(biāo)
private int mRadarBitmapWidth; //圖片寬高
private int mRadarBitmapHeight;
private int mBitmapWidth;
private int mBitmapHeight;
private float x; //觸摸點(diǎn)的坐標(biāo)
private float y;
private Boolean isTouch; //圖片是否被觸摸
private ArrayList<Wave> mList; //存放圓環(huán)的集合
private Matrix mMatrix;
private int start = 0; //開始的角度
private Handler mHandler = new Handler();
public TantanRadarView(Context context, AttributeSet attrs) {
super(context, attrs);
init(); //初始化數(shù)據(jù)
mList = new ArrayList<Wave>();
mHandler.post(run); //提交計(jì)劃任務(wù)馬上執(zhí)行
}
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. 定義實(shí)體類 Wave
public class Wave {
public float x;//圓心x坐標(biāo)
public float y;//圓心y坐標(biāo)
public Paint paint; //畫圓的畫筆
public float width; //線條寬度
public int radius; //圓的半徑
public Wave(float x, float y) {
this.x = x;
this.y = y;
initData();
}
/**
* 初始化數(shù)據(jù),每次點(diǎn)擊一次都要初始化一次
*/
private void initData() {
paint=new Paint();//因?yàn)辄c(diǎn)擊一次需要畫出不同的圓環(huán)
paint.setAntiAlias(true);//打開抗鋸齒
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.STROKE);//描邊
paint.setStrokeWidth(width);//設(shè)置描邊寬度
paint.setAlpha(255);//透明度的設(shè)置(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:
//在圖片的范圍內(nèi)點(diǎn)擊
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;
//縮放數(shù)組從0下標(biāo)開始縮放
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);
//如果圖片被點(diǎn)擊則進(jìn)行縮放動(dòng)畫
if (isTouch) {
touchBitmapEvent(canvas);
} else {
canvas.drawBitmap(mBitmap, w / 2 - mBitmapWidth / 2, h / 2 - mBitmapHeight / 2, null);
}
}
繪制波紋
- 波紋寬度隨半徑擴(kuò)大減小
private void startWave(Canvas canvas) {
//避免程序一運(yùn)行就進(jìn)行繪制
if (mList.size() > 0) {
//對(duì)集合中的圓環(huán)對(duì)象循環(huán)繪制
for (Wave wave : mList) {
canvas.drawCircle(wave.x, wave.y, wave.radius, wave.paint);
wave.radius += 3;
//對(duì)畫筆透明度進(jìn)行操作
int alpha = wave.paint.getAlpha();
if (alpha < 160) {
alpha = 0;
} else {
alpha -= 2;
}
//設(shè)置畫筆寬度和透明度
wave.paint.setStrokeWidth(wave.width-wave.radius / 30);
wave.paint.setAlpha(alpha);
}
}
}
繪制雷達(dá)掃描
- 通過矩形對(duì)背景圖片進(jìn)行控制，旋轉(zhuǎn)角度在Handler中自增再榄，通過反復(fù)調(diào)用onDraw()方法實(shí)現(xiàn)動(dòng)畫
- Matrix的set狡刘，pre，post方法調(diào)用順序
Matrix調(diào)用一系列set,pre,post方法時(shí),可視為將這些方法插入到一個(gè)隊(duì)列困鸥。按照隊(duì)列中從頭至尾的順序調(diào)用執(zhí)行嗅蔬。
pre表示在隊(duì)頭插入一個(gè)方法
post表示在隊(duì)尾插入一個(gè)方法
set表示把當(dāng)前隊(duì)列清空,并且總是位于隊(duì)列的最中間位置
當(dāng)執(zhí)行了一次set后：pre方法總是插入到set前部的隊(duì)列的最前面，post方法總是插入到set后部的隊(duì)列的最后面
詳細(xì)解析Matrix的set,pre,post調(diào)用順序
private void startRadar(Canvas canvas) {
//矩陣執(zhí)行隊(duì)列創(chuàng)建
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);
//對(duì)圖片進(jìn)行操作
canvas.drawBitmap(mRadarBitmap, mMatrix, null);
}
繪制圖片縮放動(dòng)畫
private void touchBitmapEvent(Canvas canvas) {
if (isTouch) {
if (mScaleIndex < s.length) {
//循環(huán)讀取數(shù)組的值疾就，對(duì)圖片進(jìn)行縮放
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循環(huán)繪制實(shí)現(xiàn)轉(zhuǎn)動(dòng)
- 這可是實(shí)現(xiàn)交互和動(dòng)畫的靈魂澜术！
private Handler mHandler = new Handler();
Runnable run = new Runnable() {
@Override
public void run() {
start+=5;
//刷新UI
postInvalidate();
//如果到了360度，則重新開始
start = start == 360 ? 0 : start;
//延遲執(zhí)行猬腰，可以通過延遲重繪的時(shí)間來控制動(dòng)畫的快慢
postDelayed(this, 50);
}
};
這里是項(xiàng)目地址鸟废。
