高仿雷达扫描效果和仿水波纹中心扩散效果，手把手教你撸一个炫酷的自定义view。
于亚豪的博客地址：
/androidstar…
我们先看效果图吧
对于仿水波纹中心扩脉冲效果
思路
大家一看就应该知道，一张图片在不断的放大，且颜色渐变。那不就是自定义属性动画吗
没错就是这么神奇。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* 博客地址：/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")@Overrideprotected 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();}@Overridepublic 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);}}}}复制代码
最终实现效果：
代码并没有很多，需要的同学可以下载github Demo体验和学习。
项目Github链接地址
/androidstar…
下载慢？CSDN下载链接：
/detail/andr…
相信自己，没有做不到的，只有想不到的
如果你觉得此文对您有所帮助，欢迎入群 QQ交流群 ：232203809
微信公众号：终端研发部
