Android波纹扩散效果之仿支付宝咻一咻功能实现波纹扩散特效

Android波纹扩散效果之仿支付宝咻一咻功能实现波纹扩散特效



这篇文章主要介绍了Android波纹扩散效果之仿支付宝咻一咻功能实现波纹扩散特效的相关资料,需要的朋友可以参考下



今年春节晚会没看尽兴，被支付宝集福给添了一段插曲，朋友们都在那数定时间段不停的咻一咻，哇，我咻到一个敬业福，不可能的，哈哈。那么咻一咻功能基于程序代码是怎么实现的呢？下面脚本之家小编给大家分享本教程帮助大家学习Android波纹扩散效果之仿支付宝咻一咻功能实现波纹扩散特效，具体内容如下所示：



先来看看这个效果



这是我的在Only上添加的效果，说实话，Only现在都还只是半成品，台面都上不了，怪自己技术不行，也太懒了

PS：这个view也是我模仿了人家的效果，参考了人家的思路写的，不是纯手撸，罪过罪过，网上应该也能找到很多这样的效果，我只是加入了一些自己的需求在里面





我么新建一个工程——Whew



RoundImageView



这个之前讲过网上的粒子，把头像变成圆形的，这里就不多说了，直接撸代码吧！



packagecom.lgl.whew;/圆形头像CreatedbyLGLon2016/1/12./importandroid.content.Context;importandroid.content.res.TypedArray;importandroid.graphics.Bitmap;importandroid.graphics.Canvas;importandroid.graphics.Paint;importandroid.graphics.PorterDuff;importandroid.graphics.PorterDuffXfermode;importandroid.graphics.Rect;importandroid.graphics.drawable.BitmapDrawable;importandroid.graphics.drawable.Drawable;importandroid.graphics.drawable.NinePatchDrawable;importandroid.util.AttributeSet;importandroid.widget.ImageView;/圆形ImageView，可设置最多两个宽度不同且颜色不同的圆形边框。设置颜色在xml布局文件中由自定义属性配置参数指定/publicclassRoundImageViewextendsImageView{privateintmBorderThickness=0;privateContextmContext;privateintdefaultColor=0xFFFFFFFF;//如果只有其中一个有值，则只画一个圆形边框privateintmBorderOutsideColor=0;privateintmBorderInsideColor=0;//控件默认长、宽privateintdefaultWidth=0;privateintdefaultHeight=0;publicRoundImageView(Contextcontext){super(context);mContext=context;}publicRoundImageView(Contextcontext,AttributeSetattrs){super(context,attrs);mContext=context;setCustomAttributes(attrs);}publicRoundImageView(Contextcontext,AttributeSetattrs,intdefStyle){super(context,attrs,defStyle);mContext=context;setCustomAttributes(attrs);}privatevoidsetCustomAttributes(AttributeSetattrs){TypedArraya=mContext.obtainStyledAttributes(attrs,R.styleable.roundedimageview);mBorderThickness=a.getDimensionPixelSize(R.styleable.roundedimageview_border_thickness,0);mBorderOutsideColor=a.getColor(R.styleable.roundedimageview_border_outside_color,defaultColor);mBorderInsideColor=a.getColor(R.styleable.roundedimageview_border_inside_color,defaultColor);}@OverrideprotectedvoidonDraw(Canvascanvas){Drawabledrawable=getDrawable();if(drawable==null){return;}if(getWidth()==0||getHeight()==0){return;}this.www.hunanwang.netmeasure(0,0);if(drawable.getClass()==NinePatchDrawable.class)return;Bitmapb=((BitmapDrawable)drawable).getBitmap();Bitmapbitmap=b.copy(Bitmap.Config.ARGB_8888,true);if(defaultWidth==0){defaultWidth=getWidth();}if(defaultHeight==0){defaultHeight=getHeight();}intradius=0;if(mBorderInsideColor!=defaultColor&&mBorderOutsideColor!=defaultColor){//定义画两个边框，分别为外圆边框和内圆边框radius=(defaultWidthbmpWidth){//高大于宽squareWidth=squareHeight=bmpWidth;x=0;y=(bmpHeight-bmpWidth)/2;//截取正方形图片squareBitmap=Bitmap.createBitmap(bmp,x,y,squareWidth,squareHeight);}elseif(bmpHeight


这里值得注意的是，要使用这个必须自定义一些属性，我们在values下新建一个attr.xml







然后在xml文件中引入命名空间



xmlns:imagecontrol=http://schemas.android.com/apk/res-auto



我们直接看layout_mian.xml吧



layout_mian.xml



就一些布局咯







这样你就可以使用圆形图片了，我们接下来看波纹的绘制



WhewView



packagecom.lgl.whew;importjava.util.ArrayList;importjava.util.List;importandroid.content.Context;importandroid.graphics.Canvas;importandroid.graphics.Color;importandroid.graphics.Paint;importandroid.util.AttributeSet;importandroid.view.View;/模仿咻一咻@authorLGL/publicclassWhewViewextendsView{privatePaintpaint;privateintmaxWidth=255;//是否运行privatebooleanisStarting=false;privateListalphaList=newArrayList();privateListstartWidthList=newArrayList();publicWhewView(Contextcontext,AttributeSetattrs,intdefStyleAttr){super(context,attrs,defStyleAttr);//TODOAuto-generatedconstructorstubinit();}publicWhewView(Contextcontext,AttributeSetattrs){super(context,attrs);//TODOAuto-generatedconstructorstubinit();}publicWhewView(Contextcontext){super(context);//TODOAuto-generatedconstructorstubinit();}privatevoidinit(){paint=newPaint();//设置博文的颜色paint.setColor(0x0059ccf5);alphaList.add("255");//圆心的不透明度startWidthList.add("0");}@OverridepublicvoidonDraw(Canvascanvas){super.onDraw(canvas);setBackgroundColor(Color.TRANSPARENT);//颜色：完全透明//依次绘制同心圆for(inti=0;i0&&startWidth


这里我们看到，对外有几个方法，一个开始动画，一个停止动画，一个检测是否正在运行



MainActivity



这里就是我们的需求了，我反编译了一下支付宝的APK，并没有找到他的咻一咻的音效，就在他的raw目录下随便找了一个，我们现在是需要这样一个需求

点击图片执行动画，并且每隔五分钟响一次

再次点击图片，停止动画，停止音效

我们先新建一个raw文件夹把音效拷贝进去吧



packagecom.lgl.whew;importandroid.app.Activity;importandroid.media.AudioManager;importandroid.media.SoundPool;importandroid.os.Bundle;importandroid.os.Handler;importandroid.view.View;importandroid.view.View.OnClickListener;publicclassMainActivityextendsActivity{privateWhewViewwv;privateRoundImageViewmy_photo;privatestaticfinalintNou=1;//声明一个SoundPoolprivateSoundPoolsp;//定义一个整型用load（）；来设置suondIDfprivateintmusic;privateHandlerhandler=newHandler(){publicvoidhandleMessage(android.os.Messagemsg){if(msg.what==Nou){//每隔10s响一次handler.sendEmptyMessageDelayed(Nou,5000);sp.play(music,1,1,0,0,1);}}};@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();}privatevoidinitView(){//第一个参数为同时播放数据流的最大个数，第二数据流类型，第三为声音质量sp=newSoundPool(10,AudioManager.STREAM_SYSTEM,5);//把你的声音素材放到res/raw里，第2个参数即为资源文件，第3个为音乐的优先级music=sp.load(this,R.raw.hongbao_gq,1);wv=(WhewView)findViewById(R.id.wv);my_photo=(RoundImageView)findViewById(R.id.my_photo);my_photo.setOnClickListener(newOnClickListener(){@OverridepublicvoidonClick(Viewv){if(wv.isStarting()){//如果动画正在运行就停止，否则就继续执行wv.stop();//结束进程handler.removeMessages(Nou);}else{//执行动画wv.start();handler.sendEmptyMessage(Nou);}}});}}



相信这里的逻辑不是很难吧，对了，我们在结束activity的时候也是要销毁这个进程的，不然…你懂的



@OverrideprotectedvoidonDestroy(){//TODOAuto-generatedmethodstubsuper.onDestroy();handler.removeMessages(Nou);}



我们运行一下，想听效果的可以下载Demo运行一下，我们这里做一个简单的演示