一个炫酷的仿雷达扫描和扩散效果——自定义View就是这么简单

高仿雷达扫描效果和仿水波纹中心扩散效果，手把手教你撸一个炫酷的自定义view。

于亚豪的博客地址：

http://blog.csdn.net/androidstarjack

我们先看效果图吧

对于仿水波纹中心扩脉冲效果

思路

大家一看就应该知道，一张图片在不断的放大，且颜色渐变。那不就是自定义属性动画吗

没错就是这么神奇。ScaleAnimation+AlphaAnimation

缩放动画：

//创建一个AnimationSet对象，参数为Boolean型，
//true表示使用Animation的interpolator，false则是使用自己的
animationSet = new AnimationSet(true);
//参数1：x轴的初始值
//参数2：x轴收缩后的值
//参数3：y轴的初始值
//参数4：y轴收缩后的值
//参数5：确定x轴坐标的类型
//参数6：x轴的值，0.5f表明是以自身这个控件的一半长度为x轴
//参数7：确定y轴坐标的类型
//参数8：y轴的值，0.5f表明是以自身这个控件的一半长度为x轴
ScaleAnimation scaleAnimation = new ScaleAnimation(
1, animation_size,1,animation_size,
Animation.RELATIVE_TO_SELF,0.5f,
Animation.RELATIVE_TO_SELF,0.5f);
scaleAnimation.setDuration(3000);
animationSet.addAnimation(scaleAnimation);

渐变动画

//创建一个AlphaAnimation对象，参数从完全的透明度，到完全的不透明
AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
//设置动画执行的时间
alphaAnimation.setDuration(3000);
//将alphaAnimation对象添加到AnimationSet当中
animationSet.addAnimation(alphaAnimation);
//使用ImageView的startAnimation方法执行动画
animationSet.setFillAfter(true);
animationSet.setInterpolator(new AccelerateInterpolator());
animationSet.setAnimationListener(new AnimationListener() {
public void onAnimationStart(Animation animation) {
}
public void onAnimationRepeat(Animation animation) {
}
public void onAnimationEnd(Animation animation) {
imageview_01.startAnimation(animationSet);
}
});
imageview_01.startAnimation(animationSet);

高仿雷达扫描效果

思路

首先我们要确认要用什么方式去实现

布局的摆放

利用属性动画一张图片或者是一个view在绕着中心点

自定义View进行矩阵旋转

效果实现

自定义RelativeLayout进行摆设布

protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawBitmap(bitmap, getWidth() / 2 - bitmap.getWidth() / 2, getHeight() / 2 - bitmap.getHeight() / 2, null);
canvas.drawBitmap(bitmap1,  getWidth() / 2 - bitmap1.getWidth() / 2, getHeight() / 2 - bitmap1.getHeight() / 2, null);
if(isSearching) invalidate();
}

动画

Rect rMoon = new Rect(getWidth()/2-bitmap2.getWidth(),getHeight()/2,getWidth()/2,getHeight()/2+bitmap2.getHeight());
canvas.rotate(offsetArgs,getWidth()/2,getHeight()/2);
canvas.drawBitmap(bitmap2,null,rMoon,null);
offsetArgs = offsetArgs + 3;

自定义CircleWaveDivergenceView：

/**
* 类功能描述：</br>
* 仿雷达扫描View
* 博客地址：http://blog.csdn.net/androidstarjack
* 公众号：终端研发部
* @author yuyahao
* @version 1.0 </p> 修改时间：</br> 修改备注：</br>
*/
public class CircleWaveDivergenceView extends RelativeLayout{

public static final String TAG = "SearchDevicesView";
public static final boolean D  = BuildConfig.DEBUG;
public Context context;
@SuppressWarnings("unused")
private long TIME_DIFF = 1500;
private float offsetArgs = 0;
private boolean isSearching = false;
private Bitmap bitmap;
private Bitmap bitmap1;
private Bitmap bitmap2;

public boolean isSearching() {
return isSearching;
}

public void setSearching(boolean isSearching) {
this.isSearching = isSearching;
offsetArgs = 0;
invalidate();
}

public CircleWaveDivergenceView(Context context) {
super(context);
this.context = context;
initBitmap();
}

public CircleWaveDivergenceView(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
initBitmap();
}

public CircleWaveDivergenceView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.context = context;
initBitmap();
}

private void initBitmap(){
if(bitmap == null){
bitmap = Bitmap.createBitmap(BitmapFactory.decodeResource(context.getResources(), R.drawable.gplus_search_bg));
}
if(bitmap1 == null){
bitmap1 = Bitmap.createBitmap(BitmapFactory.decodeResource(context.getResources(), R.drawable.locus_round_click));
}
if(bitmap2 == null){
bitmap2 = Bitmap.createBitmap(BitmapFactory.decodeResource(context.getResources(), R.drawable.gplus_search_args));
}
}

@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawBitmap(bitmap, getWidth() / 2 - bitmap.getWidth() / 2, getHeight() / 2 - bitmap.getHeight() / 2, null);
if(isSearching){
Rect rMoon = new Rect(getWidth()/2-bitmap2.getWidth(),getHeight()/2,getWidth()/2,getHeight()/2+bitmap2.getHeight());
canvas.rotate(offsetArgs,getWidth()/2,getHeight()/2);
canvas.drawBitmap(bitmap2,null,rMoon,null);
offsetArgs = offsetArgs + 3;}else{
canvas.drawBitmap(bitmap2,  getWidth() / 2  - bitmap2.getWidth() , getHeight() / 2, null);
}
canvas.drawBitmap(bitmap1,  getWidth() / 2 - bitmap1.getWidth() / 2, getHeight() / 2 - bitmap1.getHeight() / 2, null);
if(isSearching) invalidate();
}

@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
handleActionDownEvenet(event);
return true;
case MotionEvent.ACTION_MOVE:
return true;
case MotionEvent.ACTION_UP:
return true;
}
return super.onTouchEvent(event);
}

private void handleActionDownEvenet(MotionEvent event){
RectF rectF = new RectF(getWidth() / 2 - bitmap1.getWidth() / 2,
getHeight() / 2 - bitmap1.getHeight() / 2,
getWidth() / 2 + bitmap1.getWidth() / 2,
getHeight() / 2 + bitmap1.getHeight() / 2);

if(rectF.contains(event.getX(), event.getY())){
if(D) Log.d(TAG, "click search device button");
if(!isSearching()) {
setSearching(true);
}else{
setSearching(false);
}
}
}
}

最终实现效果：

关于更多

2017上半年技术文章集合—184篇文章分类汇总

高级UI特效仿直播点赞效果—一个优美炫酷的点赞动画

一个实现录音和播放的小案例

NDK项目实战—高仿360手机助手之卸载监听

代码并没有很多，需要的同学可以下载github Demo体验和学习。

项目Github链接地址

https://github.com/androidstarjack/MyCircleWaveDiverge

下载慢？CSDN下载链接：

http://download.csdn.net/detail/androidstarjack/9892366

相信自己，没有做不到的，只有想不到的

如果你觉得此文对您有所帮助，欢迎入群 QQ交流群 ：232203809

微信公众号：终端研发部