Android自定义view(1)
开始写博客,不在懒惰,不在懒惰,不在懒惰,重要的事情说三遍!哈哈,开始自定义view之旅
首先上图:
如何达到该View的效果?波浪如何绘制?
(1)在实现该View之前,先要了解Xfermode
什么是Xfermode:称之为图像混合模式,Android官方给了张图来解释
也就是图像的集合操作
其中我们先绘制Dst,然后给Paint设置Xfermode模式,然后在绘制Src,呈现的效果就如上图所示
几个常用的
SrcIn:取两层交集,显示上层的,DstIn与之相反
SrcOut:取上层图像的非交集部分,DstOut与之相反等等
那么来看我们实现该View的思路:
这种效果可以使用PorterDuff.Mode.SRC_IN模式,也就是取两层交集,显示上层的,即会先绘制一个圆, 然后设置Xfermode的模式为SrcIn,然后在绘制一个波浪,使其与圆相交,不断的移动绘制的波浪就可以达到波动的效果,同时将波浪向上移动,一次有水流逐渐上升的效果。
其中使用到的知识有
(1)Xfermode
(2)使用Handler控制动画逻辑
(3)使用贝塞尔曲线实现波浪效果
来看原理图:
(1)使用Path的贝塞尔曲线方法rQuadTo构建波浪曲线,代码如下:
mPath.reset();
mPath.moveTo(-2 * radius + count, 2 * radius - progress);
mPath.rQuadTo(radius / 2, A, radius, 0);
mPath.rQuadTo(radius / 2, -A, radius, 0);
mPath.rQuadTo(radius / 2, A, radius, 0);
mPath.rQuadTo(radius / 2, -A, radius, 0);
mPath.lineTo(2 * radius + count, 2 * radius);
mPath.lineTo(-2 * radius + count, 2 * radius);
mPath.close();
可以看到使用Path的rQuadTo方法来构建波浪,最后使其封闭,其中rQuadTo的方法相对于前一个点的步进,类似scrollby。在构建完波浪后,我们通过不停的mPath.moveTo,使波浪超前移动,在与圆相交后显示出来,这里注意,波浪与圆的位置关系,波浪在圆的正下方并且有两个完整的波,这样当我们moveTo到一个波浪时,我们在讲其moveTo到原始的位置,波浪有回到了远点,就源源不断的流下来了。
代码如下,当波浪的步进移动了一个完整的波时,就置为为0,让其回到远点
if (count >= 2 * radius) {
count = 0;
}
(2)Xfermode的使用:代码如下:
xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制圆
mPaint.setColor(circleColor);
canvas.drawCircle(radius, radi

最低0.47元/天 解锁文章

被折叠的 条评论
为什么被折叠?



