Android贝塞尔曲线实现消息拖拽消失
写在前头
写消息拖拽效果的文章不少,但是大部分都把自定义view写死了,我们要实现的是传入一个view,每个view都可以实现拖拽消失爆炸的效果,当然我也是站在巨人的肩膀上来学习的。但个人觉得程序员本就应该敢于学习和借鉴。
源码地址:源码github地址
效果图
分析(用到的知识点):
(1)valueanimator (数值生成器) 用于生成数值,可以设置差值器来改变数字的变化幅度。
(2)objectanimator (动画生成器) 用于生成各种属性,布局动画,同样也可以设置差值器来改变效果。
(3)贝塞尔一阶曲线
(4)自定义view的基础知识
(5)windowmanager 使view拖拽能显示在整个屏幕的任何地方,而不是局限于父布局内
具体实现方法
一、首先我们要实现基础效果
基础效果是点击屏幕任意一点能出现消息拖拽的效果,但是此时我们不用管我们拖动的view,只需要完成大致模型。该部分的难点在于贝塞尔一阶曲线的怎么实现。
基础效果图
分析:
(1)点击任意一点画出两个圆,和一个有贝塞尔曲线组成的path路径
(2)随着拖动距离的增加原点的圆半径逐渐缩小,当距离达到一定大以后原点的圆和贝塞尔曲线组成的path不再显示
贝塞尔曲线的画法
首先我们需要求出角a的大小,根据角a来求到a,b,c,d的坐标位子,然后求到控制点e点的坐标,通过path.quadto()方法来连接a,b和c,d两条贝塞尔曲线。
各点坐标
a(c1.x+sina*c1半径,c1.y-cina*c1半径)
b(c2.x+sina*c2半径,c2.y-cina*c2半径)
c(c2.x-sina*c1半径,c2.y+cina*c1半径)
d(c1.x-sina*c2半径,c1.y+cina*c2半径)
e ((c1.x+c2.x)/2,(c1.y+c2.y)/2)
贝塞尔曲线的path代码
private path getbezeierpath() { double distance = getdistance(mbigcirclepoint,mlittlecirclepoint); mlittlecircleradius = (int) (mlittlecircleradiusmax - distance / 10); if (mlittlecircleradius < mlittlecircleradiusmin) { // 超过一定距离 贝塞尔和固定圆都不要画了 return null; } path bezeierpath = new path(); // 求角 a // 求斜率 float dy = (mbigcirclepoint.y-mlittlecirclepoint.y); float dx = (mbigcirclepoint.x-mlittlecirclepoint.x); float tana = dy/dx; // 求角a double arctana = math.atan(tana); // a float ax = (float) (mlittlecirclepoint.x + mlittlecircleradius*math.sin(arctana)); float ay = (float) (mlittlecirclepoint.y - mlittlecircleradius*math.cos(arctana)); // b float bx = (float) (mbigcirclepoint.x + mbigcircleradius*math.sin(arctana)); float by = (float) (mbigcirclepoint.y - mbigcircleradius*math.cos(arctana)); // c float cx = (float) (mbigcirclepoint.x - mbigcircleradius*math.sin(arctana)); float cy = (float) (mbigcirclepoint.y + mbigcircleradius*math.cos(arctana)); // d float dx = (float) (mlittlecirclepoint.x - mlittlecircleradius*math.sin(arctana)); float dy = (float) (mlittlecirclepoint.y + mlittlecircleradius*math.cos(arctana)); // 拼装 贝塞尔的曲线路径 bezeierpath.moveto(ax,ay); // 移动 // 两个点 pointf controlpoint = getcontrolpoint(); // 画了第一条 第一个点(控制点,两个圆心的中心点),终点 bezeierpath.quadto(controlpoint.x,controlpoint.y,bx,by); // 画第二条 bezeierpath.lineto(cx,cy); // 链接到 bezeierpath.quadto(controlpoint.x,controlpoint.y,dx,dy); bezeierpath.close(); return bezeierpath; }
二、完善代码
这部分我们需要完善所有代码,实现代码的分离,使得所用view都能被拖动,且需要创建一个监听器来监听view是否拖动结束了,结束后调用回调方法以便需要做其他处理。
需要完成的功能:
(1)将传入的view画出来
(2)在手指抬起时判断是爆炸还是回弹
(3)完成回弹和爆炸的代码部分
(4)回弹或者爆炸结束后调用回调通知动画结束
(5)使用windowmanager把自定义拖拽view加进去,隐藏原来得view实现view在任意地方拖动
完整代码部分
(1)自定义view的代码
public class msgdrafitingview extends view{ private pointf mlittlecirclepoint; private pointf mbigcirclepoint; private paint mpaint; //大圆半径 private int mbigcircleradius = 10; //小圆半径 private int mlittlecircleradiusmax = 10; private int mlittlecircleradiusmin = 2; private int mlittlecircleradius; private bitmap dragbitmap; private ontoucnuplistener montoucnuplistener; public msgdrafitingview(context context) { this(context,null); } public msgdrafitingview(context context, @nullable attributeset attrs) { this(context, attrs,0); } public msgdrafitingview(context context, @nullable attributeset attrs, int defstyleattr) { super(context, attrs, defstyleattr); mbigcircleradius = dip2px(mbigcircleradius); mlittlecircleradiusmax = dip2px(mlittlecircleradiusmax); mlittlecircleradiusmin = dip2px(mlittlecircleradiusmin); mpaint = new paint(); mpaint.setcolor(color.red); mpaint.setantialias(true); mpaint.setdither(true); } private int dip2px(int dip) { return (int) typedvalue.applydimension(typedvalue.complex_unit_dip,dip,getresources().getdisplaymetrics()); } @override protected void ondraw(canvas canvas) { if (mbigcirclepoint == null || mlittlecirclepoint == null) { return; } //画大圆 canvas.drawcircle(mbigcirclepoint.x, mbigcirclepoint.y, mbigcircleradius, mpaint); //获得贝塞尔路径 path bezeierpath = getbezeierpath(); if (bezeierpath!=null) { // 小到一定层度就不见了(不画了) canvas.drawcircle(mlittlecirclepoint.x, mlittlecirclepoint.y, mlittlecircleradius, mpaint); // 画贝塞尔曲线 canvas.drawpath(bezeierpath, mpaint); } // 画图片 if (dragbitmap != null) { canvas.drawbitmap(dragbitmap, mbigcirclepoint.x - dragbitmap.getwidth() / 2, mbigcirclepoint.y - dragbitmap.getheight() / 2, null); } } private path getbezeierpath() { double distance = getdistance(mbigcirclepoint,mlittlecirclepoint); mlittlecircleradius = (int) (mlittlecircleradiusmax - distance / 10); if (mlittlecircleradius < mlittlecircleradiusmin) { // 超过一定距离 贝塞尔和固定圆都不要画了 return null; } path bezeierpath = new path(); // 求角 a // 求斜率 float dy = (mbigcirclepoint.y-mlittlecirclepoint.y); float dx = (mbigcirclepoint.x-mlittlecirclepoint.x); float tana = dy/dx; // 求角a double arctana = math.atan(tana); // a float ax = (float) (mlittlecirclepoint.x + mlittlecircleradius*math.sin(arctana)); float ay = (float) (mlittlecirclepoint.y - mlittlecircleradius*math.cos(arctana)); // b float bx = (float) (mbigcirclepoint.x + mbigcircleradius*math.sin(arctana)); float by = (float) (mbigcirclepoint.y - mbigcircleradius*math.cos(arctana)); // c float cx = (float) (mbigcirclepoint.x - mbigcircleradius*math.sin(arctana)); float cy = (float) (mbigcirclepoint.y + mbigcircleradius*math.cos(arctana)); // d float dx = (float) (mlittlecirclepoint.x - mlittlecircleradius*math.sin(arctana)); float dy = (float) (mlittlecirclepoint.y + mlittlecircleradius*math.cos(arctana)); // 拼装 贝塞尔的曲线路径 bezeierpath.moveto(ax,ay); // 移动 // 两个点 pointf controlpoint = getcontrolpoint(); // 画了第一条 第一个点(控制点,两个圆心的中心点),终点 bezeierpath.quadto(controlpoint.x,controlpoint.y,bx,by); // 画第二条 bezeierpath.lineto(cx,cy); // 链接到 bezeierpath.quadto(controlpoint.x,controlpoint.y,dx,dy); bezeierpath.close(); return bezeierpath; } /** * 获得控制点距离 */ public pointf getcontrolpoint() { return new pointf((mlittlecirclepoint.x+mbigcirclepoint.x)/2,(mlittlecirclepoint.y+mbigcirclepoint.y)/2); } /** * 获得两点之间的距离 */ private double getdistance(pointf point1, pointf point2) { return math.sqrt((point1.x - point2.x) * (point1.x - point2.x) + (point1.y - point2.y) * (point1.y - point2.y)); } /** * 绑定view */ public static void attach(view view, msgdrafitinglistener.bubbledisappearlistener disappearlistener) { view.setontouchlistener(new msgdrafitinglistener(view.getcontext(),disappearlistener)); } public void initpoint(float x, float y) { mbigcirclepoint = new pointf(x,y); mlittlecirclepoint = new pointf(x,y); } public void updatepoint(float x,float y) { mbigcirclepoint.x = x; mbigcirclepoint.y = y; invalidate(); } public void setdragbitmap(bitmap dragbitmap) { this.dragbitmap = dragbitmap; } public void setontoucnuplistener(ontoucnuplistener listener) { montoucnuplistener = listener; } public interface ontoucnuplistener { // 还原 void restore(); // 消失爆炸 void dismiss(pointf pointf); } /** * 处理手指抬起后的操作 */ public void ontouchup() { if (mlittlecircleradius > mlittlecircleradiusmin) { // 回弹 valueanimator 值变化的动画 0 变化到 1 valueanimator animator = objectanimator.offloat(1); animator.setduration(250); final pointf start = new pointf(mbigcirclepoint.x, mbigcirclepoint.y); final pointf end = new pointf(mlittlecirclepoint.x, mlittlecirclepoint.y); animator.addupdatelistener(new valueanimator.animatorupdatelistener() { @override public void onanimationupdate(valueanimator animation) { float percent = (float) animation.getanimatedvalue();// 0 - 1 pointf pointf = utils.getpointbypercent(start, end, percent); //更新位子 updatepoint(pointf.x, pointf.y); } }); // 设置一个差值器 在结束的时候回弹 animator.setinterpolator(new overshootinterpolator(3f)); animator.start(); // 还要通知 touchlistener animator.addlistener(new animatorlisteneradapter() { @override public void onanimationend(animator animation) { if(montoucnuplistener != null){ montoucnuplistener.restore(); } } }); } else { // 爆炸 if(montoucnuplistener != null){ montoucnuplistener.dismiss(mbigcirclepoint); } } } }
(2)自定义ontouchlistenner的代码
public class msgdrafitinglistener implements view.ontouchlistener { private windowmanager mwindowmanager; private windowmanager.layoutparams params; private msgdrafitingview mmsgdrafitingview; private context context; // 爆炸动画 private framelayout mbombframe; private imageview mbombimage; private bubbledisappearlistener mdisappearlistener; public msgdrafitinglistener(context context,bubbledisappearlistener disappearlistener) { mwindowmanager = (windowmanager) context.getsystemservice(context.window_service); params = new windowmanager.layoutparams(); mmsgdrafitingview = new msgdrafitingview(context); //背景透明 params.format = pixelformat.transparent; this.context = context; mbombframe = new framelayout(context); mbombimage = new imageview(context); mbombimage.setlayoutparams(new framelayout.layoutparams(utils.dip2px(30,context), utils.dip2px(30,context))); mbombframe.addview(mbombimage); this.mdisappearlistener = disappearlistener; } @override public boolean ontouch(final view view, motionevent motionevent) { switch (motionevent.getaction()) { case motionevent.action_down: //隐藏自己 view.setvisibility(view.invisible); mwindowmanager.addview(mmsgdrafitingview,params); int[] location = new int[2]; view.getlocationonscreen(location); bitmap bitmap = getbitmapbyview(view); //y轴需要减去状态栏的高度 mmsgdrafitingview.initpoint(location[0] + view.getwidth() / 2, location[1]+view.getheight()/2 -utils.getstatusbarheight(context)); // 给消息拖拽设置一个bitmap mmsgdrafitingview.setdragbitmap(bitmap); //设置ontouchuplistener mmsgdrafitingview.setontoucnuplistener(new msgdrafitingview.ontoucnuplistener() { @override public void restore() { //还原位子 // 把消息的view移除 mwindowmanager.removeview(mmsgdrafitingview); // 把原来的view显示 view.setvisibility(view.visible); } @override public void dismiss(pointf pointf) { //爆炸效果 // 要去执行爆炸动画 (帧动画) //移除拖拽的view mwindowmanager.removeview(mmsgdrafitingview); // 要在 mwindowmanager 添加一个爆炸动画 mwindowmanager.addview(mbombframe,params); mbombimage.setbackgroundresource(r.drawable.anim_bubble_pop); animationdrawable drawable = (animationdrawable) mbombimage.getbackground(); mbombimage.setx(pointf.x-drawable.getintrinsicwidth()/2); mbombimage.sety(pointf.y-drawable.getintrinsicheight()/2); drawable.start(); // 等它执行完之后我要移除掉这个 爆炸动画也就是 mbombframe mbombimage.postdelayed(new runnable() { @override public void run() { mwindowmanager.removeview(mbombframe); // 通知一下外面该消失 if(mdisappearlistener != null){ mdisappearlistener.dismiss(view); } } },getanimationdrawabletime(drawable)); } }); break; case motionevent.action_move: mmsgdrafitingview.updatepoint(motionevent.getrawx(), motionevent.getrawy() - utils.getstatusbarheight(context)); break; case motionevent.action_up: mmsgdrafitingview.ontouchup(); break; } return true; } private bitmap getbitmapbyview(view view) { view.builddrawingcache(); bitmap bitmap = view.getdrawingcache(); return bitmap; } public interface bubbledisappearlistener { void dismiss(view view); } /** * 获取爆炸动画画的时间 * @param drawable * @return */ private long getanimationdrawabletime(animationdrawable drawable) { int numberofframes = drawable.getnumberofframes(); long time = 0; for (int i=0;i<numberofframes;i++){ time += drawable.getduration(i); } return time; } }
(3)view的调用代码
public class msgdrafitingviewactivity extends appcompatactivity{ private button mbutton; private textview mtext; @override protected void oncreate(@nullable bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.qq_msg_drafitingview_activity); mbutton = findviewbyid(r.id.mbtn); mtext = findviewbyid(r.id.mtext); msgdrafitingview.attach(mbutton, new msgdrafitinglistener.bubbledisappearlistener() { @override public void dismiss(view view) { } }); msgdrafitingview.attach(mtext, new msgdrafitinglistener.bubbledisappearlistener() { @override public void dismiss(view view) { } }); } }
源码地址:源码github地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。