您的位置: 首页  >  文章  >  Android仿微信红包

Android仿微信红包

分类: 文章 • 2024-09-20 19:17:52

http://blog.****.net/kazarf/article/details/77716987

七夕已经过完了，啊啊啊啊，又是一个人。无聊看了看之前写的小demo，所以想发个博客记录一下~

这次记录的主题是红包，是自定义控件。话不多说，先上gif图~~

Android仿微信红包

怎么样，个人感觉和微信的红包还是有点儿像的，只不过内容比较的简单，不过内容和样式的丰富也就是各种加加加了~~Android仿微信红包

根据gif图，相信很多朋友肯定已经看出来这个控件的动画运作流程。其很简单首先是“開”这个图片旋转，旋转过程中改变图片的前景。旋转完毕，上下两部分进行位移，位移的同时改变“開”图片的大小。然后就完啦~

虽然很简单，不过这个小demo还是花了我一点儿时间的。其中包含的基础知识点有：

1. Path类的一些使用，比方利用贝塞尔曲线完成上下两个红色的显示不全的“椭圆” ，

[java] view plain copy
  1. mPath.addRect(-viewWidth / 2, -viewHeight / 2, viewWidth / 2, viewHeight / 3 - viewHeight / 2, Path.Direction.CW);  
  2. mPath.moveTo(-viewWidth / 2, viewHeight / 3 - viewHeight / 2);  
  3. mPath.quadTo(0, open.getHeight() / 4, viewWidth / 2, viewHeight / 3 - viewHeight / 2);  

比方多段Path之间的布尔操作（可以利用这个方法画出我大天朝的太极双鱼图哟）

[java] view plain copy
  1. mPath.op(path, Path.Op.DIFFERENCE);  

2. canvas的一些方法，比方clipPath来裁剪显示我们需要展示的view的部分

[java] view plain copy
  1. canvas.drawPath(mPath, mPaint);  
  2. canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));  
  3. canvas.clipPath(mPath);  

3. 自定义组合控件的使用，比方这个控件是继承自RelativeLayout，里面包含了我们利用自定义view画的上下两个“椭圆”，一个ImageView

4. 属性动画的使用 ，比方“開”字图片的旋转，以及动画执行中针对 不同的“值” 的相应操作，上下俩“椭圆”的位移..等

然后做的过程中，也发现了一些其他的问题，比方说之前没有接触过的Android硬件加速的问题。不得不感叹iOS确实比较厉害，先于Android支持硬件加速，所以早期页面流畅度完爆我大Android，虽然Android 3.0开始支持硬件加速，页面得益于GPU充分发挥，绘制越来越流畅，可是依然有很多绘制方法是不支持硬件加速的。因为我的find7已经刷至Android 7.1所以开始是没有发现到这个问题，后来发现在Android 5.1的模拟器上，这个两个“椭圆”居然不出现！当时猜测可能是和Android版本有关。可是百度了一堆，真的是一堆，发现各种一字不漏的复制，蛋疼的一米。最后还是在developer上找到了原因。果然是“毒娘”...

下面我再把有关硬件加速的最新支持方法图贴一下，万一谁刚好看见了它帮助解决了某个困惑捏~

Android仿微信红包

Android仿微信红包

Android仿微信红包

后续拓展方面是可以根据需求增加的。比方增加手动控制红包什么时候开启，红包打开后的内容啊什么什么的~~

其实像红包有很多种的实现方式，不仅仅限于自定义控件。也可以让UI姐姐制作多帧的图使用帧动画播放。不过个人觉得，探索的过程更加美妙~所以我选择了自己写Android仿微信红包

致敬曾经网上看过一个大神的座右铭：I‘m not  a gif maker ，I‘m a programmer~~

Android仿微信红包


顶
2
 
踩
0
 
 

相关推荐